介绍

组合了颜色选择器、弹出框、输入框组件，实现了便捷快速的颜色选择功能。

引入

import ColorPickerInput from 'sard-uniapp/components/color-picker-input/color-picker-input.vue'

代码演示

基础使用

vue lang="ts"

<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 lang="js"

<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