el-tooltip 怎么用自定义指令实现

要使用自定义指令实现 el-tooltip，可以按照以下步骤进行：

1. 创建自定义指令

在 Vue 中，可以使用 `Vue.directive` 方法创建自定义指令。我们需要创建一个名为 `my-tooltip` 的指令，并在其中实现 `bind` 和 `unbind` 钩子函数。

Vue.directive('my-tooltip', {
  bind: function (el, binding) {
    // 在绑定时添加 tooltip
    el.setAttribute('title', binding.value)
    el.classList.add('tooltip')
  },
  unbind: function (el) {
    // 在解除绑定时移除 tooltip
    el.removeAttribute('title')
    el.classList.remove('tooltip')
  }
})

2. 使用自定义指令

现在我们可以在需要添加 el-tooltip 的元素上使用 `v-my-tooltip` 指令，其中指令的值为 tooltip 的内容。

<div v-my-tooltip="'这是一个自定义 tooltip'">hover 这里</div>

3. 样式处理

为了使 tooltip 生效并显示在正确的位置，还需要添加一些 CSS 样式。以下是一个简单的示例：

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip:after {
  content: attr(title);
  position: absolute;
  left: 100%;
  top: 50%;
  padding: 0.5em;
  background: #333;
  color: #fff;
  white-space: nowrap;
  transform: translate(0, -50%);
}

这样，我们就完成了使用自定义指令实现 el-tooltip 的过程。