@huteming/ui-image-picker v4.0.0

图片选择器

引入

import { ImagePicker } from 'tommy-ui'

Vue.use(ImagePicker)
// Vue.directive(ImagePicker.name, ImagePicker)

例子

单选

<div v-image-picker="handleLoad">点击选择</div>
<img :src="image" alt="" style="max-width: 100%;" />

export default {
    data () {
        return {
            images: '',
        }
    },

    methods: {
        handleLoad (dataURL) {
            this.image = dataURL
        },
    }
}

多选

<div v-image-picker="{ onload: handleLoadMultiple, multiple: true, max: max }">多选，最多4张</div>
<img v-for="(item, index) in images" :key="index" :src="item" alt="" style="max-width: 100%;" />

export default {
    data () {
        return {
            images: [],
        }
    },

    computed: {
        max () {
            return 4 - this.images.length
        },
    },

    methods: {
        handleLoadMultiple (images) {
            this.images.push(...images)
        },
    },
}

API