<!--Created by 熊超超 on 2020/6/2.-->
<template>
  <el-button :size="size" plain :type="type" :loading="btnLoading" @click="onClick">
    <span data-flex="cross:center" v-if="icon && !btnLoading">
      <xt-icon :size="12" class="m-r-6" :name="icon"/>
      <span v-if="text">{{text}}</span>
    </span>
    <span v-else>{{text}}</span>
  </el-button>
</template>

<script>
export default {
  name: 'XtButton',
  props: {
    size: String,
    type: {type: String, default: 'primary'},
    icon: String,
    text: String,
    loading: Boolean,
  },
  data() {
    return {
      btnLoading: false
    }
  },
  methods: {
    onClick() {
      if (this.btnLoading) return
      if (this.loading) {
        this.btnLoading = true
      }
      this.$emit('click', () => (this.btnLoading = false))
    }
  }
}
</script>

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