這是項目目錄結(jié)構(gòu)

UIButton.png

本次封裝實現(xiàn)了vue組件button的封裝季眷，封裝的屬性包括：
控制大杏嘈贰：small、normal子刮、large威酒、xlarge
控制圓角：tile（直角）、rounded（半圓角）挺峡、circle（圓角）
控制靜止：disable
控制顏色樣式：color

App.vue

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Home from '@/Home.vue'
@Component({
  components: {
    Home,
  },
})
export default class App extends Vue {}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

home.vue

<template>
  <div class="container">
    <UiButton @click="onClick" >hello</UiButton>
  </div>

</template>
<script lang='ts'>
  import {Component, Vue} from 'vue-property-decorator'
  import UiButton from './components/UiButton/UiButton.vue'

  @Component({
    components: {
      UiButton,
    },
  })
  export default class Home extends Vue{
    private onClick(even: MouseEvent){
      window.console.log(even)
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  .container
    .btn-group
      display flex
      margin-top 20px
      .btn
        margin-right 15px
</style>

UIButton.vue

<template>
  <div>
    <button class='ui-btn' @click="btnClick"
    :class="{
      'ui-btn-small': small,
      'ui-btn-normal': normal,
      'ui-btn-large': large,
      'ui-btn-xlarge': xlarge,
      'ui-btn-tile': tile,
      'ui-btn-rounded': rounded,
      'ui-btn-circle': circle,
      'ui-btn-disable': disable
    }"
    :style="`
      --color-tint:${TintColor}
    `"
    >
      <slot>Button</slot>
    </button>
  </div>
</template>
<script lang='ts'>
  // Emit用于發(fā)布事件葵孤，Prop用于接收參數(shù)
  import {Vue, Component, Emit, Prop} from 'vue-property-decorator'

  @Component
  export default class UiButton extends Vue{
    // 會從home獲取到boolean值
    @Prop(Boolean) private small: boolean | undefined
    @Prop(Boolean) private normal: boolean | undefined
    @Prop(Boolean) private large: boolean | undefined
    @Prop(Boolean) private xlarge: boolean | undefined
    @Prop(Boolean) private tile: boolean | undefined
    @Prop(Boolean) private rounded: boolean | undefined
    @Prop(Boolean) private circle: boolean | undefined
    @Prop(Boolean) private disable: boolean | undefined
    @Prop(String) private color: string | undefined

    // vue的計算屬性
    private get TintColor(){
      if(this.color){
        return this.color
      }else{
        return '#2d8cf0'
      }
    }

    // 執(zhí)行btnClick調(diào)用emitClickEvent函數(shù)，并通過emitClickEvent發(fā)送click事件并且把參數(shù)一并發(fā)送出去
    @Emit('click') private emitClickEvent(even: MouseEvent){} // 這一行等價于this.$emit('click')

    private btnClick(even: MouseEvent){
      if(!this.disable){
        this.emitClickEvent(even)
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  resize(min-width, height, paddingR, fontSize)
    min-width min-width
    height height
    padding 0 paddingR
    font-size fontSize
    &.ui-btn-rounded, &.ui-btn-circle
      border-radius (@height / 2)
    &.ui-btn-circle
      min-width @height
      padding 0px 0px
  .ui-btn
    resize(64px, 36px, 16px, 0.875rem)
    border 0 solid black
    border-radius 4px
    text-align center
    outline none
    font-weight 500
    letter-spacing 0.09em
    background-color var(--color-tint)
    cursor pointer
    user-select none
    &:hover
      // 實現(xiàn)高亮
      filter brightness(120%)
    &:active
      filter brightness(80%)
    &.ui-btn-small
      resize(36px, 20px, 9px, 0.625rem)
    &.ui-btn-large
      resize(78px, 44px, 19px, 0.875rem)
    &.ui-btn-xlarge
      resize(92px, 52px, 23px, 1rem)
    &.ui-btn-tile
      border-radius 0
    &.ui-btn-disable
      cursor not-allowed
      background-color #f5f5f5
      color #c5c8ce
</style>

主要用到這個三個vue文件橱赠，引入UIButton之后尤仍，下面在Home.vue中的使用例子
<UiButton @click="onClick" xlarge circle disable color='#2dada'>hello</UiButton>
調(diào)用不同的屬性就可以了，有需要的添加的屬性也可以狭姨，在UIButton中自定義添加即可