图片预览 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}) |