vantUI封装图片查看组件

<script setup name="PreviewImage">
const VanImagePreview = ImagePreview.Component;

const attrs = useAttrs();

const show = ref(false);

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  // 图片组
  images: {
    type: Array,
    default: () => []
  },
  // 图片组展示序号
  startPosition: {
    type: Number,
    default: 0
  },
  // 下标展示
  showIndex: {
    type: Boolean,
    default: true
  },
  isFill: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['update:modelValue']);

const close = () => emits('update:modelValue', false);

watch(
  () => props.modelValue,
  (val) => {
    if (val) show.value = val;
  }
);
</script>

<template>
  <van-image-preview
    v-model:show="show"
    v-bind="attrs"
    :class="{ 'is-fill': props.isFill }"
    :images="props.images"
    :startPosition="startPosition"
    :showIndex="showIndex"
    :max-zoom="1"
    @close="close"
  />
</template>

调用

<PreviewImage v-model="showImg" :images="photos" :startPosition="showImgPosition" />