
<style scoped>
.wrapper {
  display: inline-block;
  position: relative;
}
.button {
  position: relative;
  display: flex;
  padding: 0 10px;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  background: linear-gradient(90deg,rgba(83,145,255,1) 0%,rgba(65,131,255,1) 100%);
  color: white;
  border-radius: 8px;
  box-sizing: border-box;
}
.button::after {
  border: none;
}
.noDisable::after {
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  pointer-events: none;
  background-color: #333;
  background-repeat: no-repeat;
  background-position: 50%;
  opacity: 0;
  transition: all .3s;
}
.noDisable:active {
  transform: translate(2px, 2px);
}
.noDisable:focus{
  outline: none;
}
.noDisable:active::after {
  opacity: 0.3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0s;
}
.text {
  line-height: 28px;
  font-size: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.large {
  width: 580px;
  height: 100px;
}
.normal {
  width: 176px;
  height: 78px;
  font-size: 30px;
}
.small {
  width: 132px;
  height: 66px;
}
.mini {
  width: 100px;
  height: 44px;
}
.disable-mask {
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.4);
}
.loading,
.loading:after {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}
.loading {
  position: relative;
  border-top: 5px solid rgba(255, 255, 255, 0.2);
  border-right: 5px solid rgba(255, 255, 255, 0.2);
  border-bottom: 5px solid rgba(255, 255, 255, 0.2);
  border-left: 5px solid #ffffff;
  transform: translateZ(0);
  animation: load8 1.1s infinite linear;
}
@keyframes load8 {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

</style>

<template>
  <div :class="['wrapper', size]">
    <button
      :open-type="openType"
      @getuserinfo="onGetUserInfo"
      @click="buttonClick"
      :disable="disable"
      :class="['button', size, isDisable]"
      :style="{
        'color': textColor || defaultTextColor,
        'border': plain ? '1px solid ' + textColor || defaultTextColor : 'none',
        'background': plain ? 'white' : backgroundColor,
        'box-shadow': !plain && !disable ? boxShadow : ''
      }"
    >
      <div v-show="loading" class="loading"></div>
      <div class="text" v-if='text'>{{text}}</div>
      <div v-show="disable" :class="['disable-mask', size]"></div>
    </button>
  </div>
</template>
<script>
export default {
  /**
   * text： 显示的文字
   * size: enums: [large, normal, small, mini]按钮预置大小
   * plain: 是否镂空
   * disable: 按钮是否禁用,
   * loading: 是否显示加载中动画,
   * openType: 微信开发能力
   * textColor：文字颜色
   * backgroundColor：按钮背景颜色
   * boxShadow：按钮阴影
  */
  props: {
    text: {
      type: String,
      default: () => ''
    },
    size: {
      type: String,
      default: () => 'normal'
    },
    plain: {
      type: Boolean,
      default: () => false
    },
    disable: {
      type: Boolean,
      default: () => false
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    openType: {
      type: String,
      default: () => undefined
    },
    textColor: {
      type: String,
      default: () => ''
    },
    backgroundColor: {
      type: String,
      default: () => 'linear-gradient(90deg,rgba(83,145,255,1) 0%,rgba(65,131,255,1) 100%)'
    },
    boxShadow: {
      type: String,
      default: () => '0px 3px 5px 0px rgba(62,99,203,0.22)'
    }
  },
  data: () => {},
  methods: {
    // 按钮点击
    buttonClick () {
      return (this.disable || this.loading) ? false : this.$emit('click', 'button click!')
    },
    // 微信开放能力
    onGetUserInfo (userInfo) {
      return this.disable ? false : this.$emit('onGetUserInfo', userInfo)
    }
  },
  computed: {
    isDisable () {
      return this.disable ? 'disable' : 'noDisable'
    },
    defaultTextColor () {
      return this.plain ? '#3072F6' : 'white'
    }
  }
}
</script>

