Vue 颜色选择器组件 - vue-accessible-color-picker

Vue 颜色选择器组件 - vue-accessible-color-picker
插件名称 vue-accessible-color-picker
版本号 v3.0.0
发布时间 2020年8月7日
插件作者 kleinfreund

一个易于使用的颜色选择器组件,支持“十六进制”,“ hsl”,“ hwb”和“ rgb”格式。

变更日志:

v3.0.0(03/22/2021)

  • 类型:删除VueAccessibleColorPicker命名空间
  • 改善色彩道具解析
  • 将默认颜色格式从“ rgb”更改为“ hsl”。要在不更改应用程序的情况下进行升级,可以将“ rgb”传递给defaultFormat属性
  • 由于使用Object.fromEntries,因此更新了浏览器支持。最值得注意的是,不再支持使用EdgeHTML引擎的Edge和12.2之前的Safari版本

v2.0.0(01/17/2021)

  • 迁移到Vue.js 3 版本

v1.1.2(2020年12月20日)

  • Bug修复

v1.1.0(2020年12月20日)

  • 添加基本​​类型定义

2020年10月31日

  • 琐事:删除不必要的v-if指令

安装和下载:

# Yarn
$ yarn add vue-accessible-color-picker

# NPM
$ npm i vue-accessible-color-picker --save

如何使用它:

1.导入组件。

import { ColorPicker } from 'vue-accessible-color-picker';

2.注册拾色器组件。

.export default {
  components: {
    ColorPicker,
  }
}

3.或全局导入并注册该组件。

import { ColorPickerPlugin } from 'vue-accessible-color-picker';
Vue.component('ColorPickerPlugin', ColorPickerPlugin)

4.创建一个默认的颜色选择器组件。

<template>
  <ColorPicker />
</template>

5.默认 props 。

color: {
  type: [String, Object],
  required: false,
  default: null,
},
id: {
  type: String,
  required: false,
  default: 'color-picker',
},
visibleFormats: {
  type: Array,
  required: false,
  default: () => ['hex', 'hsl', 'hwb', 'rgb'],
  validator (visibleFormats) {
    return visibleFormats.length > 0 && visibleFormats.every(format => ALLOWED_VISIBLE_FORMATS.includes(format))
  },
},