Vue自定义均衡器样式柱图

特殊定制均衡器样式柱图，为了展示。别问为什么这样设计！实现它就对了~~~

看到这个奇怪的展示柱图的时候，呵呵~~~

先上效果图

原理是通过flex布局使小横杆垂直叠加，一个做背景，一个做活动项。2个不同颜色的重合，就可以形成以上的效果。

使用说明

js里引入组件

import equalizerbar from '@/components/equalizerbar'

components里面声明下

components: {
     'equalizer-bar': equalizerbar
}

vue文件里面使用

<equalizer-bar
    :max="11"
    :active="6"
    :equalizerHeight="20"
    activecolor="#fea313"
    class="eb"
></equalizer-bar>

组件开放了很多自定义属性，具体看代码了，如上

• max：最大小横杆数量
• active：活动小横杆数量
• equalizerHeight：小横杆高度
• normalcolor：背景小横杆颜色
• activecolor：活动小横杆颜色

以上都是可以data()里面定义，然后动态控制的。

工程代码

整个项目的代码在下面地址

大屏开发框架工程代码

详见目录 components — equalizerbar.vue
代码使用例子在 views — Home 页面