Vue自定义均衡器样式柱图

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

先上效果图

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

使用说明

js里引入组件

1
import equalizerbar from '@/components/equalizerbar'

components里面声明下

1
2
3
components: {
     'equalizer-bar': equalizerbar
}

vue文件里面使用

1
2
3
4
5
6
7
<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 页面