<template>
  <div class="am-ope-btn" :style="{ width: `${width}px`, background: `${bgClr}` }">
    <svg class="am-icon" aria-hidden="true">
      <use :xlink:href="fontIcon" />
    </svg>
    <span>
      <slot> </slot>
    </span>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Prop } from "vue-property-decorator";
/**
 * @Description: 公共的图标按钮组件
 * @author LiuBo
 * @date 2021/2/1
 * @time 16:54
 */
@Component({
  name: "IconButton"
})
export default class IconButton extends Vue {
  @Prop({ default: 100 }) width: number | undefined; // 按钮宽度
  @Prop({ required: true }) fontIcon: string | undefined; // 按钮图标
  @Prop({ default: "#eef2fc" }) bgClr: string | undefined; // 按钮背景颜色
}
</script>

<style scoped lang="scss">
.am-ope-btn {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  &:active {
    opacity: 0.7;
  }
  & > span {
    color: rgb(102, 102, 102);
    font-size: 14px;
    font-weight: 500;
    margin-left: 0.5rem;
  }
  .am-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
    overflow: hidden;
  }
}
</style>
