vue-swatches | 一款基于vuejs2.x的颜色拾取组件

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'。它必须是字符串类型。

github网址：https://github.com/saintplay/vue-swatches