<template> <div @mouseleave="hoverBtn('')"> <div :style="`width:${width}rem;height:${width}rem`" @click="btnClick(id)" @mouseover="hoverBtn(id)"> <div :style="styleExternalBtn" class="menu-icon" v-on="$listeners" /> <div :style="`width:${width}rem;font-size: ${Number(width)/6}rem;`" class="font-class" v-on="$listeners">{{text}}</div> </div> <div style="position: relative;left: 0" :style="`top: ${-width}rem;`"> <div v-if="hasChildren" v-for="(item, index) of children" :key="index"> <svg class="line" :style="`margin-top: ${width=='5'?-4.6:-5.6}rem`"> <defs> <linearGradient style="color: #1e445d" :id="`gradient-${id}${index}`" > <stop offset="0%" stop-color="#1e445daa" /> <stop offset="50%" stop-color="#2f6b91" /> <stop offset="100%" stop-color="#1e445daa" /> </linearGradient> </defs> <line :x1="`${positions[width][children.length][index].x1}rem`" :y1="`${positions[width][children.length][index].y1}rem`" :x2="`${positions[width][children.length][index].x2}rem`" :y2="`${positions[width][children.length][index].y2}rem`" :stroke="`url(#gradient-${id}${index})`" stroke-width="1" style="position: absolute"/> <!-- `url(#gradient-${id}${index})`--> </svg> <div class="children-menu" @click="childrenClick(item)" :style="`width:${width=='5'?4.6:6}rem;height:${width=='5'?4.6:6}rem; left:${positions[width][children.length][index].left}rem; top: ${positions[width][children.length][index].top}rem;`"> <div :style="`margin-top: ${width=='5'?1.45:2.2}rem`">{{item.name}}</div> </div> </div> </div> </div> </template> <script> export default { name: 'MenuBtn', props: { id: { type: String, required: true }, bg: { type: String, required: true }, bgHover: { type: String, default: '' }, width: { type: String, default: '10' }, height: { type: String, default: '10' }, text: { type: String, default: '' }, font: { type: String, default: '' }, hasChildren: { type: Boolean, default: false }, children: { type: Array, default: () => ([]) } }, computed: { styleExternalBtn() { return { background: `url(${this.bg})`, '--hover-url': `url(${this.bgHover})`, width: `${this.width}` + 'rem', height: `${this.height}` + 'rem', } } }, data() { return { positions: { '5': { 1: [ {left: 0,top: -5,x1: 5,y1: 4.1,x2: 5.0001,y2: 5}, ], 2: [ {left: -2,top: -5,x1: 4.4,y1: 4.1,x2: 5.5,y2: 5}, {left: 2,top: -5,x1: 4.4,y1: 4.1,x2: 3.3,y2: 5}, ], 6: [ {left: -5.5,top: 1,x1: 6,y1: 2,x2: 8,y2: 2.0001}, {left: -4.5,top: -2.5,x1: 6,y1: 3,x2: 7,y2: 4}, {left: -1.8,top: -5,x1: 4.4,y1: 4.1,x2: 5.5,y2: 5}, {left: 1.8,top: -5,x1: 4.4,y1: 4.1,x2: 3.3,y2: 5}, {left: 4.5,top: -2.5,x1: 2.8,y1: 3,x2: 2,y2: 4}, {left: 5.5,top: 1,x1: 0.8,y1: 2,x2: 2.5,y2: 2.0001}, ] }, '10': { 1: [ {left: 1.8,top: -8,x1: 6.2,y1: 5.3,x2: 6.201,y2: 8.001}, ], 2: [ {left: -2,top: -8,x1: 6,y1: 5.3,x2: 8,y2: 8.5}, {left: 5,top: -8,x1: 6,y1: 5.3,x2: 4.2,y2: 8.5}, ], 3: [ {left: -4.5,top: -5,x1: 8.1,y1: 4.8,x2: 10.1,y2: 6.3}, {left: 1.8,top: -8,x1: 6.2,y1: 5.3,x2: 6.201,y2: 8.001}, {left: 8,top: -5,x1: 4.1,y1: 4.4,x2: 2,y2: 5.9}, ], 6: [ {left: -6.5,top: -.5,x1: 0.2,y1: 3,x2: 2.7,y2: 3.001}, {left: -4.5,top: -5,x1: 8.1,y1: 4.8,x2: 10.1,y2: 6.3}, {left: -0.7,top: -8,x1: 6.8,y1: 5.3,x2: 8,y2: 8}, {left: 4.2,top: -8,x1: 5.5,y1: 5.3,x2: 4,y2: 8}, {left: 8,top: -5,x1: 4.1,y1: 4.4,x2: 2,y2: 5.9}, {left: 10,top: -.5,x1: 9.8,y1: 3,x2: 12.2,y2: 3.001}, ] } } } }, methods: { hoverBtn(id) { if(this.children.length!==0) { this.$emit('menuHover', id) // this.hasChildren=true } }, btnClick(id) { if(this.children.length===0) { this.$emit('btnClick', id) } }, childrenClick(item) { this.$emit('btnClick', item) } } } </script> <style scoped> .menu-icon { background-repeat: no-repeat; cursor: pointer; background-size: cover !important; -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .font-class { color: white; position: relative; bottom: 30%; font-family: fzhzgbjt; text-align: center; cursor: pointer; -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .menu-icon:hover { --hover-url: ''; background: var(--hover-url) !important; background-size: cover !important; } .children-menu { width: 5rem; height: 5rem; position: absolute; color: white; font-family: fzhzgbjt; z-index: 1111111111; background-repeat: no-repeat; cursor: pointer; background: url("../../assets/images/menubtn/二级未选中.png") !important; background-size: 100% 100% !important; -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .children-menu:hover { background: url("../../assets/images/menubtn/二级选中.png") !important; background-size: 100% 100% !important; } .line { display: block; position: absolute; transform: scaleY(-1); margin-left: -1.4rem; } /*.common-icon:hover::before {*/ /* content: attr(data-tip);*/ /* display: block;*/ /* word-break: keep-all;*/ /* white-space: nowrap;*/ /* letter-spacing: 0.1rem;*/ /* position: relative;*/ /* padding: 0.01rem 0.3rem;*/ /* color: #fff;*/ /* !*font-weight: bold;*!*/ /* border: 1px solid #246aa1;*/ /* background: #154a76;*/ /* border-radius: 5px;*/ /* top: 95%;*/ /*}*/ </style>