【Vue】鼠标悬浮卡片展示可点击按钮

重生之搬砖忍者

于 2024-04-01 10:16:27 发布

阅读量540

点赞数 1

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_54847700/article/details/137222404

版权

<div @mouseenter="handleMouseEnter(index)" @mouseleave="handleMouseLeave(index)"
class="grid-item" v-for="(item, index) in segmentsList.data" :key="item.id">
    <el-card shadow="hover" class="w-full h-full card">
        <div class="flex justify-between items-center mb-2">
            <div class="w-10 text-center border bg-gray-50 border-gray-100 text-gray-500 px-2 rounded-md text-sm">
                #{{ index + 1 }}
            </div>
        </div>
        <div class="flex items-center">{{ item.content }}</div>
        <div class="create-text items-center flex justify-end text-gray-200" v-if="hoverItem[index]">
            <div class="el-icon-document mr-2 text-sm">{{ item.content.length }}字符</div>
            <el-button v-if="hoverItem[index]" @click.stop="handleDelete(item.id)" size="mini"><i class="el-icon-delete"></i></el-button>
        </div>
    </el-card>
</div>

handleMouseEnter(index) {
    this.$set(this.hoverItem, index, true);
},
handleMouseLeave(index) {
    this.$set(this.hoverItem, index, false);
},

data(){
    return {
        hoverItem:[]
    }
}

 created() {
        if (this.segmentsList.data) {
            //将 this.hoverItem 数组初始化为与 this.segmentsList.data 数组长度相同，并将其所有元素都设置为 false
            this.hoverItem = new Array(this.segmentsList.data.length).fill(false);
        }
    },