实现自定义导航栏组件

click2.gif

组件文件（一块一块的那个）
cpn.vue

<template>

  <div class="wrapper" @click="select" :class="classes">

    <div class="top"  :class="classes"></div>

    <div class="content">
      <slot></slot>
    </div>

    <div class="bottom" :class="classes"></div>
  </div>



</template>

<script>
  export default {
    props: [
      'actived',        // 是否被点击选中
      'fengbian_left',  // 封住左边
      'fengbian_right', // 封住右边
    ],
    data() {
      return {

      }
    },
    computed: {
        classes() {
          return { 
            actived: this.actived, 
            'fengbian_left': this.fengbian_left,
            'fengbian_right': this.fengbian_right,
          }
        },
    },
    methods: {
      debug() {
        console.log(this.classes)
      },
      select() {

      }
    },
    
    
  }
</script>


<style lang="less">
.wrapper.fengbian_left.actived {
  background: red;
}

.wrapper.fengbian_left {
  border-left: 2px solid grey;
}
.wrapper.fengbian_right {
  border-right: 2px solid grey;
  overflow: hidden;
}

.wrapper {
  box-sizing: border-box;
  width: 202px;
  
  border: none;
  
  cursor: pointer;
  display: inline-block;


  margin-left: 8px;
  position: static;
  .top,
  .bottom {
    width: 200px;
    height: 15px;
    border: 2px solid grey;

  }

  .top {
    transform: skewX(30deg);
    transform-origin: left top;
    border-bottom: unset;
    
  }
  
  .top.fengbian_left, .bottom.fengbian_left {
    border-left: none;
  }



  .top.fengbian_right, .bottom.fengbian_right {
    border-right: none;
  }


  .top.actived, .bottom.actived {
    background: red;
  }

  .bottom {
    transform: skewX(-30deg);
    transform-origin: left bottom;
    border-top: unset;
  }
  .content {
    width: 200px;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 100;

    line-height: 50px;
  }
}
</style>

演示的父组件：
home.vue

<template>
  <div>
    <cpn @click.native="select(1)" :fengbian_left="true" :actived="index == 1">权限管理</cpn>
    <cpn @click.native="select(2)"  :actived="index == 2">权限列表</cpn>
    <cpn @click.native="select(3)" :fengbian_right="true" :actived="index == 3">编辑权限</cpn>

  </div>
</template>

<script>
import cpn from '@/components/Cpn.vue'

export default {
  

  name: "Home",
  data() {
    return {
      show: true,
      index: 1,
    };
  },

  methods: {
    select(index) {
      this.index = index
    }
  },

  

  components: {
    cpn,
  }

};

</script>