sim-upload-comp

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时缩略图展示图片。