介绍

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

引入

import ColorPickerPopout from 'sard-uniapp/components/color-picker-popout/color-picker-popout.vue'

代码演示

基础使用

vue lang="ts"

<template>
  <sar-color-picker-popout
    v-model:visible="visible"
    v-model="color"
    title="选择颜色"
    show-alpha
    show-format
    show-presets
  />

  <sar-list card>
    <sar-list-item>
      <sar-button theme="primary" @click="visible = true">
        打开颜色选择器
      </sar-button>
    </sar-list-item>
    <sar-list-item>当前颜色：{{ color }}</sar-list-item>
    <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 visible = ref(false)
const color = ref('')
</script>

vue lang="js"

<template>
  <sar-color-picker-popout
    v-model:visible="visible"
    v-model="color"
    title="选择颜色"
    show-alpha
    show-format
    show-presets
  />

  <sar-list card>
    <sar-list-item>
      <sar-button theme="primary" @click="visible = true">
        打开颜色选择器
      </sar-button>
    </sar-list-item>
    <sar-list-item>当前颜色：{{ color }}</sar-list-item>
    <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 visible = ref(false);
const color = ref("");
</script>

API

ColorPickerPopoutProps

继承 ColorPickerProps 并有以下额外属性：

属性	描述	类型	默认值
popout-class	弹窗框根元素类名	string	-
popout-style	弹窗框根元素样式	StyleValue	-
visible (v-model)	是否显示弹出框	boolean	-
title	弹出框标题	string	-
validate-event	是否触发表单验证	boolean	true
resettable	关闭弹出框后，是否可复位弹出框值	boolean	false

ColorPickerPopoutEmits

事件	描述	类型
update:visible	弹出层显隐变化时触发	(visible: boolean) => void
update:model-value	确认选择后触发	(value: string) => void
change	确认选择后触发	(value: string) => void
confirm	点击确认按钮时触发	() => void