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.
118 lines
2.7 KiB
Vue
118 lines
2.7 KiB
Vue
/**
|
|
* @Description: 颜色选择器
|
|
* @author liu.shiyi
|
|
* @date 2023/3/31 10:31
|
|
*/
|
|
<template>
|
|
<el-select
|
|
ref="colorSelect"
|
|
v-model="myColor"
|
|
class="bs-el-select select"
|
|
popper-class="bs-el-select"
|
|
placeholder=""
|
|
style="width: 100%"
|
|
@change="handleChange"
|
|
>
|
|
<div slot="prefix">
|
|
<span style="float: left"> </span>
|
|
<span
|
|
v-for="(item, index) in colorValue"
|
|
:key="index"
|
|
>
|
|
<span
|
|
v-if="index <= 14"
|
|
:style="'float: left ;background-color:' + item + ';width:15px;border-radius:1px;display:inline-block;height:15px;margin-top:8px;'"
|
|
/>
|
|
<span
|
|
v-if="index <= 14"
|
|
style="float: left"
|
|
>
|
|
|
|
</span>
|
|
<span
|
|
v-if="index === 15"
|
|
style="float: left"
|
|
>
|
|
...
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<el-option
|
|
v-for="(item, index) in colorList"
|
|
:key="index"
|
|
label=" "
|
|
:value="item"
|
|
>
|
|
<span
|
|
v-for="(co, ind) in item"
|
|
:key="ind"
|
|
>
|
|
<span :style="'float: left ;background-color:' + co + ';width:15px;border-radius:1px;display:inline-block;height:15px;margin-top:9px;'" />
|
|
<span style="float: left"> </span>
|
|
</span>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ColorSelect',
|
|
model: {
|
|
prop: 'color',
|
|
event: 'update'
|
|
},
|
|
props: {
|
|
// 颜色数组
|
|
colorList: {
|
|
type: Array,
|
|
default: () => {
|
|
return [
|
|
['#5B8FF9', '#61DDAA', '#5D7092', '#F6BD16', '#6F5EF9', '#6DC8EC', '#945FB9', '#FF9845', '#1E9493', '#FF99C3'],
|
|
['#FF6B3B', '#626681', '#FFC100', '#9FB40F', '#76523B', '#DAD5B5', '#0E8E89', '#E19348', '#F383A2', '#247FEA'],
|
|
['#025DF4', '#DB6BCF', '#2498D1', '#BBBDE6', '#4045B2', '#21A97A', '#FF745A', '#007E99', '#FFA8A8', '#2391FF'],
|
|
['#FF4500', '#1AAF8B', '#406C85', '#F6BD16', '#B40F0F', '#2FB8FC', '#4435FF', '#FF5CA2', '#BBE800', '#FE8A26']
|
|
]
|
|
}
|
|
},
|
|
// 父组件绑定的值
|
|
color: {
|
|
type: Array,
|
|
default: undefined
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
colorValue: [],
|
|
myColor: undefined
|
|
}
|
|
},
|
|
watch: {
|
|
color: function (val) {
|
|
this.setSelectColor(val)
|
|
}
|
|
},
|
|
created () {
|
|
if (this.color) {
|
|
this.myColor = this.color
|
|
this.setSelectColor(this.color)
|
|
}
|
|
},
|
|
methods: {
|
|
// 设置颜色选择框中颜色
|
|
setSelectColor (color) {
|
|
this.$nextTick(() => {
|
|
this.colorValue = this.color
|
|
})
|
|
},
|
|
handleChange (val) {
|
|
this.setSelectColor(val)
|
|
// 触发update事件更新父组件绑定值
|
|
this.$emit('update', val)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
</style>
|