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 自动绑定到调用它的实例上。
新闻热点
疑难解答
