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

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

(编辑:jimmy 日期: 2024/11/2 浏览: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 数据请求第三方插件的使用教程详解
微软与英特尔等合作伙伴联合定义“AI PC”:键盘需配有Copilot物理按键
几个月来,英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法,朝着更多的AI功能迈进。在近日,英特尔在台北举行的开发者活动中,也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上,英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件,以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 SiteMap