【vue】vue组件之颜色选择器(基于element-ui)
vue组件之颜色选择器(基于element-ui)1. 代码(待优化,后面会改为双向绑定)2. 引用3. 示例ps:需要引入element-ui1. 代码(待优化,后面会改为双向绑定)<template><div class="public-input-color-picker"><el-input v-model="value2" :placeholder="pla
·
vue组件之颜色选择器(基于element-ui)
ps:需要引入element-ui
1. 代码(待优化,后面会改为双向绑定)
<template>
<div class="public-input-color-picker">
<el-input v-model="value2" :placeholder="placeholder" @input="_change"></el-input>
<el-color-picker
v-model="value2"
:show-alpha="showAlpha"
:predefine="predefineColors"
@change="_change"
></el-color-picker>
</div>
</template>
<script>
/**
* 输入框颜色选择器
* ps:预定义颜色中,如果颜色不对,将无法选中
*
* @showAlpha 是否支持透明度 默认false
* @predefineColors 预定义颜色
* @value 默认颜色编码 示例:#ffffff
* @placeholder 输入框提示文字
*/
export default {
name: 'public-input-color-picker',
data() {
return {
value2: ''
}
},
props: {
showAlpha: { type: Boolean, default: false },
predefineColors: {
type: Array,
default: () => {
return [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'#FF0000'
]
}
},
value: { type: String, default: '' },
placeholder: { type: String, default: '请输入颜色编码' }
},
components: {},
computed: {},
created() {},
onload() {},
onShow() {},
watch: {
value: {
handler: function(newVal, oldVal) {
this.value2 = JSON.parse(JSON.stringify(newVal))
},
immediate: true,
deep: true
}
},
mounted() {},
methods: {
_change(val) {
this.$emit('change', val)
}
}
}
</script>
<style lang="less" scoped>
@box-width: 200px;
.public-input-color-picker {
// display: flex;
// -webkit-box-align: center;
// -webkit-align-items: center;
// align-items: center;
position: relative;
width: @box-width;
.el-input {
width: @box-width;
}
.el-color-picker {
position: absolute;
right: 0;
/deep/ .el-color-picker__trigger {
border: 0;
}
}
}
</style>
2. 引用
<public-input-color-picker
:value="form2.labelColor"
placeholder="请输入标签颜色"
@change="(val)=>{form2.labelColor=val,clearValidata()}"
/>
3. 示例
更多推荐
已为社区贡献17条内容
所有评论(0)