介绍
本篇文章给大家分享的是有关使用vue怎么实现一个圆形菜单栏组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
& lt; template>
,& lt; div id=癱n-wrapper",:,类=癱n-wrapper",在
& lt;才能ul>
,,& lt; li @click=癱lickPanel(项目)“,v=?项目、索引),拷贝panel",:关键=癷ndex"比;
,,,& lt; https://www.yisu.com/zixun/a href=" # ">
{{item.title}}
李
<>脚本//导入{组件,道具,Vue发出}“vue-property-decorator”;//@ component//导出默认类CirclePanel延伸Vue {//私人rotatePanel=0;//@Prop()面板!:任何;//安装(){//this.initPanel ()//}////操作版//@Emit ()//clickPanel(项目:有){//返回项目;//}//initPanel () {//让面板=. getelementbyid (“cn-wrapper”)作为HTMLElement;//让panelMan=new Hammer.Manager(面板);//panelMan。添加(新Hammer.Pan ({//阈值:0//}));//panelMan。(“panstart”(ev:任何)=> {//如果(ev.center。x
{
如果(ev.center。x
.cn-wrapper {
字体大小:1 em;
宽度:24 em;
高度:24 em;
溢出:隐藏;
位置:固定;
z - index: 10;
底部:84 px;
margin-left: -288 px;
左:50%;
这个特性:50%;
-webkit-transform:规模(0.1);
-ms-transform:规模(0.1);
-moz-transform:规模(0.1);
变换:规模(1);/* pointer-events:没有;*/-webkit-transition:所有0.3年代缓解;
-moz-transition:所有0.3年代缓解;
过渡:所有0.3年代缓解;
}
李.cn-wrapper {
位置:绝对的;
字体大小:1.5 em;
宽度:10 em;
高度:10 em;
-webkit-transform-origin: 100% - 100%;
-moz-transform-origin: 100% - 100%;
-ms-transform-origin: 100% - 100%;
transform-origin: 100% - 100%;
溢出:隐藏;
左:50%;/*:50%;*/margin-top: 2 em;/*边境:固体1 px # f2cc81;*/margin-left: -10 em;
-webkit-transition:边境0.3 s缓解;
-moz-transition:边境0.3 s缓解;
过渡:边境0.3 s缓解;
}
李.cn-wrapper一个{
显示:块;
字体大小:1.18 em;
高度:14.5 em;
宽度:14.5 em;/*:绝对;*/位置:固定;/*修复“位移”错误在webkit浏览器使用tab键*/下:-7.25 em;
右:-7.25 em;
这个特性:50%;
文字修饰:没有;
颜色:# fff;
padding-top: 1 em;
text-align:中心;
-webkit-transform:斜(-60度)旋转(-70度)规模(1);
-ms-transform:斜(-60度)旋转(-70度)规模(1);
-moz-transform:斜(-60度)旋转(-70度)规模(1);
变换:斜(-60度)旋转(-70度)规模(1);
-webkit-backface-visibility:隐藏;
-webkit-transition:透明度0.3 s,颜色0.3秒;
-moz-transition:透明度0.3 s,颜色0.3秒;
过渡:透明度0.3 s,颜色0.3秒;
}/*中央角x,列表项必须由90 - x度倾斜
在我们的例子中x=40度倾斜角是50度
物品应由x,旋转-(角之和- 180)2(演示)*/.cn-wrapper李:第一个孩子{
变换:旋转(-10度)斜(60度);
}
.cn-wrapper李:nth-child (2) {
变换:旋转(20度)斜(60度);
}
.cn-wrapper李:nth-child (3) {
变换:旋转(50度)斜(60度);
}
.cn-wrapper李:nth-child (4) {
变换:旋转(80度)斜(60度);
}
.cn-wrapper李:nth-child (5) {
变换:旋转(110度)斜(60度);
}
.cn-wrapper李:nth-child (6) {
变换:旋转(140度)斜(60度);
}
.cn-wrapper李:nth-child (7) {
变换:旋转(170度)斜(60度);
}
.cn-wrapper李:nth-child (8) {
变换:旋转(200度)斜(60度);
}
.cn-wrapper李:nth-child (9) {
变换:旋转(230度)斜(60度);
}
.cn-wrapper李:nth-child (10) {
变换:旋转(260度)斜(60度);
}
.cn-wrapper李:nth-child (11) {
变换:旋转(290度)斜(60度);
}
.cn-wrapper李:nth-child (12) {
变换:旋转(320度)斜(60度);
}
.cn-wrapper李:nth-child(奇数){
background - color: # a11313;
background - color: hsla (0、88%、63%, 1);
}
.cn-wrapper李:nth-child(甚至){
background - color: # a61414;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
