<template>
<color-picker @change="change" :value="color"></color-picker>
</template>
<script setup>
import { ref } from 'vue';
const color = ref("#ffffff");
const colorRgba = ref("#eeeeee")
const change = (e) => {
console.log(e)
colorRgba.value = e.rgba
}
</script>
<style>
</style>
<template>
<color-picker @change="change" :value="color"></color-picker>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const color = ref("#ffffff");
const colorRgba = ref("#eeeeee")
const change = (e) => {
console.log(e)
colorRgba.value = e.rgba
}
</script>
<style>
</style>
const standardClolor = [
'#c21401',
'#ff1e02',
'#ffc12a',
'#ffff3a',
'#90cf5b',
'#00af57',
'#00afee',
'#0071be',
'#00215f',
'#72349d',
]
const themeClolor =[
'#000000',
'#ffffff',
'#eeece1',
'#1e497b',
'#4e81bb',
'#e2534d',
'#9aba60',
'#8165a0',
'#47acc5',
'#f9974c',
]
<template>
<color-picker
:value="color"
@change="change"
:standard-color="bColor"
@close="close"
@finish="finish"
></color-picker>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
name: ''
})
</script>
<script lang="ts" setup>
const color = ref("")
const colorValue = ref({})
// 颜色值改变
const change = (e) => {
// console.log("e", e)
colorValue.value = e
}
// 颜色面板关闭
const close = (e) => {
console.log("关闭了", e)
}
const finish = (e) => {
console.log("点击完成", e)
}
const bColor = [
'#c21401',
'#ff1e02',
'#ffc12a',
'#ffff3a',
'#90cf5b',
'#00af57',
'#00afee',
'#0071be',
'#00215f',
'#72349d',
]
</script>
<style lang="less" scoped>
</style>