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