自定义颜色选择功能

你真的可爱呀2026-01-07 10:53

开箱即用

1.效果：

2.代码

复制代码

<template>
	<div class="snowy-color-picker" @click="forceResize">
		<color-picker v-bind="$attrs" format="hex" :pureColor="props.value" @update:pureColor="update" />
	</div>
</template>

<script setup>
	import { ColorPicker } from 'vue3-colorpicker'
	import 'vue3-colorpicker/style.css'

	const emit = defineEmits(['update:value'])

	const props = defineProps({
		value: {
			type: String,
			default: '#1677FF'
		}
	})

	const forceResize = () => {
		window.dispatchEvent(new Event('resize'))
	}

	const update = (val) => {
		showTxt(val)
		emit('update:value', val)
	}
	onMounted(() => {
		showTxt(props.value)
	})
	const showTxt = (val) => {
		const currentColor = document.querySelector('.current-color')
		if (currentColor) {
			currentColor.textContent = val
		}
	}
</script>

<style lang="less">
	.snowy-color-picker {
		.vc-color-wrap {
			width: auto;
		}
		.current-color {
			color: #fff;
			padding: 0 10px;
		}
	}
</style>

使用：

复制代码

<color-picker v-model:value="formData.color" />