当鼠标移入div，出现编辑和删除的按钮，移出就隐藏编辑和删除按钮

最新推荐文章于 2024-04-29 14:41:33 发布

靓靓的圆子

最新推荐文章于 2024-04-29 14:41:33 发布

阅读量787

点赞数

分类专栏： js 原生div css样式问题文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45646663/article/details/128384207

版权

js 同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

css样式问题

23 篇文章 1 订阅

订阅专栏

原生div

1 篇文章 0 订阅

订阅专栏

1，用原生div的时候

<div v-for="(itemm,indexx) in item.SecondList" :key="indexx" style="" class="itemmCont33" 
                        @mouseenter="enterFun(itemm)" 
                        @mouseleave="leaveFun(itemm)">
      <span v-if="itemm.isEditShow">这个是编辑或删除的按钮</span>
</div>

// 鼠标移入
enterFun(activity){
   console.log('鼠标移入',activity);
     activity.isEditShow=true
     console.log(2999,this.PatientLevel.PatientLevelTargetList)
 },
 // 鼠标移出
 leaveFun(activity){
     console.log('鼠标移出',activity);
     activity.isEditShow=false
 },

2，当用的组件是el-element的时候不同的是要加.native才能生效

<el-timeline-item 
       v-for="(activity, index) in pInfo.PlanList" @mouseenter.native="enterFun(activity)" @mouseleave.native ="leaveFun(activity)"  :key="index">
       <span v-if="activity.isEditShow">这个是编辑或删除的按钮</span>
</el-timeline-item >

// 鼠标移入
enterFun(activity){
    console.log('鼠标移入',activity);
    activity.isEditShow=true
},
// 鼠标移出
leaveFun(activity){
  console.log('鼠标移出',activity);
  activity.isEditShow=false
},