介绍
组合了颜色选择器、弹出框、输入框组件,实现了便捷快速的颜色选择功能。
引入
ts
import ColorPickerInput from 'sard-uniapp/components/color-picker-input/color-picker-input.vue'代码演示
基础使用
vue
<template>
<sar-list card>
<sar-list-item>
<sar-color-picker-input
v-model="color"
title="选择颜色"
placeholder="请选择颜色"
show-alpha
show-format
show-presets
clearable
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(color) ?? 'undefined'"
/>
<sar-list-item
title="设置为:"
value="rgb(226, 20, 20)"
hover
arrow
@click="color = 'rgb(226, 20, 20)'"
/>
<sar-list-item title="清空" arrow hover @click="color = ''" />
</sar-list>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const color = ref('rgba(25, 137, 250, 0.8)')
</script>vue
<template>
<sar-list card>
<sar-list-item>
<sar-color-picker-input
v-model="color"
title="选择颜色"
placeholder="请选择颜色"
show-alpha
show-format
show-presets
clearable
/>
</sar-list-item>
<sar-list-item
title="当前值:"
:value="JSON.stringify(color) ?? 'undefined'"
/>
<sar-list-item
title="设置为:"
value="rgb(226, 20, 20)"
hover
arrow
@click="color = 'rgb(226, 20, 20)'"
/>
<sar-list-item title="清空" arrow hover @click="color = ''" />
</sar-list>
</template>
<script setup lang="js">
import { ref } from "vue";
const color = ref("rgba(25, 137, 250, 0.8)");
</script>API
ColorPickerInputProps
继承 ColorPickerPopoutProps 并有以下额外属性:
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 弹出式输入框根元素类名 | string | - |
| root-style | 弹出式输入框根元素样式 | StyleValue | - |
| disabled | 禁用状态 | boolean | false |
| readonly | 只读状态 | boolean | false |
| clearable | 是否显示清空按钮 | boolean | false |
| placeholder | 输入框占位符内容 | string | - |
| value-on-clear | 设置点击清除按钮后的值 | () => any | () => undefined |
| arrow | 自定义箭头图标名 | string | 'caret-right' |
| arrow-family | 自定义箭头图标字体 | string | 'sari' |
| input-props | 自定义输入框组件属性 | InputProps | - |
ColorPickerInputEmits
| 事件 | 描述 | 类型 |
|---|---|---|
| update:model-value | 颜色值变化时触发 | (value: string) => void |
| change | 颜色值变化时触发 | (value: string) => void |
| update:visible | 弹出层显隐变化时触发 | (visible: boolean) => void |
| confirm | 点击确认按钮时触发 | () => void |