You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
130 lines
3.0 KiB
Vue
130 lines
3.0 KiB
Vue
/**
|
|
* @Description: 颜色选择器
|
|
* @author liu.shiyi
|
|
* @date 2023/3/31 10:31
|
|
*/
|
|
<template>
|
|
<el-select
|
|
ref="colorSelect"
|
|
v-model="myColor"
|
|
value-key="value"
|
|
class="bs-el-select select"
|
|
popper-class="bs-el-select"
|
|
placeholder=""
|
|
style="width: 100%"
|
|
@change="handleChange"
|
|
>
|
|
<el-option
|
|
v-for="(item, index) in colorList"
|
|
:key="index"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
>
|
|
<span style="float: left">{{ item.label }}</span>
|
|
<span style="float: right">
|
|
<span
|
|
v-for="(co, ind) in JSON.parse(item.value)"
|
|
:key="ind"
|
|
>
|
|
<span :style="'float: left ;background-color:' + co + ';width:10px;border-radius:1px;display:inline-block;height:15px;margin-top:9px;'" />
|
|
<span style="float: left"> </span>
|
|
</span>
|
|
</span>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ColorSelect',
|
|
model: {
|
|
prop: 'color',
|
|
event: 'update'
|
|
},
|
|
props: {
|
|
// 父组件绑定的值
|
|
color: {
|
|
type: Array,
|
|
default: undefined
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
colorList: [
|
|
{
|
|
label: '配色1',
|
|
value: JSON.stringify(['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'])
|
|
},
|
|
{
|
|
label: '配色2',
|
|
value: JSON.stringify(['#1DAEFF', '#25A979', '#D19C4C', '#654FEA', '#C957CB'])
|
|
},
|
|
{
|
|
label: '配色3',
|
|
value: JSON.stringify(['#1DAEFF', '#15BCE0', '#1FD7CC', '#43D4A0', '#25A979'])
|
|
}
|
|
],
|
|
colorValue: []
|
|
// myColor: undefined
|
|
}
|
|
},
|
|
watch: {
|
|
color: function (val) {
|
|
this.init(val)
|
|
}
|
|
},
|
|
computed: {
|
|
myColor: {
|
|
get () {
|
|
return JSON.stringify(this.color) || JSON.stringify(['#6b74e4', '#4391f4', '#38bbe5', '#69d6fd', '#36c6a0'])
|
|
},
|
|
set (val) {
|
|
|
|
}
|
|
|
|
}
|
|
},
|
|
created () {
|
|
},
|
|
mounted () {
|
|
this.init(this.color)
|
|
},
|
|
methods: {
|
|
// 初始化colorList,当绑定的颜色跟预设的颜色不一致时
|
|
init (color) {
|
|
// ,当绑定的颜色跟预设的颜色是否一致
|
|
const flag = this.colorList.some(co => co.value === JSON.stringify(color))
|
|
// colorList是否存在自定义选项
|
|
const f = this.colorList.some(co => co.label === '自定义')
|
|
if (!flag) {
|
|
if (f) {
|
|
this.colorList = this.colorList.map(co => {
|
|
if (co.label === '自定义') {
|
|
return {
|
|
label: '自定义',
|
|
value: JSON.stringify(color)
|
|
}
|
|
} else {
|
|
return co
|
|
}
|
|
})
|
|
} else {
|
|
this.colorList.push({
|
|
label: '自定义',
|
|
value: JSON.stringify(color)
|
|
})
|
|
}
|
|
}
|
|
},
|
|
handleChange (val) {
|
|
const colors = JSON.parse(val)
|
|
// 触发update事件更新父组件绑定值
|
|
this.$emit('update', colors)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|