logo

ZebraColor

全端兼容的轻量级颜色选择器。

🔥 H5预览

🚀 zebraSwiper轮播     🚀 zebraUI组件库

介绍

zebraColor是一款兼容全端的颜色选择器，通常用于自定义颜色的场景。

特性

  • 全端兼容
  • 微信小程序使用wxs，支付宝小程序使用sjs，滑动选择颜色时丝滑无卡顿。

安装

npm方式

npm i @zebra-ui/color

// pages.json

{
	"easycom": {
		"^zebra-(.*)": "@zebra-ui/color/components/zebra-$1/zebra-$1.vue"
	},
	"pages": [...],
	"globalStyle": {...}
}

uni_modules方式

插件市场直接导入即可

使用

zebraColor包含两种风格，组件名分别为zebra-color-picker,zebra-color-picker-sketch。

基础使用

<zebra-color-picker v-model="colors"></zebra-color-picker>

data() {
	return {
		colors: {
			hex: '#7ED321'
		}
	}
},

参数

colors
  • 类型：object
  • 默认值：null

该参数必填，用于设置颜色选择器的初始色值。

示例值如下：

{
  hex: '#194d33',
  hex8: '#194D33A8',
  hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
  hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
  rgba: { r: 25, g: 77, b: 51, a: 1 },
  a: 1
}
disableAlpha
  • 类型：boolean
  • 默认值：false

该参数用于控制透明度选择器是否禁用。

disableFields
  • 类型：boolean
  • 默认值：false

该参数用于控制颜色输入框是否禁用。

事件

input

当颜色发生改变时触发

<zebra-color-picker v-model="colors" @input="updateValue"></zebra-color-picker>

updateValue(value) {
   console.log("value", value)
}

预览

logo