vuejs+element中使用minicolor颜色插件

vuejs+element开发中使用颜色选择器没有什么好方法,经过一番研究决定使用jquery的minicolor颜色插件。
效果图:
vuejs+element中使用minicolor颜色插件_第1张图片
点击输入框就会出来颜色选择窗口,同时复制到输入框#16进制颜色,右侧也会出颜色
vuejs+element中使用minicolor颜色插件_第2张图片

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中初始化并返回:
vuejs+element中使用minicolor颜色插件_第3张图片

如果输入框在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 自动绑定到调用它的实例上。

你可能感兴趣的:(【前端开发】)