| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <el-input v-model="valueRef" v-bind="$attrs"> |
| 3 | <template #append> | |
| 4 | <el-color-picker v-model="colorRef" :predefine="PREDEFINE_COLORS" /> | |
| 5 | </template> | |
| 6 | </el-input> | |
| 7 | </template> | |
| 8 | ||
| 9 | <script lang="ts" setup> | |
| 10 | import { propTypes } from '@/utils/propTypes' | |
| 11 | import { PREDEFINE_COLORS } from '@/utils/color' | |
| 12 | ||
| 13 | /** | |
| 14 | * 带颜色选择器输入框 | |
| 15 | */ | |
| 16 | defineOptions({ name: 'InputWithColor' }) | |
| 17 | ||
| 18 | const props = defineProps({ | |
| 19 | modelValue: propTypes.string.def('').isRequired, | |
| 20 | color: propTypes.string.def('').isRequired | |
| 21 | }) | |
| 22 | ||
| 23 | watch( | |
| 24 | () => props.modelValue, | |
| 25 | (val: string) => { | |
| 26 | if (val === unref(valueRef)) return | |
| 27 | valueRef.value = val | |
| 28 | } | |
| 29 | ) | |
| 30 | ||
| 31 | const emit = defineEmits(['update:modelValue', 'update:color']) | |
| 32 | ||
| 33 | // 输入框的值 | |
| 34 | const valueRef = ref(props.modelValue) | |
| 35 | watch( | |
| 36 | () => valueRef.value, | |
| 37 | (val: string) => { | |
| 38 | emit('update:modelValue', val) | |
| 39 | } | |
| 40 | ) | |
| 41 | // 颜色 | |
| 42 | const colorRef = ref(props.color) | |
| 43 | watch( | |
| 44 | () => colorRef.value, | |
| 45 | (val: string) => { | |
| 46 | emit('update:color', val) | |
| 47 | } | |
| 48 | ) | |
| 49 | </script> | |
| 50 | <style scoped lang="scss"> | |
| 51 | :deep(.el-input-group__append) { | |
| 52 | padding: 0; | |
| 53 | .el-color-picker__trigger { | |
| 54 | padding: 0; | |
| 55 | border-left: none; | |
| 56 | border-radius: 0 var(--el-input-border-radius) var(--el-input-border-radius) 0; | |
| 57 | } | |
| 58 | } | |
| 59 | </style> | |
