无法直接复制用，给自己记忆用的
img2.png
<div class="ten">
<div class="ten-con">
<div class="ten-box" id="ten-box"
:style="tenBox ? 'transform: translate3d(-' + tenBoxWidth + 'rem, 0, 0)!important;' : 'transform: translate3d(0, 0, 0)!important;'">
<div class="ten-item" :class="item.checked ? 'ten-item-checked' : ''"
@click="checkedItem(item)"
v-for="(item, index) in tenList" :key="index">
内容
</div>
</div>
</div>
<div class="left-icon" @click="nextTenBox('l')" v-show="tenBox">
<el-icon><ArrowLeftBold /></el-icon>
</div>
<div class="right-icon" @click="nextTenBox('r')" v-show="!tenBox">
<el-icon><ArrowRightBold /></el-icon>
</div>
</div>
const tenBox = ref(false);
const tenBoxWidth = ref()
const nextTenBox = (type:any) => {
if(type == 'r'){
let width = document.querySelector('.ten-box')?.clientWidth;
tenList.value.forEach((item:any, index:any) => {
if(item.checked === true && index <= 4){
tenBoxWidth.value = width / 80 / 6 * 5;
}
});
tenBox.value = true
}else{
tenBox.value = false
}
}
