render函数 一值多判断

image.png
image.png

<template>

</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: "normal"
    },
    text: {
      type: "String",
      default: 'normal'
    }
  },
  render(h) {
    // h:createElemnt
    return h('button', {
      //v-bind:class
      class: {
        btn: true,
        "btn-success": this.type === 'success',
        "btn-danger": this.type === 'danger',
        "btn-waring": this.type === 'waring',
        'normal': !this.type
      },
      //dom 属性
      domProps: {
        innerText: this.text || "默认"
      }
    })
  }

}
</script>

<style scoped>
.btn {
  width: 200px;
  height: 40px;
  color: white;
  transition: all 0.5s;
}
.btn:hove {
  background: chartreuse;
  cursor: pointer;
}
.btn-success {
  background: grenn;
}
.btn-danger {
  background: red;
}
.btn-waring {
  background: orange;
}
.normal {
  background: blue;
}
</style>