最近开发了一个PC端的新项目,其中有一个这样的需求,点击表单中已上传的图片(这一栏中可以上传多张图片),进行预览时,会出现一个轮播图的效果,显示当前点击的图片,点击左右滑动,可以预览上一张或者下一张。因为要实现点击哪一张,就显示哪一张的效果,所以在轮播图中需要给它设置当前的图片的name,这样才会展示当前图片,这个时候就用到了ref来获取轮播图的元素。
1、ref获取单个dom元素:
<template>
<div ref='divDom'></div>
</template>
<script setup>
const divDom = ref(null);
onMounted(()=>{
console.log('获取dom元素',divDom)
})
2、ref获取v-for循环中的dom元素:
<template>
<div ref='getDivDom' v-for="item in list" :data-id="item.id"></div>
</template>
<script setup>
const divDomList = ref(new Map());
const getDivDom = el=>{
if(el){
divDomList.set(el.dataset['id'],el)
}
}
// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素
或者使用下面的方法(我就是使用的下面这个方法)
<template>
<div ref='getDivDom' :ref="(el) => getDivDom(el, item)" v-for="item in list"></div>
</template>
<script setup>
const divDomList = ref(new Map());
const getDivDom = (el,item)=>{
if(el){
divDomList.set(item.id, el)
}
}
// const el =divDomList.get(id) // 根据list数据中的id值 获取对应的dom元素
这是我使用上述方法后的代码:
<template>
<!-- 轮播图效果 -->
<el-carousel
arrow="always"
:autoplay="false"
@change="handlecar"
:v-if="imgList.length > 0"
:ref="(el) => getCarou(el, tab.id)"
:data-id="tab.ruleId"
>
<el-carousel-item
v-for="(item, index) in imgList"
:key="index"
:name="item.id"
style="text-align: center"
>
<img :src="item.url" alt="" />
</el-carousel-item>
</el-carousel>
</template>
<script setup>
const divDomList = ref(new Map());
//获取轮播元素
const getCarou = (el, id) => {
if (el) {
divDomList.value.set(id, el);
}
};
//手动切换轮播图
const setActiveItem = (i, id) => {
nextTick(() => {
if (divDomList.value.get(id)) {
divDomList.value.get(id).setActiveItem(i);
}
});
};