whiteboard/components/ColorPicker.vue

133 lines
2.5 KiB
Vue

<template>
<div class="colorPickerContainer">
<div class="content">
<el-popover
:placement="placement"
:width="200"
trigger="click"
:disabled="colorList.length <= 0"
>
<template #reference>
<div class="colorPreview" :style="{ backgroundColor: color }"></div>
</template>
<div class="colorList">
<div
class="colorItem"
v-for="item in colorList"
:key="item"
:style="{ backgroundColor: item }"
@click="color = item"
>
<span v-if="!item">无</span>
<span v-if="item === 'transparent'">透明</span>
</div>
</div>
</el-popover>
<el-input v-model="color">
<template #prepend>{{ name }}</template>
</el-input>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import {
strokeColorList,
fillColorList,
backgroundColorList
} from '../constants'
const props = defineProps({
value: {
type: String,
default: ''
},
type: {
type: String,
default: ''
},
name: {
type: String,
default: '颜色'
},
placement: {
type: String,
default: 'bottom'
},
showEmptySelect: {
type: Boolean,
default: false
}
})
const emits = defineEmits(['change'])
const color = ref(props.value)
watch(
() => {
return props.value
},
val => {
color.value = val
}
)
const colorList = computed(() => {
let list = props.showEmptySelect ? [''] : []
switch (props.type) {
case 'stroke':
list.push(...strokeColorList)
break
case 'fill':
list.push(...fillColorList)
break
case 'background':
list.push(...backgroundColorList)
break
default:
}
return list
})
watch(color, () => {
emits('change', color.value)
})
</script>
<style lang="less" scoped>
.colorPickerContainer {
.content {
display: flex;
align-items: center;
.colorPreview {
width: 30px;
height: 30px;
border: 1px solid #dee2e6;
border-radius: 5px;
flex-shrink: 0;
margin-right: 10px;
overflow: hidden;
cursor: pointer;
}
}
}
.colorList {
display: grid;
grid-template-columns: repeat(5, auto);
grid-gap: 5px;
.colorItem {
width: 30px;
height: 30px;
cursor: pointer;
border-radius: 4px;
border: 1px solid #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
color: #909399;
}
}
</style>