@liuyunxi/picture-viewer

图片预览 YxPictureViewer

• 图片预览
• 删除
• 排序

代码演示

<template>
    <YxPictureViewer
        :drag="true"
        @dragend="dragend"
        :del="true"
        :images="images"
        :width="100"
        :height="100"
        @delete="handelDelete"
    ></YxPictureViewer>
</template>

<script setup lang="ts">
import { ref } from 'vue'

import { ImagesTypes } from '../src/types'

const images = ref<ImagesTypes[]>([
    {
        src: 'https://norisk-prod-1305901002.cos.ap-chengdu.myqcloud.com/20220119/014026340563464bb7ee74d653325825.png',
    },
    {
        src: 'https://norisk-dev-1305901002.cos.ap-chengdu.myqcloud.com/20210914/7fdae4d8277c4cbe89cc03930247a9c5.png',
    },
])

const dragend = (params: any) => {
    console.log(params)
}

const handelDelete = ({ index, images }: { index: number; images: ImagesTypes[] }) => {
    console.log(index, images)
}
</script>

<style scoped lang="less"></style>

API

YxPictureViewer

参数	说明	类型	默认值
drag	开启拖拽	boolean	false
del	开启删除	boolean	false
images[v-model:images]	数据列表	[{src:xx}]	[]

事件

事件名称	说明	回调参数
dragend	拖拽事件	function({item,oldIndex,newIndex,images})
delete	删除事件	function({index,images})