vuejs+element開發中使用顏色選擇器沒有什么好方法，經過一番研究決定使用jquery的minicolor顏色插件。 效果圖： 
點擊輸入框就會出來顏色選擇窗口，同時復制到輸入框#16進制顏色，右側也會出顏色 
html代碼：
<el-form-item label="色調" class="is_required" 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 自動綁定到調用它的實例上。
新聞熱點
疑難解答
