Color颜色选择器

基础用法

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '颜色选择器',
            prop: 'color',
            type: 'color'
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

默认值

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

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '颜色选择器',
            prop: 'color',
            type: 'color',
            value: 'rgba(71, 46, 46, 1)'
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

禁用状态

通过disabled属性指定是否禁用

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '颜色选择器',
            prop: 'color',
            type: 'color',
            disabled: true
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

颜色格式

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '颜色选择器',
            prop: 'color',
            type: 'color',
            colorFormat: "hex",
            showAlpha: false
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码

预定义颜色

<template>
  <avue-form :option="option"></avue-form>
</template>
<script>
export default {
  data () {
    return {
      option: {
        column: [
          {
            label: '颜色选择器',
            prop: 'color',
            type: 'color',
            predefine: [
              '#ff4500',
              '#ff8c00',
              '#ffd700'
            ]
          }
        ]
      }
    }
  }
}
</script>

显示代码复制代码复制代码