Vue 自定义ColorPicker及使用方法
作者：天天向上1024
这篇文章主要介绍了Vue 自定义ColorPicker及使用方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 自定义ColorPicker
创建自定义组件ColorPicker.vue
<template>
<div class="box">
<div class="picker-box">
<div class="color" :style="{ background: color }"></div>
<div class="el-icon-arrow-down"></div>
</div>
<el-color-picker
v-model="color"
show-alpha
class="elcolorpicker"
@change="colorChange"
></el-color-picker>
</div>
</template>
<script>
export default {
model: {
prop: "myColor",
event: "change",
},
props: {
myColor: [String, Number],
},
data() {
return {
color: "#000",
};
},
watch: {
myColor: {
handler(newVal, oldVal) {
this.color = newVal || "#000000";
},
},
},
mounted() {
this.color = this.myColor || "#000000";
},
methods: {
colorChange(color) {
this.color = color;
this.$emit("change", color);
},
},
};
</script>
<style lang="less" scoped>
.box {
position: relative;
}
.picker-box {
width: 84px;
height: 23px;
background: #fff;
border-radius: 4px;
border: 1px solid #dcdfe6;
padding: 0 10px;
display: flex;
justify-content: space-between;
align-items: center;
.color {
width: 13px;
height: 13px;
box-shadow: inset 0 0 0 0.013333rem rgba(0, 0, 0, 0.15);
}
}
.elcolorpicker {
position: absolute;
opacity: 0;
left: 0;
top: 0;
}
/deep/.el-color-picker {
height: 100%;
width: 100%;
}
/deep/.el-color-picker__trigger {
width: 100%;
height: 100%;
border: 0px solid #e6e6e6;
border-radius: 4px;
}
</style>使用
导入,挂载步骤省略
<ColorPicker v-model="titleColor" @change="handleChange" />
到此这篇关于Vue 自定义ColorPicker的文章就介绍到这了,更多相关Vue 自定义ColorPicker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！