SEECBC/FrontEnd/components/playground/nn/Button.vue

<template>
  <!-- use plane  -->
  <!-- 传入bgColor改变按钮背景色 -->
  <!-- state切换button的状态 调用cancel()可以切换 -->
  <!-- text为按钮文字 -->
  <div class="container">
    <button
      :disabled="state"
      class="confirm"
      :style="{ background: btnData.bgColor }"
      @click="confirm"
    >
      {{ text }}
    </button>
  </div>
</template>
<script>
export default {
  name: 'Button',
  props: {
    btnData: {
      type: Object,
      default: () => ({ text: '确认' })
    }
  },
  data() {
    return {
      text: this.btnData.text,
      state: false
    }
  },
  methods: {
    confirm() {
      // 这里是激活父组件的事件，因为子组件是不会冒泡到父组件上的，必须手动调用$emit
      // 相对应父组件要在调用该组件的时候，将其挂载到上面
      this.$emit('confirm')
    }
  }
}
</script>
<style scoped>
.confirm {
  border: none;
  color: #fff;
  width: 100%;
  padding: 1rem 0;
  border-radius: 4px;
  font-size: 1.6rem;
  background: #5da1fd;
}
</style>