vue3+elementplus点击按钮使用el-image-viewer图片预览组件

4.点击按钮给showsrcListref赋值即可完成，同时将showImagePreview置为true。1.首先确保你是全局引入，不是全局的需要自主引入该组件。3. showsrcListref:['']格式。2..vue文件中定义组件。

陈不知代码

3008人浏览 · 2024-01-16 17:17:12

陈不知代码 · 2024-01-16 17:17:12 发布

1.首先确保你是全局引入，不是全局的需要自主引入该组件

2..vue文件中定义组件

 <el-image-viewer
    v-if="showImagePreview"
    :url-list="showsrcListref"
    hide-on-click-modal
    teleported
    @close="closePreview"
    style="z-index: 3000"
  />

3. showsrcListref:['']格式

4.点击按钮给showsrcListref赋值即可完成，同时将showImagePreview置为true

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^