实现动态的删除图标显示和隐藏

功能实现：鼠标没有移入框框时，只展示商品信息，鼠标移入时，框框右上角出现删除图标，实现删除功能
如图所示：

正常显示如上图，当鼠标移入商品框时，右上角出现删除图标，点击删除商品，如下图：
思路：就是给商品框榜单hover事件，
但是如何绑定hover事件呢？这就需要先注册hover事件。
注册在main.js文件中：

Vue.directive('hover', {
  bind(el,binding) {
    el.onmouseenter = function () {
      document.getElementById(binding.value).style.display = 'block'
    }
    el.onmouseleave = function () {
      document.getElementById(binding.value).style.display = 'none'
    }
  },
  componentUpdated(el,binding) {
    el.onmouseenter = function () {
      document.getElementById(binding.value).style.display = 'block'
    }
    el.onmouseleave = function () {
      document.getElementById(binding.value).style.display = 'none'
    }
  },
})

注册好了之后就可以在项目中使用啦，如：

   <div
          class="selection-shops"
          v-for="(item,index) of goodsList"
          :key="index"
          v-hover="`selection-${index}`"
        >
          <el-badge
            :value="`商品${index+1}`"
            style="display:inline"
          >
            <goods-wrapper
            />
          </el-badge>
          <i
            class="el-icon-circle-close"
            style="display: none;"
            :id="`selection-${index}`"
            @click="deleteItem(index)"
          />
        </div>

这个主要还是学习笔记，写的不好希望看到的各位多多包涵，嘿嘿