按钮

代码展示:

<template>
    <div>
       <div>
          <h1>按钮</h1>
       </div>
       <p class="container">
          <button @click="confirm" :disabled="state" class="confirm" :style="{background: btnData.bgColor}">{{text}}</button>
       </p>
    </div>
</template>

逻辑部分:

data(){
  return {
   text: this.btnData.text,
   state: false,
  }
 },
 props: {
  btnData: {
   types: Array,
   default() {
    return {
     text: '确认',
    }
   }
  }
 },
 methods: {
  confirm(){
   this.text += '...'
   this.state = true
   //这里是激活父组件的事件，因为子组件是不会冒泡到父组件上的，必须手动调用$emit
   //相对应父组件要在调用该组件的时候，将其挂载到上面
   this.$emit("confirm")
  },
  cancel(){
   this.text = this.btnData.text
   this.state = false
  }
 }
}

css样式:

   .confirm {
    border: none;
    color: #fff;
    width: 100%;
    padding: 1rem 0;
    border-radius: 4px;
    font-size: 1.6rem;
    background: #5da1fd;
   }