vue 封装button组件

<template>
  <div>
    <div class="login-btn cursor" :class="myClass" :style="{ opacity: opacity }" @click="debounce">
      <span :class="['s']">{{ text }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: 2000,
      record: 0,
    }
  },
  computed: {
    myClass() {
      let arr = []
      if (this.size === 'big') {
        arr.push('big')
      } else if (this.size === 'primary') {
        arr.push('primary')
      } else if (this.size === 'pay') {
        arr.push('pay')
      } else if (this.size === 'uninstall') {
        arr.push('uninstall')
      } else {
        arr.push('plain')
      }
      console.log('arr', arr)
      return arr
    },
  },
  props: ['text', 'size', 'opacity'],
  methods: {
    debounce() {
      let newTime = new Date()
      console.log('newTime.getTime()', newTime.getTime() - this.record)
      if (newTime.getTime() - this.record > this.time) {
        this.$emit('submitbtn')
      }
      this.record = new Date().getTime()
    },
  },
}
</script>

<style lang="scss" scoped>
.login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  width: 163px;
  height: 34px;
  border-radius: 6px;
  font-family: PingFangSC-Medium;
  font-size: 13px;
  background-color: #5955f7;
  &.big {
    width: 274px;
    box-shadow: 3px 4px 12px 0px rgba(89, 85, 247, 0.33);
  }
  &.primary {
    box-shadow: 3px 4px 12px 0px rgba(89, 85, 247, 0.33);
  }
  &.plain {
    background-color: #f5f5f8;
    border: solid 1px #e6e6eb;
    color: #706f84;
    margin-right: 10px;
  }
  &.uninstall {
    background-color: #e2173d;
    box-shadow: 3px 4px 12px 0px rgba(226, 23, 61, 0.33);
    border-radius: 6px;
  }
  &.pay {
    width: 130px;
    box-shadow: 3px 4px 12px 0px rgba(89, 85, 247, 0.33);
  }
}
.s {
  color: red;
}
</style>

引用

<template>
  <div>
    <my-button size="big" opacity=".4" text="222" @submitbtn="clickBtn"> </my-button>
  </div>
</template>

<script>
import myButton from '../components/myButton'
export default {
  components: {
    myButton,
  },
  method: {
    clickBtn () {
      console.log('')  
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

其实没什么亮点，关键是用computed监听class，从而改变button样式