vuetify-upload-img
0.0.9 • Public • Published
vuetify-datetime
介绍
vuetify实现element的图片上传组件
下载引入使用
npm i vuetify-upload-img
import FileImg from 'vuetify-upload-img'
import "vuetify-upload-img/lib/vuefile.css";
Vue.use(FileImg)
<FileImg />
参数说明
<FileImg :defaultFile="value" />
// defaultFile默认展示文件可以是对象或者数组{file,name,url}
<FileImg :width="80" :height="80"/>
// 设置图片宽高
<FileImg :showname="true" />
// 是否展示图片名称
<FileImg :showhover="true" />
// 是否展示hover插槽
<FileImg :showhoverbtn="true" />
// 是否展示默认hover插槽-删除按钮和放大按钮 当设置自定义插槽是需设置showhoverbtn为false
<FileImg :count="3" />
// count限制上传图片数量
<FileImg color="#ff00ff" />
// color设置颜色
<FileImg backgroundColor="#ff00ff" />
// backgroundColor设置背景颜色
<FileImg>
<template v-slot:img-hover-slot="{file,index}">
{{file.name}}
</template>
<template v-slot:img-slot="{file,index}">
{{file.name}}
</template>
</FileImg>
// img-hover-slot插槽自定义hover内容
// img-slot自定义内容
// 其余v-file-input未定义属性可直接添加
<FileImg
:size="8000"
action="/api/v1/file/upload"
:onPreview="onPreview"
:handleRemove="handleRemove"
:headers="{token:'11111'}"
name="name"
:data="{name:'文件'}"
>
// action 请求接口地址
// onPreview 文件上传前函数
// handleRemove 文件移除前函数
// size 限制文件上传大小
// headers 上传的headers
// name 上传时的文件字段名
// data 上传时附带的额外参数
Customize configuration
See Configuration Reference.
Readme
Keywords
nonePackage Sidebar
Install
Weekly Downloads