Newer
Older
ganzhou-feidu / src / components / menuBtn / index.vue
dutingting 19 days ago 6 KB 停车云菜单样式
<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>