您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇文章给大家分享的是有关使用vue怎么实现一个圆形菜单栏组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
<template> <div id="cn-wrapper" : 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怎么实现一个圆形菜单栏组件,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。