网络编程 
首页 > 网络编程 > 浏览文章

基于vue实现圆形菜单栏组件

(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )

基于vue实现圆形菜单栏组件

整个样式都是基于css3 得transform而实现得。

每个扇形角度为360/12=30deg,当然,你不想做圆形也可以,公式就是     扇形角度=你想绘制得角度/扇形个数

当你计算好每个扇形得角度时,需要将li元素倾斜,倾斜角度=90-扇形面积,我的这个倾斜角度就是90-30=60deg,然后使用css3 得skew()

基于vue实现圆形菜单栏组件 

circle-panel-1

基于vue实现圆形菜单栏组件

circle-panel-2

基于vue实现圆形菜单栏组件

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 router总结 $router和$route及router与 router与route区别
下一篇:vue 使用axios 数据请求第三方插件的使用教程详解
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap