vue 封装button按钮

当ui库得所有按钮不符合你们得要求时，这个时候就需要单独封装个button组件

<template>
  <div :class="[readonly?'readonly-hover':'',appointment?'appointment-style':'',ghost?'primary-ghost':'']" class="button-wrap">
    {{ text }}
  </div>
</template>

<script type="text/ecmascript-6">
export default {
//所有得样式都根据使用情况，根据props来传
  props: ['text', 'readonly', 'appointment', 'ghost'],
};
</script>

<style scoped lang="scss">
.button-wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    height: 40px;
    background-color: #FFFFFF;
    border-radius: 3px;
    cursor: pointer;
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
    transition: background-color 0.2s linear;
    &:hover{
      background-color: #57a3f3;
    }
}
.appointment-style{
  &:hover{
      background-color: #3F7DD7;
    }
}
.primary-ghost{
  color: #57a3f3;
  border: 1px solid #57a3f3;
  background-color: #fff;
  &:hover{
    background-color: rgba(81, 151, 252, 0.2);
  }
}
.readonly-hover{
  color:#AFC0D4;
  border-color: #AFC0D4;
}
.readonly-hover:hover{
  background: #FFFFFF;
    cursor:not-allowed;
}
</style>

在页面中调用时

 <VButton
      @click.native="getCode"
      :text="codeMsg"
      :readonly="sendFlag"
      style="width:35%"
    />