Color颜色选择器
约 138 字小于 1 分钟
2025-02-06
基础用法
vue2
vue3
通过将`type`属性的值指定为`color`
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color'
}
]
});
</script>默认值
vue2
vue3
`value`属性可以提供一个初始化的默认值
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
value: 'rgba(71, 46, 46, 1)'
}
]
});
</script>禁用状态
vue2
vue3
通过`disabled`属性指定是否禁用
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
disabled: true
}
]
});
</script>颜色格式
vue2
vue3
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
colorFormat: 'hex',
showAlpha: false
}
]
});
</script>预定义颜色
vue2
vue3
<template>
<tvue-form :option="option"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const option = ref({
column: [
{
label: '颜色选择器',
prop: 'color',
type: 'color',
predefine: [
'#ff4500',
'#ff8c00',
'#ffd700'
]
}
]
});
</script>