关键词优化seo_图片设计制作_百度秒收录技术_seo优化百度技术排名教程

通过element-plus官方文档了解

可通过 previewSrcList 开启预览大图的功能。 你可以通过 initial-index 初始化第一张预览图片的位置。 默认初始位置为 0。

<template>
  <div class="demo-image__preview">
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />

   <div class="button-box">

      <el-button type="success" @click="preview">大图预览</el-button>

   </div>
  </div>
</template>

<script lang="ts" setup>
const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
]
</script>

要求:通过点击按钮实现大图预览

解决:点击<el-button>按钮时,找到这个el-image的父元素,然后在改父元素的后代元素中查找类名为el-image的元素内部的第一个img元素,最后模拟点击这个img元素,触发它的click事件

<template>

  <div class="demo-image__preview">

    <el-image

      style="width: 100px; height: 100px"

      :src="url"

      :zoom-rate="1.2"

      :max-scale="7"

      :min-scale="0.2"

      :preview-src-list="srcList"

      :initial-index="initIndex"

      fit="cover"

    />

  <div class="button-box">

      <el-button type="success" @click="preview($event, 1)">大图预览</el-button>

    </div>

</div>

  </div>

</template>

<script lang="ts" setup>

const url = "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";

const srcList = [

  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",

  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",

  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",

  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",

  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",

  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",

  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",

];

const initIndex = ref(0);

function preview(element: any, index: number) {

}

</script>

1.$event 是原生 DOM 事件对象。$event.target 指向触发该事件的 DOM 元素，在这个具体的代码片段中，$event.target 获取的是触发 click 事件的 <el-button> 元素对应的原生 DOM 节点。

function preview(element: any, index: number) {

  console.log("element11111", element.target);

}

2.通过$event.target.parentElement.parentElement.parentElement 获取到这个 <el-image> 元素的父元素。

function preview(element: any, index: number) {

  console.log("element11111", element.target.parentElement.parentElement.parentElement);

}

3.通过querySelector在当前元素的后代元素里查找符合指定css选择器的第一个元素.这里需要的css选择器是.el-image img,然后调用该DOM的click方法,也就是触发该元素的click事件

function preview(element: any, index: number) {

  console.log("element11111", element.target.parentElement.parentElement.parentElement);

  element.target.parentElement.parentElement.parentElement.querySelector(".el-image       img").click();

}

4.通过initIndex的值可以控制展示第几个图片

function preview(element: any, index: number) {

  element.target.parentElement.parentElement.parentElement.querySelector(".el-image       img").click();

  initIndex.value=index

}

全部代码:

<template>

  <div class="demo-image__preview">

    <el-image

      style="width: 100px; height: 100px"

      :src="url"

      :zoom-rate="1.2"

      :max-scale="7"

      :min-scale="0.2"

      :preview-src-list="srcList"

      :initial-index="initIndex"

      fit="cover"

    />

    <div class="button-box">

      <el-button type="success" @click="preview($event, 1)">大图预览</el-button>

    </div>

  </div>

</template>

<script lang="ts" setup>

const url = "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg";

const srcList = [

  "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",

  "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",

  "https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg",

  "https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg",

  "https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg",

  "https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg",

  "https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg",

];

const initIndex = ref(0);

function preview(element: any, index: number) {

  console.log("element11111", element.target.parentElement.parentElement.parentElement);

  element.target.parentElement.parentElement.parentElement.querySelector(".el-image img").click();

  initIndex.value = index;

}

</script>

<style scoped>

.demo-image__error .image-slot {

  font-size: 30px;

}

.demo-image__error .image-slot .el-icon {

  font-size: 30px;

}

.demo-image__error .el-image {

  width: 100%;

  height: 200px;

}

</style>