基础用法

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>