基于基于vue实现圆形菜单栏组件实现圆形菜单栏组件
主要介绍了基于vue实现的圆形菜单栏组件,本文通过实例代码,图文详解的非常详细,具有一定的参考借鉴价
值,需要的朋友可以参考下
整个样式都是基于css3 得transform而实现得。
每个扇形角度为360/12=30deg,当然,你不想做圆形也可以,公式就是 扇形角度=你想绘制得角度/扇形个数
当你计算好每个扇形得角度时,需要将li元素倾斜,倾斜角度=90-扇形面积,我的这个倾斜角度就是90-30=60deg,然后使用
css3 得skew()
circle-panel-1
circle-panel-2
circle-panel-3
当每个扇形倾斜60deg之后,会在原来得位置上,要想每个扇形有规律得组合在一起,那么就要旋转相应得角
度,30deg,60deg,90deg…….这个以扇形得圆心角递加。
这是基础组件得完整代码,父组件只需导入使用传给子组件数据就可以了,当点击每个扇形得事件也在父组件监听实现相应的
逻辑。script部分我加了js代码和ts代码,没有用过ts得小伙伴就忽略直接参考js代码就可以了。并且我调用了手势库
hammer.js,这个库很全,大家感兴趣得可以去查一下使用方法,这样这个圆环是可以旋转得。
<template>
<div id="cn-wrapper" :style="{transform:'rotate('+rotatePanel+'deg)'}" class="cn-wrapper" >
<ul>
<li @click="clickPanel(item)" v-for="(item,index) in panel" :key="index">
<a href="#">
<img class="li-img" :src="item.img" alt />
<div class="li-text">{{item.title}}</div>
</a>
</li>
</ul>
</div>
</template>
<script >
// import { Component, Prop, Vue,Emit } from 'vue-property-decorator';
// @Component
// export default class CirclePanel extends Vue {
// private rotatePanel=0;
// @Prop() panel!: any;
// mounted(){
// this.initPanel()
// }
// // 操作版
// @Emit()
// clickPanel(item:any){
// return item;
// }
// initPanel(){
// let panel=document.getElementById("cn-wrapper") as HTMLElement;
// let panelMan = new Hammer.Manager(panel);
// panelMan.add(new Hammer.Pan({
// threshold: 0
// }));
// panelMan.on('panstart', (ev: any) => {
// if (ev.center.x < panel.clientWidth/2) {//左边
// this.rotatePanel= this.rotatePanel - ev.angle
// }else{
// this.rotatePanel= this.rotatePanel + ev.angle
// }
// });
// }
// }