利用vant组件封装button

<template>
  <van-button
    class="i-button"
    type="default"
    round
    :class="classMap"
    :icon="icon"
    :size="size"
    :loading="loading"
    :loading-text="loadingText"
    :loading-type="loadingType"
    :loading-size="loadingSize"
    :disabled="disabled"
    @click="$emit('click', $event)"
    @touchstart="$emit('touchstart', $event)"
  >
    <slot />
  </van-button>
</template>
<script>
// 这里只提供了 van-button 部分功能, 其他功能需要使用时自行添加
// 参开文档  https://vant-contrib.gitee.io/vant/#/zh-CN/button
export default {
  props: {
    // default|primary|gradient|grey
    type: {
      type: String,
      default: 'default'
    },
    // 图标
    icon: {
      type: String,
      default: ''
    },
    // 是否显示为加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 加载状态提示文字
    loadingText: {
      type: String,
      default: ''
    },
    // 加载图标类型，可选值为 spinner
    loadingType: {
      type: String,
      default: 'circular'
    },
    // 加载图标大小
    loadingSize: {
      type: String,
      default: '20px'
    },
    // 是否禁用按钮
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classMap() {
      return {
        primary: this.type === 'primary',
        grey: this.type === 'grey',
        gradient: this.type === 'gradient'
      };
    },
    size() {
      return this.type === 'gradient' ? 'large' : 'small';
    }
  }
};
</script>
<style lang="less" scoped>
.i-button {
  font-size: 13px;
  color: #262626;
  border-color: #d9d9d9;
  padding: 4px 10px;
  background-color: #fff;

  .van-icon {
    font-size: 13px;
  }
  &:not(.gradient) {
    height: 26px;
    line-height: 26px;
  }
}
.primary {
  color: @red;
  background-color: @red-bg;
  border-color: @red-bg;
}

.grey {
  border-color: #f4f5f7;
  background-color: #f4f5f7;
}
.gradient {
  background: linear-gradient(to right, #e92f60, #f9792a);
  border: 1px solid transparent;
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
}
</style>

使用

  <i-button type="primary">切换</i-button>
    <i-button type="default">查看详情</i-button>
    <i-button type="grey" icon="plus">新增报修</i-button>
    <i-button type="gradient">渐变</i-button>