vue 取色面板

需求简述：需要一个取色面板，由于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出骚图让我又成长了一丢丢