SColorPicker <s-color-picker>

用于选择颜色的可视化控件。 SColorPicker 是 Shopify Polaris <s-color-picker> web component 的带类型 Vue 3 wrapper。

import { SColorPicker } from 'polaris-vue-elements'

最佳实践

• 从当前颜色开始。 当商家编辑现有颜色时，将 value 设为该颜色，让他们心中有数，并能看到自己正在修改的原始值。
• 在实际场景中预览颜色。 尽可能在取色器旁边展示所选颜色应用到受影响元素（例如按钮）上的效果。
• 搭配 SColorField 输入精确值。 取色器适合直观地挑选颜色，而颜色字段可以让商家输入精确的十六进制值。

参阅 Shopify 关于 <s-color-picker> 的最佳实践（英文）以获取完整指南。

示例

Value: #008060

<script setup>
import { ref } from 'vue'
import { SColorPicker } from 'polaris-vue-elements'

const value = ref('#008060')
</script>

<template>
  <SColorPicker v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

<SColorPicker> 上的 v-model 绑定到 value property，并监听 input DOM 事件。

<SColorPicker v-model="value" />

等价于：

<SColorPicker :value="value" @input="value = $event.target.value" />

Props

Prop	类型	说明
alpha	boolean	是否在颜色选择器中启用 alpha（透明度）通道选择，允许用户选择半透明颜色。
defaultValue	string	字段首次加载时的初始颜色值。与 placeholder 不同，这是一个真实的值，用户可以编辑并会随表单一起提交。一旦用户开始交互，其输入就会替换该值。在字段加载后更改此属性不会产生任何效果。如需随时更新字段值，请改用 value。
id	string	元素的唯一标识符。
name	string	字段的标识符，在最近的外层表单内唯一。
value	string	当前选中的颜色值。接受多种输入格式： - Hex：#RGB、#RRGGBB、#RRGGBBAA（3、6 或 8 位） - RGB/RGBA：rgb(255, 0, 0) 或 rgb(255 0 0)（以逗号或空格分隔） - HSL/HSLA：hsl(0, 100%, 50%) 或 hsl(0 100% 50%) 如果值无效，则返回空字符串。change 事件始终以 hex 格式发出值。

Events

Event	类型
change	Event
input	Event

在 <SColorPicker> 上使用 @change 形式的监听器来监听这些事件。