Circular Color Picker For Vue.js

Circular Color Picker For Vue.js

A Vue.js color picker that allows the user to select a color from a circular palette interface.

vue-circle-choice

A circular color choice and navigation with Vue.js

Demo

可以在 dev 分支查看详细示例,在线 Demo

安装

npm install vue-circle-choice --save

引入

作为全局组件使用

// 在项目入口文件
import Vue from 'vue';
// 圆环型取色盘
import choiceColor from 'vue-circle-choice';
// 半圆型导航
import circularNav from 'vue-circle-choice';

Vue.component('choiceColor', choiceColor);
Vue.component('circularNav', circularNav);

作为局部组件使用

// 在某个组件中
import choiceColor from 'vue-circle-choice';
import circularNav from 'vue-circle-choice';

export default {
  components: {
    choiceColor,
    circularNav,
  },
};

API

choice-color

Props

参数 类型 说明
colors Array 圆环各部分背景色
radius String 圆环半径

Events

事件名 参数 说明
updateColor { index, color } index: 按钮的索引; color: 按下按钮的颜色

示例

使用 pug 代码:

choice-color(:colors='colors', radius="10em", @updateColor='updateColor')

使用 html 代码:

<choice-color :colors='colors' radius='10em' @updateColor='updateColor'></choice-color>

组件数据及自定义事件:

const colors = [
  '#1ba6cc',
  '#189ba7',
  '#98c6ae',
  '#45a270',
  '#7cb325',
  '#eb9826',
];

data() {
  return {
    colors,
    index: 0,
    color: this.colors[0],
  };
},
methods: {
  updateColor({ index, color }) {
    this.index = index;
    this.color = color;
  },
}

circular-nav

Props

参数 类型 说明
color String 圆环背景色
radius String 圆环半径
navs Array[Object] 各项导航设置,都是可选,具体如下
href href 属性,默认为 javascript:void(0)
label 导航名称
icon 字体图标类名,已添加 iconfont

Events

事件名 参数 说明
updateNav index 导航的索引

示例

使用 pug 代码:

circular-nav(:navs='navs', :color='color', radius="8em", @updateNav='updateNav')

使用 html 代码:

<circular-nav :color='color' radius='8em' :navs='navs' @updateNav='updateNav'></circular-nav>

组件数据及自定义事件:

const navs = [{
  label: 'Discover',
  href: 'javascript:void(0)',
  icon: 'icon-discover',
}, {
  label: 'Home',
  href: 'javascript:void(0)',
  icon: 'icon-home',
}, {
  label: 'My',
  href: 'javascript:void(0)',
  icon: 'icon-my',
}];

data() {
  return {
    index: 0,
    color: '#1ba6cc',
    navs,
  };
},
methods: {
  updateNav(index) {
    this.index = index;
  },
}

bug和建议

如果在使用中遇到问题或者建议,欢迎提issues

Github Repository

Tags: #VueJs