1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <script lang="ts" setup>
| import { useVModels } from '@vueuse/core';
| import { Input } from 'ant-design-vue';
|
| /** 带颜色选择器输入框 */
| defineOptions({ name: 'InputWithColor' });
|
| const props = defineProps({
| modelValue: {
| type: String,
| default: '',
| },
| color: {
| type: String,
| default: '',
| },
| });
|
| const emit = defineEmits(['update:modelValue', 'update:color']);
|
| const { modelValue, color } = useVModels(props, emit);
| </script>
|
| <template>
| <div class="flex gap-2">
| <Input v-model:value="modelValue" v-bind="$attrs" class="flex-1" />
| <input
| v-model="color"
| type="color"
| class="h-8 w-10 cursor-pointer rounded border border-gray-300"
| />
| </div>
| </template>
|
| <style scoped lang="scss">
| input[type='color'] {
| &::-webkit-color-swatch-wrapper {
| padding: 2px;
| }
|
| &::-webkit-color-swatch {
| border: none;
| border-radius: 2px;
| }
| }
| </style>
|
|
