基于vue实现圆形菜单栏组件
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
整个样式都是基于css3 得transform而实现得。
每个扇形角度为360/12=30deg,当然,你不想做圆形也可以,公式就是 扇形角度=你想绘制得角度/扇形个数
当你计算好每个扇形得角度时,需要将li元素倾斜,倾斜角度=90-扇形面积,我的这个倾斜角度就是90-30=60deg,然后使用css3 得skew()
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="/UploadFiles/2021-04-02/item.img">父组件调用:
<div class="making-panel"> <CirclePanel :title="title" :panel="panel" @clickTab="clickTabCircle" @clickPanel="clickPanel" ></CirclePanel> </div>总结
以上所述是小编给大家介绍的基于vue实现圆形菜单栏组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:vue 使用axios 数据请求第三方插件的使用教程详解