<template>
  <div class="icon-text">
    <Icon :type="icon" :color="color" :size="iconSize" />
    <span class="attr-label" :style="myStyle">{{text}}</span>
  </div>
</template>
<script>
  export default {
    props: {
      icon: {
        type: String,
        default:'md-apps'
      },
      color: {
        type: String,
        default:'blue'
      },
      text: {
        type: String,
        default:'文本内容'
      },
      textSize: {
        type: Number,
        default:16
      },
      iconSize: {
        type: Number,
        default:25
      }
    },
    computed: {
      myStyle() {
        return "font-size:" + this.textSize + "px;";
        //return "";
      }
    }
  }
</script>
<style>

  .icon-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    /*justify-content:center;*/
  }

    .icon-text .attr-label {
      font-size: 16px;
      font-weight:bold;
      margin-left: 8px;
      user-select:none !important;
    }
</style>
