vuejs+element中使用minicolor颜色插件

vuejs+element开发中使用颜色选择器没有什么好方法，经过一番研究决定使用jquery的minicolor颜色插件。
效果图：

点击输入框就会出来颜色选择窗口，同时复制到输入框#16进制颜色，右侧也会出颜色

html代码：

<el-form-item label="色调" class="is_required" prop="color">
        <input type='text' id="setTagColor" class="el-input__inner form-control demo input_color" v-model="tag.color" data-control="hue" @focus="showColor" />
</el-form-item>

js代码：

showColor: function () {
      var vm = this;
      jQuery('#setTagColor').minicolors({
        control: 'hue',
        defaultValue: this.tag.color,
        position: 'bottom right',
        theme: 'bootstrap',
        change: function (value) {
          vm.tag.color = value;
          if (!value) return;
        }
      });
    }

还要在实例挂载时调用，模拟在head中加载js代码的行为：

  mounted: function () {
    if (this.isEdit) {
      this.loadTag({id: this.id});
    }
    else {
      this.showColor();
    }
  },
  methods: {
    loadTag: function (params) {
      this.$resource(Config.TAG_SERVICE_URL)
        .get(params)
        .then(function (response) {
          this.tag = response.data;
          this.showColor();
        });
    },
    ……
 }

其中tag在模块定义时在data中初始化并返回：

如果输入框在elementUI的dialog对话框中还需要注意首次调用showColor的时间节点：

<el-form-item label="我的标签" label-width="65px">
         <a class="cursor-p" @click="show">
         <i class="fa fa-plus" aria-hidden="true">i><span>新建标签span>
          a>
el-form-item>

show:function () {
      this.dialogTags = true;
      this.$nextTick(function () {
        this.showColor();
      })
    },

其中vm.$nextTick将回调延迟到下次 DOM 更新循环之后执行。即等待dialog打开后并且 DOM 渲染完成后调用。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。