Color颜色选择器

基础用法

效果预览可直接操作下方示例

通过将type属性的值指定为color

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '颜色选择器',
      prop: 'color',
      type: 'color'
    }
  ]
});
</script>

默认值

效果预览可直接操作下方示例

value属性可以提供一个初始化的默认值

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '颜色选择器',
      prop: 'color',
      type: 'color',
      value: 'rgba(71, 46, 46, 1)'
    }
  ]
});
</script>

禁用状态

效果预览可直接操作下方示例

通过disabled属性指定是否禁用

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '颜色选择器',
      prop: 'color',
      type: 'color',
      disabled: true
    }
  ]
});
</script>

颜色格式

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '颜色选择器',
      prop: 'color',
      type: 'color',
      colorFormat: 'hex',
      showAlpha: false
    }
  ]
});
</script>

预定义颜色

效果预览可直接操作下方示例

正在加载示例…

<template>
  <avue-form :option="option"></avue-form>
</template>

<script setup>
import { ref } from 'vue';

const option = ref({
  column: [
    {
      label: '颜色选择器',
      prop: 'color',
      type: 'color',
      predefine: [
        '#ff4500',
        '#ff8c00',
        '#ffd700'
      ]
    }
  ]
});
</script>