需求簡述：需要一個取色面板，由于element組件里面的事一個取色按鈕，點擊了才出現懸浮的取色面板，所以需要想想辦法

效果圖 如下：

起先思路：想用elementUi里面的取色按鈕改造下 或是 js代碼點擊下按鈕然后修樣式，都嘗試了下，最后還是不可行；

百度找了下也沒找到類似的，類似的有都是JQ寫的，最后上github 找到了一個資源用上了

資源地址： vue-color

安裝依賴：

"vue-color": "^2.8.1",

安裝注冊插件：
拉了他的項目運行看了下，我需要用的是它的 chrome-picker 組件

import { Chrome } from 'vue-color' // 取色板資源 // Vue.component('photoshop-picker', Photoshop) // 取色板插件 // Vue.component('material-picker', material) // 取色板插件 // Vue.component('compact-picker', compact) // 取色板插件 // Vue.component('swatches-picker', swatches) // 取色板插件 // Vue.component('slider-picker', slider) // 取色板插件 // Vue.component('sketch-picker', sketch) // 取色板插件 Vue.component('chrome-picker', Chrome) // 取色板插件 上面幾個也都可用

組件封裝：

<!--* @Author: chengsl* @Date: 2021-11-29 15:57:14* @LastEditors: chengsl* @LastEditTime: 2021-12-06 14:56:46* @Description: 取色面板 --> <template><div class="vue-color-picker"><chrome-picker :value="localThemeColor" :disable-alpha="true" :disable-fields="true" @input="updateValue" /></div> </template><script> /*** 需求背景： 需要一個取色面板，常規的是點擊按鈕后 才會懸浮顯示一個取色面板 并且點其他地方面板就會消失，因此需要改造* 實現方式： 選擇插件 npm install vue-color* 以下是該插件可用的組件'material-picker': material,'compact-picker': compact,'swatches-picker': swatches,'slider-picker': slider,'sketch-picker': sketch,'chrome-picker': chrome, props: disableAlpha, disableFields'photoshop-picker': photoshop*/ export default {name: 'VueColorPicker',components: {},props: {themeColor: {required: false,type: String,default: '#00ff00'}},data() {return {}},computed: {localThemeColor: {get() {return this.themeColor},set(val) {this.$emit('change-color', val)}}},watch: {},created() {},mounted() {},methods: {updateValue(val) {// console.log('updateValue,', val)this.$emit('change-color', val.hex)}} } </script> <style lang='scss' scoped> .vue-color-picker {height: 220px;max-width: 380px;margin: 0 auto;>>> .vc-chrome {width: 100%;height: 100%;box-sizing: border-box;box-shadow: none;padding: 0 12px;.vc-chrome-saturation-wrap {height: 180px;padding: 0;}.vc-chrome-body {box-sizing: border-box;padding: 12px 16px 12px;height: 40px;}} } </style>

組件調用：

<color-picker :theme-color.sync="data.themeColor.scConfigValue" @change-color="changeColorByPicker" />

補充：

// 10進制 => 16進制 parseInt(156, 10).toString(16) // '9c'// 16進制 => 10進制 parseInt('ef', 16) // 239

結語： 感謝UI出騷圖讓我又成長了一丟丟

總結

以上是生活随笔為你收集整理的vue 取色面板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。