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


Posted in Javascript onJuly 05, 2019

基于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="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
//     }
//   });
//  }
// }
 
export default {
   data () {
      return {
         rotatePanel: 0
      }
   },
   props: {
      panel: {
         type: Array,
         default: [    {img:'pics-gem/1.png',title:'一月石榴石'},
    {img:'pics-gem/2.png',title:'一月石榴石'},
    {img:'pics-gem/3.png',title:'一月石榴石'},
    {img:'pics-gem/4.png',title:'一月石榴石'},
    {img:'pics-gem/5.png',title:'一月石榴石'},
    {img:'pics-gem/6.png',title:'一月石榴石'},
    {img:'pics-gem/7.png',title:'一月石榴石'},
    {img:'pics-gem/8.png',title:'一月石榴石'},
    {img:'pics-gem/9.png',title:'一月石榴石'},
    {img:'pics-gem/10.png',title:'一月石榴石'},
    {img:'pics-gem/11.png',title:'一月石榴石'},
    {img:'pics-gem/12.png',title:'一月石榴石'},]
      },
   },
   activated(){
    this.initPanel()
   },
   methods: {
     // 操作版
     clickPanel(item){
      this.$emit('clickPanel',{item})
     },
     initPanel(){
      let panel=document.getElementById("cn-wrapper");
      let panelMan = new Hammer.Manager(panel);
      panelMan.add(new Hammer.Pan({
        threshold: 0
       }));
      panelMan.on('panstart', (ev) => {
       if (ev.center.x < panel.clientWidth/2) {//左边
        this.rotatePanel= this.rotatePanel - ev.angle
       }else{
        this.rotatePanel= this.rotatePanel + ev.angle
        }
      });
     }
   }
}
</script>
 
<style scoped>
.cn-wrapper {
 font-size: 1em;
 width: 24em;
 height: 24em;
 overflow: hidden;
 position: fixed;
 z-index: 10;
 bottom: 84px;
 margin-left: -288px;
 left: 50%;
 border-radius: 50%;
 -webkit-transform: scale(0.1);
 -ms-transform: scale(0.1);
 -moz-transform: scale(0.1);
 transform: scale(1);
 /* pointer-events: none; */
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 transition: all 0.3s ease;
}
 
.cn-wrapper li {
 position: absolute;
 font-size: 1.5em;
 width: 10em;
 height: 10em;
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 transform-origin: 100% 100%;
 overflow: hidden;
 left: 50%;
 /* top: 50%; */
 margin-top: -2em;
 /* border: solid 1px #f2cc81; */
 margin-left: -10em;
 -webkit-transition: border 0.3s ease;
 -moz-transition: border 0.3s ease;
 transition: border 0.3s ease;
}
 
.cn-wrapper li a {
 display: block;
 font-size: 1.18em;
 height: 14.5em;
 width: 14.5em;
 /* position: absolute; */
 position: fixed; /* fix the "displacement" bug in webkit browsers when using tab key */
 bottom: -7.25em;
 right: -7.25em;
 border-radius: 50%;
 text-decoration: none;
 color: #fff;
 padding-top: 1em;
 text-align: center;
 -webkit-transform: skew(-60deg) rotate(-70deg) scale(1);
 -ms-transform: skew(-60deg) rotate(-70deg) scale(1);
 -moz-transform: skew(-60deg) rotate(-70deg) scale(1);
 transform: skew(-60deg) rotate(-70deg) scale(1);
 -webkit-backface-visibility: hidden;
 -webkit-transition: opacity 0.3s, color 0.3s;
 -moz-transition: opacity 0.3s, color 0.3s;
 transition: opacity 0.3s, color 0.3s;
}
 
/* for a central angle x, the list items must be skewed by 90-x degrees
in our case x=40deg so skew angle is 50deg
items should be rotated by x, minus (sum of angles - 180)2s (for this demo) */
 
.cn-wrapper li:first-child {
 transform: rotate(-10deg) skew(60deg);
}
 
.cn-wrapper li:nth-child(2) {
 transform: rotate(20deg) skew(60deg);
}
 
.cn-wrapper li:nth-child(3) {
 transform: rotate(50deg) skew(60deg);
}
 
.cn-wrapper li:nth-child(4) {
 transform: rotate(80deg) skew(60deg);
}
 
.cn-wrapper li:nth-child(5) {
 transform: rotate(110deg) skew(60deg);
}
.cn-wrapper li:nth-child(6) {
 transform: rotate(140deg) skew(60deg);
}
.cn-wrapper li:nth-child(7) {
 transform: rotate(170deg) skew(60deg);
}
.cn-wrapper li:nth-child(8) {
 transform: rotate(200deg) skew(60deg);
}
.cn-wrapper li:nth-child(9) {
 transform: rotate(230deg) skew(60deg);
}
.cn-wrapper li:nth-child(10) {
 transform: rotate(260deg) skew(60deg);
}
.cn-wrapper li:nth-child(11) {
 transform: rotate(290deg) skew(60deg);
}
.cn-wrapper li:nth-child(12) {
 transform: rotate(320deg) skew(60deg);
}
 
.cn-wrapper li:nth-child(odd) a {
 background-color: #a11313;
 background-color: hsla(0, 88%, 63%, 1);
}
 
.cn-wrapper li:nth-child(even) a {
 background-color: #a61414;
 background-color: hsla(0, 88%, 65%, 1);
}
 
/* active style */
.cn-wrapper li.active a {
 /* background-color: #b31515;
 background-color: hsla(0, 88%, 70%, 1); */
 background-color: rgba(135, 137, 155, 0.52);
 border: solid 0px #f2cc81;
}
 
/* hover style */
.cn-wrapper li:not(.active) a:hover,
.cn-wrapper li:not(.active) a:active,
.cn-wrapper li:not(.active) a:focus {
 background-color: rgba(135, 137, 155, 0.52);
 border: solid 0px #f2cc81;
}
 
.li-img {
 width: 50px;
 margin-bottom: 44px;
 margin-left: -30px;
}
.li-text {
 color: #f2cc81;
 font-size: 20px;
 line-height: 1.4;
 width: 76px;
 margin: 0 calc(50% - 50px);
}
</style>

父组件调用:

<div class="making-panel">
     <CirclePanel :title="title" :panel="panel"
           @clickTab="clickTabCircle"
           @clickPanel="clickPanel" ></CirclePanel>
  </div>

总结

以上所述是小编给大家介绍的基于vue实现圆形菜单栏组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
Bootstarp 基础教程之表单部分实例代码
Feb 03 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
vue 使用axios 数据请求第三方插件的使用教程详解
Jul 05 #Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 #Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 #Javascript
Electron vue的使用教程图文详解
Jul 05 #Javascript
监控微信小程序中的慢HTTP请求过程详解
Jul 05 #Javascript
JS实现求字符串中出现最多次数的字符和次数示例
Jul 05 #Javascript
JS Math对象与Math方法实例小结
Jul 05 #Javascript
You might like
PHP Yaf框架的简单安装使用教程(推荐)
2016/06/08 PHP
php操作access数据库的方法详解
2017/02/22 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
浅析javascript 定时器
2014/12/23 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
Vue.js组件tree实现无限级树形菜单
2016/12/02 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
2017/05/30 Javascript
JS实现520 表白简单代码
2018/05/21 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
JQuery中DOM节点的操作与访问方法实例分析
2019/12/23 jQuery
浅析Python编写函数装饰器
2016/03/18 Python
python字符串,数值计算
2016/10/05 Python
Python+MongoDB自增键值的简单实现
2016/11/04 Python
pycharm运行和调试不显示结果的解决方法
2018/11/30 Python
python+os根据文件名自动生成文本
2019/03/21 Python
python中时间模块的基本使用教程
2019/05/14 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
Django实现auth模块下的登录注册与注销功能
2019/10/10 Python
python迭代器常见用法实例分析
2019/11/22 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
Jowissa官方网站:瑞士制造的手表,优雅简约的设计
2020/07/29 全球购物
应征英语教师求职信
2013/11/27 职场文书
小加工厂管理制度
2014/01/21 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
少儿节目主持串词
2014/04/02 职场文书
求职信模板
2014/05/23 职场文书
拾金不昧感谢信
2015/01/21 职场文书
品德与社会教学反思
2016/02/24 职场文书
优秀大学生申请书
2019/06/24 职场文书