笔记--vue2封装按钮组组件

<template>
  <div class="switch_body">
    <div class="box_btn" v-for="(item,index) in list" :key="index" :class="[{ 'first_btn': index == 0 },{ 'last_btn': index == list.length - 1 },{ 'active_char': selectState == index }]" @click="pageChange(index)">
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      selectState: 0
    }
  },

  props:{
    list:{
      type:Array,
      default:[]
    }
  },

  methods: {
    pageChange (index) {
      if(this.selectState == index) return
      this.selectState = index
      // 触发事件
    }
  },
}
</script>
<style lang="scss" scoped>
.switch_body {
  display: flex;
  align-items: center;

  .box_btn {
    padding: 7px 16px;
    border: 1px solid #dcdfe6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #595959;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.5s;

    &:hover:not(.active_char) {
      color: #165dff;
    }
  }

  .first_btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    border-right: transparent;
  }

  .last_btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-left: transparent;
  }

  .active_char {
    border: 1px solid #165DFF;
    color: #165DFF;
  }
}
</style>