InputColor 颜色选择

avue-input-color：颜色字符串，例如 #409eff 或 rgba(64, 158, 255, 0.5)。

通用属性、字典与事件见 基础组件使用约定。模板属性可写为 kebab-case，Form 配置对象使用 camelCase。

基础用法

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

独立组件通过 v-model 绑定单个字段；在 Form 中使用时，将相应配置放入 column。

正在加载示例…

<template>
  <el-row :span="24">
    <el-col :span="6">
      值:{{ form }}<br />
      <avue-input-color placeholder="请选择颜色"
                        v-model="form"></avue-input-color>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      值:{{ form1 }}<br />
      <avue-input-color color-format="hex"
                        :show-alpha="false"
                        placeholder="请选择颜色"
                        v-model="form1"></avue-input-color>
    </el-col>
  </el-row>
</template>

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

const form = ref('rgba(255, 120, 0, 1)');
const form1 = ref('#AE4141');
</script>

属性

属性	类型	默认值	说明
colorFormat	string	—	颜色格式
showAlpha	boolean	true	透明度
predefineColors	array	内置颜色	预定义颜色列表
prefixIcon / suffixIcon	string	—	输入框图标

文本与面板共享绑定值；使用透明度时确认后端可保存透明通道。