实现一个自定义指令v-highlight并添加颜色选择框

在Vue.js中，你可以创建一个自定义指令`v-highlight`来实现高亮文本的功能，并结合HTML5的input元素提供颜色选择功能。首先，你需要定义一个自定义指令，然后创建一个组件来处理颜色选择。

**1. 定义自定义指令：**

// directives.js 或者 main.js 中
Vue.directive('v-highlight', {
  bind: function (el, binding, vnode) {
    el.addEventListener('click', function () {
      const colorInput = document.createElement('input');
      colorInput.type = 'color';
      colorInput.value = vnode.context.color; // 初始化为当前应用的颜色

      colorInput.addEventListener('change', function (e) {
        vnode.context.highlightColor = e.target.value;
      });

      document.body.appendChild(colorInput); // 将颜色选择框添加到文档中
    });
  },
  update: function (el, binding, vnode) {
    if (vnode.context.highlightColor) {
      el.style.backgroundColor = vnode.context.highlightColor;
    }
  },
  unbind: function (el, binding, vnode) {
    el.removeEventListener('click', arguments.callee);
    document.body.removeChild(document.querySelector('input[type="color"]'));
  }
});

**2. 使用自定义指令：**

<template>
  <div v-bind:class="{ highlighted: highlightColor }" @click="toggleHighlight">
    我要被高亮的文字，点击选择颜色：
    <span v-highlight v-model="highlightColor">这里是内容</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      highlightColor: '', // 默认颜色为空
    };
  },
  methods: {
    toggleHighlight() {
      this.highlightColor ? this.highlightColor = '' : this.highlightColor = 'yellow'; // 示例中的黄色，可以根据需求修改
    },
  },
};
</script>

**相关问题--:**
1. 如何在Vue组件模板中绑定这个`v-highlight`指令？
2. 如何传递初始颜色给`v-highlight`指令？
3. 如果我想让用户手动输入颜色代码，而不是通过颜色选择框，应该如何修改？