vue 列表数据有的数据表格会有图标，鼠标浮动到图标上会出现隐藏的div

最新推荐文章于 2022-08-17 17:33:45 发布

热忱学习

最新推荐文章于 2022-08-17 17:33:45 发布

阅读量926

点赞数

分类专栏： vue 前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42180156/article/details/105770895

版权

本文介绍了一个使用Vue.js解决的业务需求：当鼠标悬浮在列表数据的图标上时，下方会显示一行隐藏的详细信息。通过在子组件中触发事件并传递索引值，以及在父组件中利用v-show控制显示状态，成功实现了这一功能。

摘要由CSDN通过智能技术生成

如图所示，业务需求就是浮动到感叹号上下面会出现一行字。

代码

在子组件中的代码

 <img src="@/assets/images/hr/hover.png" v-if="contract.contract_status=='INIT'" alt=""
                  @mouseover="hoverIcon(contractindex)" @mouseleave="hoverIconout(contractindex)">

<div class="hoverfont" v-show="contract.isHover">您需要支付预定商品的20%作为预交款</div>

    hoverIcon(inx) {
      // this.hovericonFlag = true;
      // console.log(this.tableData[inx]['isHover'], '2232');
      // this.$parent.tableData[inx]['isHover'] = true
      this.$emit("hovers", { inx: inx, is: true });
      this.$forceUpdate();
    },