sim-upload-comp
v0.5.6
Published
基于vue3 + element-plus + swiper封装的上传组件,可用于图片的上传与展示功能,在表单填写时展示效果为上传,上传点击已上传图片可替换、删除等功能,表单回显时展示效果为图片列表,点击图片列表可滚动查看。
Downloads
9
Readme
sim-upload-comp
基于vue3 + element-plus + swiper封装的上传组件,可用于图片的上传与展示功能,在表单填写时展示效果为上传,上传点击已上传图片可替换、删除等功能,表单回显时展示效果为图片列表,点击图片列表可滚动查看。
Install
npm i sim-upload-comp -S
Usage
main.js
- 注册库中所有组件
// 注册库中所有组件
import simPlugins from 'sim-upload-comp'
const app = createApp(App)
app.use(simPlugins)
app.mount('#app')
- 单独引用上传组件
// lib.js
// 按需加载
import { upload } from 'sim-upload-comp'
export const libs = {
install: function (app) {
app.use(upload )
}
}
// main.js
import lib from 'lib.js'
const app = createApp(App)
app.use(lib)
app.mount('#app')
template
<div>
<UploadComp
:uniqeKey="1"
:isText="false"
/>
</div>
cosnt urls = 'www.pic.com/test1.png|www.pic.com/test2.png'
Upload Component Options
- uniqeKey[String] 组件唯一标识
- isOperable[Boolean] 默认为可编辑上传模式,false为查看模式,无上传按钮
- param[String] 以“|”进行分隔的字符串,字符串为图片url进行展示,初始化时会对Url进行解析,如果是上传模式,解析后会插入到form中进行展示。如果是查看模式,则直接为列表展示图片。
- isText[Boolean] 默认为文字展示图片,效果:
图片${index}
,可在文字中对图片进行展示。 为false时缩略图展示图片。