vue实现鼠标移入列表式展示当前的列表项的图标

  <ul>
    <li v-for="(item, index) in 20" :key="index" v-on:mouseenter="showDialog(index)" v-on:mouseleave="hideDialog(index)" :accesskey="index" style="position: relative;width: 100px;height: 50px;">
      {{index}}
      <div class="handleDialog" v-if="ishow && index==current"></div>
    </li>
  </ul>

<script>
export default {
  name: 'index',
  data () {
    return {
      ishow: false,
      current: 0 // 当前操作按钮
    }
  },
  mounted () {
  },
  methods: {
    // 显示操作项
    showDialog (index, item) {
      this.ishow = true
      this.current = index
    },
    hideDialog (index, item) { // 隐藏蒙层
      this.ishow = false
      this.current = null
    }
  }
}
</script>

<style lang="scss" scoped>
.handleDialog {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
</style>