vant/src/button/demo/index.vue

<template>
  <demo-section>
    <demo-block :title="$t('type')">
      <div class="demo-button-row">
        <van-button type="default">{{ $t('default') }}</van-button>
        <van-button type="primary">{{ $t('primary') }}</van-button>
        <van-button type="info">{{ $t('info') }}</van-button>
      </div>
      <van-button type="danger">{{ $t('danger') }}</van-button>
      <van-button type="warning">{{ $t('warning') }}</van-button>
    </demo-block>

    <demo-block :title="$t('plain')">
      <van-button plain type="primary" :text="$t('plain')" />
      <van-button plain type="info" :text="$t('plain')" />
    </demo-block>

    <demo-block :title="$t('hairline')">
      <van-button plain hairline type="primary" :text="$t('hairlineButton')" />
      <van-button plain hairline type="info" :text="$t('hairlineButton')" />
    </demo-block>

    <demo-block :title="$t('disabled')">
      <van-button disabled type="primary" :text="$t('disabled')" />
      <van-button disabled type="info" :text="$t('disabled')" />
    </demo-block>

    <demo-block :title="$t('loadingStatus')">
      <van-button loading type="primary" />
      <van-button loading type="primary" loading-type="spinner" />
      <van-button loading :loading-text="$t('loadingText')" type="info" />
    </demo-block>

    <demo-block :title="$t('shape')">
      <van-button type="primary" square :text="$t('square')" />
      <van-button type="info" round :text="$t('round')" />
    </demo-block>

    <demo-block :title="$t('icon')">
      <van-button type="primary" icon="star-o" />
      <van-button type="primary" icon="star-o" :text="$t('button')" />
      <van-button
        plain
        type="primary"
        icon="https://img.yzcdn.cn/vant/logo.png"
        :text="$t('button')"
      />
    </demo-block>

    <demo-block :title="$t('size')">
      <van-button type="primary" size="large">{{ $t('large') }}</van-button>
      <van-button type="primary" size="normal">{{ $t('normal') }}</van-button>
      <van-button type="primary" size="small">{{ $t('small') }}</van-button>
      <van-button type="primary" size="mini">{{ $t('mini') }}</van-button>
    </demo-block>

    <demo-block :title="$t('blockElement')">
      <van-button type="primary" block>{{ $t('blockElement') }}</van-button>
    </demo-block>

    <demo-block :title="$t('router')">
      <van-button :text="$t('urlRoute')" type="primary" url="/vant/mobile.html" />
      <van-button :text="$t('vueRoute')" type="primary" to="index" />
    </demo-block>

    <demo-block :title="$t('customColor')">
      <van-button color="#7232dd" :text="$t('pure')" />
      <van-button plain color="#7232dd" :text="$t('pure')" />
      <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)" :text="$t('gradient')" />
    </demo-block>
  </demo-section>
</template>

<script>
export default {
  i18n: {
    'zh-CN': {
      type: '按钮类型',
      size: '按钮尺寸',
      icon: '图标按钮',
      loading: '加载状态',
      shape: '按钮形状',
      default: '默认按钮',
      primary: '主要按钮',
      info: '信息按钮',
      danger: '危险按钮',
      warning: '警告按钮',
      large: '大号按钮',
      normal: '普通按钮',
      small: '小型按钮',
      mini: '迷你按钮',
      plain: '朴素按钮',
      square: '方形按钮',
      round: '圆形按钮',
      hairline: '细边框',
      hairlineButton: '细边框按钮',
      loadingText: '加载中...',
      router: '页面导航',
      urlRoute: 'URL 跳转',
      vueRoute: '路由跳转',
      customColor: '自定义颜色',
      pure: '单色按钮',
      gradient: '渐变色按钮',
      blockElement: '块级元素',
    },
    'en-US': {
      type: 'Type',
      size: 'Size',
      icon: 'Icon',
      loading: 'Loading',
      shape: 'Shape',
      default: 'Default',
      primary: 'Primary',
      info: 'Info',
      danger: 'Danger',
      warning: 'Warning',
      large: 'Large',
      normal: 'Normal',
      small: 'Small',
      mini: 'Mini',
      plain: 'Plain',
      square: 'Square',
      round: 'Round',
      hairline: 'Hairline',
      hairlineButton: 'Hairline',
      loadingText: 'Loading...',
      router: 'Router',
      urlRoute: 'URL',
      vueRoute: 'Vue Router',
      customColor: 'Custom Color',
      pure: 'Pure',
      gradient: 'Gradient',
      blockElement: 'Block Element',
    },
  },
};
</script>

<style lang="less">
@import '../../style/var';

.demo-button {
  background: @white;

  .van-button {
    &--large {
      margin-bottom: @padding-md;
    }

    &--small,
    &--normal:not(:last-child) {
      margin-right: @padding-md;
    }
  }

  .van-doc-demo-block {
    padding: 0 @padding-md;
  }

  .van-doc-demo-block__title {
    padding-left: 0;
  }

  &-row {
    margin-bottom: @padding-sm;
  }
}
</style>