tab-button.vue

<template>
  <section
    :class="[buttonClass,cusClass,showActivated]"
    class="tab-content"
    @contextmenu="preventDefault"
    @touchstart="start"
    @touchend="end"
    @touchcancel="end"
    @mousedown="start"
    @mouseup="end"
    @mouseleave="end">
    <section class="bottom-tab-button">
      <slot/>
    </section>
    <div v-show="showDivider" class="bottom-tab-divider"/>
  </section>
</template>

<script>
export default {
  name: 'TabButton',
  props: {
    cusClass: {
      type: String,
      default: '',
    },
    disable: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      showActivated: '',
    }
  },
  computed: {
    showDivider () {
      return this.$parent.showDivider
    },
    buttonClass () {
      if (this.disable) return 'disable'
    },
  },
  methods: {
    preventDefault (e) {
      // 移动浏览器中长按元素会触发显示菜单，导致touchend事件不会触发，需要阻止该行为
      e.preventDefault()
    },
    start (e) {
      if (this.disable) {
        e.preventDefault()
        e.stopPropagation()
      } else {
        this.showActivated = 'activated'
      }
    },
    end () {
      // 添加一点延时，不然透明度变化太快，效果不明显
      setTimeout(() => {
        this.showActivated = ''
      }, 100)
    },
  },
}
</script>

<style lang="less">

  .h-bottom-tab {
    .tab-content {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      &.activated {
        opacity: 0.8;
      }
      .bottom-tab-button {
        width: 100%;
        height: 100%;
        display: -webkit-flex;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-justify-content: center;
        font-size: @font-size-big;

        img {
          margin-right: 10px;
        }
      }
      .bottom-tab-divider {
        width: 1px; /*no*/
        height: 50%;
        background-color: rgb(214, 217, 218);
      }
      &:last-child {
        .bottom-tab-divider {
          width: 0px;
        }
      }
      &.disable {
        color: rgba(0, 0, 0, .3) !important;
        background-color: #e6e6e6 !important;
        box-shadow: none !important;
        cursor: not-allowed !important;
        div {
          color: rgba(0, 0, 0, .3) !important;
          background-color: #e6e6e6 !important;
          box-shadow: none !important;
          cursor: not-allowed !important;
        }
      }
    }
  }

</style>