给循环的图片移入时添加操作

给循环的图片移入时添加操作

1.循环出来的图片

<div class="upload" v-show="allAdd">
      <div class="uploadAdd">
        <i class="el-icon-plus" @click="handleAdd"></i>
      </div>
      <ul>
        <li
          v-for="(item, index) in ModelImg"
          :key="index"
          @mouseenter="handleShow(index)"
          @mouseleave="handleHide(index)"
        >
          <img :src="item.img" alt="" />
          /* 每个图片都要这三个图标*/
          <div id="operate" v-show="show && index == cur">
            <i class="el-icon-location-information"></i>
            <i class="el-icon-edit-outline"></i>
            <i class="el-icon-delete"></i>
          </div>
        </li>
      </ul>
    </div>

<script>
export default {
  data() {
    return {
      cur:-1,  //当前下表
      allAdd:true, //初始页面添加
      ModelImg:[
        {
          img:require('../../assets/img/5.jpg'),
        },
        {
          img:require('../../assets/img/1.jpg'),
        },
        {
          img:require('../../assets/img/1.jpg'),
        }
      ],   //存放图片
      show:false,  //展示每个图片的操作
    };
  },
  methods: {
    //移入图片显示相关操作
    handleShow(index){
       //记录当前下标
      this.cur = index
       this.show = true;
    },
    //移出隐藏
    handleHide(index){
       this.cur = index
       this.show = false;
    },

  },
};
</script>