Vue-preview-deleter NPM

vue-preview-deleter

基于vue2.0的图片预览与删除组件

可以自定义删除图片的回调函数，在点击删除图片的操作时，回调函数将根据removeInside的值来返回不同的参数，参数包括操作结果 result 和具体数据 data：

当 removeInside 为 true 时：data将返回所删元素的索引index,所删元素removeTarget,和删除元素后的列表fileList，此时应在回调函数内将返回的新的数组赋值到imgs上；
当 removeInside 为 false 时：data将返回所删元素的索引index,所删元素removeTarget,和原始列表fileList，此时应在回调函数内进行删除操作，并重新对imgs赋值；

文档：https://github.com/JayWii/vue-previewer

Install

npm install vue-preview-deleter --save

Usage

// main.js
import VuePreviewer from 'vue-preview-deleter'
Vue.use(VuePreviewer)

<!-- component.vue -->
<template>
  <div id="app">
    <vue-previewer :imgs="imgs" @onRemove="handleRemove" @onClose="closeHandler"></vue-previewer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        {
          src: 'https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg',
          author: 'Folkert Gorter',
          desc: 'This is dummy caption.'
        },
        {
          src: 'https://farm6.staticflickr.com/5584/14985868676_4b802b932a_b.jpg'
        },
        {
          src: 'https://farm4.staticflickr.com/3920/15008465772_383e697089_b.jpg',
          author: 'Folkert Gorter2',
          desc: 'It\'s a dummy caption. He who searches for meaning here will be sorely disappointed.'
        }
      ]
    }
  },
  methods: {
    closeHandler () {
      console.log('cloooooose')
    },
    handleRemove (index, fileList, target) {
      this.imgs = fileList
    }
  }
}
</script>

options

imgs - 图片文件或链接列表，可传入File，url，base64
- type: Array
- required : true
width - 每个图片单元的宽高（为保证图片呈现为方形，高度等于宽度），单位是px
- type: Number
- required : false
- default : 80
margin - 每个图片单元的上外边距和右外边距，单位是px
- type: Number
- required : false
- default : 10
radius - 每个图片单元的圆角值，单位是px
- type: Number
- required : false
- default : 5
removeEnable - 是否可进行删除图片操作，假如为false，则点击图片直接查看大图
- type: Boolean
- required : false
- default : true
removeInside - 删除图片的操作实际是在组件外处理还是组件内处理
- type: Boolean
- required : false
- default : true
deleteBtnColor - 删除按钮的颜色
- type: String
- required : false
- default : '#e12e2e'
previewBtnColor - 预览按钮的颜色
- type: String
- required : false
- default : '#3caaff'
type - 传入的列表值类型，分为两个值：file 和 url （base64也用url）
- type: String
- required : false
- default : 'url'
srcName - 传入的链接字段名
- type: String
- required : false
- default : 'src'