<script lang="ts" setup>
|
import { ref } from 'vue';
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps(['activeData']);
|
const colorFormatOptions = [
|
{ id: 'hex', fullName: 'hex' },
|
{ id: 'rgb', fullName: 'rgb' },
|
{ id: 'rgba', fullName: 'rgba' },
|
{ id: 'hsv', fullName: 'hsv' },
|
{ id: 'hsl', fullName: 'hsl' },
|
];
|
const renderKey = ref(Date.now());
|
|
function onColorFormatChange(val) {
|
props.activeData.__config__.defaultValue = null;
|
props.activeData.showAlpha = val && val.includes('a');
|
props.activeData.__config__.renderKey = Date.now();
|
renderKey.value = Date.now();
|
}
|
</script>
|
<template>
|
<a-form-item label="默认值">
|
<jnpf-color-picker
|
v-model:value="activeData.__config__.defaultValue"
|
:color-format="activeData.colorFormat"
|
:key="renderKey"
|
:show-alpha="activeData.showAlpha" />
|
</a-form-item>
|
<a-form-item label="颜色格式">
|
<jnpf-select v-model:value="activeData.colorFormat" placeholder="请选择" allow-clear :options="colorFormatOptions" @change="onColorFormatChange" />
|
</a-form-item>
|
</template>
|
