Skip to content

ImageSelector 图片选择器 ​

简介 ​

用于选择、预览、删除正反面图片,支持图片列表选择、预览大图、删除、切换等功能,常用于证件照等场景。

基本用法 ​

vue
<template>
  <g-image-selector v-model="imageValue" :src-list="imageList" />
</template>

<script setup>
import { ref } from 'vue'
const imageValue = ref({ frontImage: null, backImage: null })
const imageList = [{ url: 'https://example.com/1.jpg' }, { url: 'https://example.com/2.jpg' }]
</script>

属性说明 ​

属性说明类型默认值
modelValue绑定值(正反图片对象)object{ frontImage: null, backImage: null }
srcList可选图片列表array[]
showDelete是否显示删除按钮booleantrue

事件 ​

事件名说明回调参数
update:modelValue绑定值变化时触发新的图片对象

插槽 ​

无。