vue swatches是一款基于vuejs2.x的颜色拾取组件。它允许用户在预定义的颜色之中进行选择。
vue swatches颜色拾取器的特点有：
- 预置色盘，包含少数用于文本编辑等常见场景的色盘。
- 内置弹窗，包括内置的弹窗和屏幕上的功能。
- 内联模式，自定义UI中显示色盘。
- 易于定制，可以使用Props和插槽自定义。
- 兼容SSR，可以在服务器端或静态生成的页面中使用。
- 无障碍支持
使用方法
安装
如果您想使用vue swatches颜色拾取组件，首先您需要安装它，命令如下：
npm install --save vue-swatches //or yarn add vue-swatches
使用
基本使用示例
<template>
<div>
<v-swatches v-model="color"></v-swatches>
</div>
</template>
import VSwatches from 'vue-swatches'
// Import the styles too, globally
import "vue-swatches/dist/vue-swatches.css"
export default {
components: { VSwatches }, // window['vue-swatches'] - from CDN
data () {
return {
color: '#1CA085'
}
}
}
配置参数 props
Model Props
- 'swatches'属性是一个数组或字符串，用于设置可供选择的颜色样本。每个样本必须是字符串或对象类型，并且应该使用6位十六进制颜色。如果使用字符串，可以使用预设颜色。如果使用数组，则可以使用自定义颜色。默认情况下，它设置为'basic'。
- 'value'属性设置所选颜色。它与v-model指令兼容。它应该是一个字符串，并且使用''表示透明/无颜色。默认情况下，它设置为null。
Behaviour Props
- 'popover-x'和'popover-y'属性用于更新弹出窗口的首选水平和垂直位置。默认情况下，左侧和顶部是首选位置。
- 'close-on-select'属性用于在选择颜色后隐藏弹出窗口。默认情况下，它设置为true。
- 'disabled'属性用于禁用颜色选择器。当使用内联模式时，所有样本都将被禁用。默认情况下，它设置为false。
- 'inline'属性用于控制样本是在弹出窗口中显示还是直接显示在组件中。如果设置为true，则样本将直接显示在组件中。如果设置为false，则样本将在单独的弹出窗口中显示。默认情况下，它设置为false。
- 'show-fallback'属性用于显示一个输入框，以便用户可以从那里更改颜色。默认情况下，它设置为false。
- 'show-labels'属性用于为每个样本显示标签。默认情况下，它设置为false。
Presentational Props
- 'background-color'属性用于设置组件包装器的背景颜色。默认情况下，它设置为'#ffffff'。
- 'max-height'属性用于设置内置弹出窗口的最大高度。默认情况下，它设置为300。它可以是数字或字符串类型，并且不需要在末尾添加px。
- 'shapes'属性用于设置样本和触发器使用的形状。可用的选项为圆形或正方形。默认情况下，它设置为'squares'。
- 'row-length'属性用于设置一行中要显示的样本数。这不影响内联模式。默认情况下，它设置为4。它可以是数字或字符串类型。
- 'show-border'属性用于控制样本是否显示边框。这对于使较浅的颜色更加明显很有用。默认情况下，它设置为false。
- 'show-checkbox'属性用于控制是否在选择样本时显示复选框。默认情况下，它设置为true。
- 'swatch-size'属性用于设置样本的大小。它可以是数字或字符串类型，并且不需要在末尾添加px。默认情况下，它设置为42。
- 'spacing-size'属性用于设置样本之间的间距。它必须是数字类型。默认情况下，它设置为42。
- 'wrapper-style'属性用于设置包装器的内联样式。默认情况下，它设置为空对象。它可以是数组或对象类型。
Style Props
- 'swatch-style'属性用于设置每个样本的内联样式。默认情况下，它设置为空对象。它可以是数组或对象类型。
- 'trigger-style'属性用于设置触发器的内联样式。默认情况下，它设置为空对象。它可以是数组或对象类型。
Fallback Input Props
- fallback-input-class'属性用于设置回退输入框的类。回退输入框是指在不支持JavaScript的浏览器中提供的备用输入框。默认情况下，它设置为null。它可以是数组、对象或字符串类型。
- 'fallback-input-type'属性用于设置回退输入框的类型。默认情况下，它设置为'text'。它必须是字符串类型。
- 'fallback-ok-class'属性用于设置回退按钮的类。回退按钮是指在不支持JavaScript的浏览器中提供的备用按钮。默认情况下，它设置为null。它可以是数组、对象或字符串类型。
- 'fallback-ok-text'属性用于设置回退按钮的文本。默认情况下，它设置为'Ok'。它必须是字符串类型。
