<template>
<view class="main">
<view v-for="(item1, index1) in list_show" :key="index1">
<view v-for="(item2, index2) in item1" :key="index2">
<u--image class="item click" :width="icon_w + 'px'" :height="icon_w + 'px'" :src="'/static/ff/f'+item2+'.webp'" radius="5" :fade-show="false" @click="dian(index1, index2)"></u--image>
</view>
</view>
<view style="height: 100px;"></view>
<view v-for="(item1, index1) in list_show" :key="index1">
<view v-for="(item2, index2) in item1" :key="index2">
<u--image class="item" :class="{'click': dian_index[0] == index1 && dian_index[1] == index2 }" :width="icon_w + 'px'" :height="icon_w + 'px'" :src="'/static/ff/f'+item2+'.webp'" radius="5" :fade-show="false" @click="dian(index1, index2)"></u--image>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
icon_w: 50,
list_show: [[5,11,0,12],[15,10,14,9],[7,8,16,6],[14,1,2,4]],
dian_index: [-1, -1]
}
},
methods: {
dian(i, j) {
Vue.set(this.dian_index, 0, i)
Vue.set(this.dian_index, 1, j)
}
}
}
</script>
<style>
.main {
padding: 20px;
}
.item {
border-radius: 10rpx;
margin: 10rpx;
}
.click {
margin: 9rpx;
border-color: #FF0000;
border-width: 2px;
border-style: solid;
}
</style>
wzyoucai (作者)
https://uniapp.dcloud.net.cn/tutorial/nvue-css.html
看了，是支持border样式的呀
并且我的示例代码里有例子，静态的是支持的，动态的有bug而已。
2023-07-11 16:19