vue-circle-choice
A circular color choice and navigation with Vue.js
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。
