基于 Vue 的颜色选择器插件

924 次阅读 zuley 发布于 6个月前 (03-15) 秘密花园 0 评论

基于Vue2.0的颜色选择器插件

DEMO:Vue-color-picker传送门

github:项目传送门

基于Vue2.0的颜色选择器插件

特点

  1. 简单易用,UI在原插件基础上优化增加了圆角和过渡动画
  2. 提供以插件的形式安装提供全局组件
  3. 提供单独以组件的方式按需引入
  4. 在支持 html5 input[type=’color’] 的浏览器实现了「更多颜色」的功能

获取

你可以直接下载整个项目,然后提取其中的/src/plugin/vue-color-picker目录使用。
也可以直接只下载插件

用法

以插件的形式安装

// 导入插件
import colorPicker from './plugin/vue-color-picker'
// 注册插件
Vue.use(colorPicker)

// 在组件的 temelate 中直接使用
<colorPicker v-model="color"></colorPicker>

以组件的形式安装

// 在组件中导入插件
import colorPicker from './plugin/vue-color-picker/colorPicker'
// 在组件中注册插件
export default {
  components: { colorPicker }
}
// 在组件的 temelate 中直接使用
<colorPicker v-model="color"></colorPicker>

选项

你可以通过在所在的元素上设置以下属性来配置color-picker
1. defaultColor:默认颜色,如defaultColor="#ff0000"
2. disabled:禁用状态,如disabled=true

事件

change颜色值改变的时候触发

<colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>
二维码
扫描此二维码去手机端访问

基于 Vue 的颜色选择器插件

文章评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注