<template>
  <a href="javascript:;" class="e-btn"
  :id="id"
  :disabled="disabled"
  :markup="markup"
  :line="line"
  @click="handleClick
  ">
    <span v-if="btnSrc">
      <i><img :src="btnSrc" /></i>
      <slot></slot>
    </span>
    <span v-else-if="btnIcon&&iconName">
      <i :class="`e-${btnIcon} e-${btnIcon}-${iconName}`"></i>
      <slot></slot>
    </span>
    <span v-else>
      <slot></slot>
    </span>
  </a>
</template>
<script>
  export default{
    name:'emmm-button',
    props:{
      id: {
        type: String,
        default: null
      },
      disabled: {
        type: Boolean,
        default: false
      },
      markup: {
        type: String,
        default: 'default'
      },
      line:{
        type: Boolean,
        default: false
      },
      btnSrc:{
        type:String,
        default:null
      },
      btnIcon:{
        type:String,
        default:'font'
      },
      iconName:{
        type:String,
        default:null
      }
    },
    methods: {
      handleClick (e) {
        this.$emit('click',e)
      }
    }
  }
</script>
<style lang="postcss" scoped>
  @import './button.css';
</style>
