<template>
  <div class="el-bio-svg">
      <span @click="onClick" :disabled="disabled" class="svg-p" :style="{color: color, fontSize: size}">
    <svg :class="svgClass" aria-hidden="true" :style="{width,height}">
      <use :xlink:href="iconName"/>
    </svg>
  </span>
  </div>
</template>

<script>
export default {
  name: 'BioSvg',

  props: {
    name: {
      type: String,
      required: true
    },

    className: {
      type: String,
      default: ''
    },

    size: {
      type: String
    },

    color: {
      type: String
    },

    width: {
      type: String,
      default: ''
    },

    height: {
      type: String,
      default: ''
    },

    disabled: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    iconName() {
      return `#icon-${this.name}`;
    },

    svgClass() {
      if (this.className) {
        return 'svg-icon ' + this.className;
      } else {
        return 'svg-icon';
      }
    }
  },

  methods: {
    onClick(e) {
      if (this.disabled) {
        if (e && e.preventDefault) {
          e.preventDefault(); // 非IE浏览器
        } else {
          window.event.returnValue = false;
        } // IE浏览器
      } else {
        this.$emit('click');
      }
    }
  }
};
</script>
