[improvement] rename packages dir to src (#3659)

src/button/demo/index.vue

@@ -0,0 +1,207 @@
+<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="danger"
+        :text="$t('plain')"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('hairline')">
+      <van-button
+        plain
+        hairline
+        type="primary"
+        :text="$t('hairlineButton')"
+      />
+      <van-button
+        plain
+        hairline
+        type="danger"
+        :text="$t('hairlineButton')"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('disabled')">
+      <van-button
+        disabled
+        type="primary"
+        :text="$t('disabled')"
+      />
+      <van-button
+        disabled
+        type="danger"
+        :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="danger"
+      />
+    </demo-block>
+
+    <demo-block :title="$t('shape')">
+      <van-button
+        type="primary"
+        square
+        :text="$t('square')"
+      />
+      <van-button
+        type="danger"
+        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-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: '加载中...'
+    },
+    '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...'
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.demo-button {
+  .van-button {
+    &--large {
+      margin-bottom: 15px;
+    }
+
+    &--small,
+    &--normal:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+
+  .van-doc-demo-block {
+    padding: 0 15px;
+  }
+
+  .van-doc-demo-block__title {
+    padding-left: 0;
+  }
+
+  &-row {
+    margin-bottom: 10px;
+  }
+}
+</style>

src/button/en-US.md

@@ -0,0 +1,106 @@
+# Button
+
+### Install
+
+``` javascript
+import { Button } from 'vant';
+
+Vue.use(Button);
+```
+
+## Usage
+
+### Type
+
+```html
+<van-button type="default">Default</van-button>
+<van-button type="primary">Primary</van-button>
+<van-button type="info">Info</van-button>
+<van-button type="danger">Danger</van-button>
+<van-button type="warning">Warning</van-button>
+```
+
+### Plain
+
+```html
+<van-button plain type="primary">Primary</van-button>
+<van-button plain type="danger">Danger</van-button>
+```
+
+### Hairline
+
+```html
+<van-button plain hairline type="primary">Hairline</van-button>
+<van-button plain hairline type="danger">Hairline</van-button>
+```
+
+### Disabled
+
+```html
+<van-button disabled type="primary">Diabled</van-button>
+<van-button disabled type="danger">Diabled</van-button>
+```
+
+### Loading
+
+```html 
+<van-button loading type="primary" />
+<van-button loading type="primary" loading-type="spinner" />
+<van-button loading type="danger" loading-text="Loading..." />
+```
+
+### Shape
+
+```html 
+<van-button square type="primary">Square</van-button>
+<van-button round type="danger">Round</van-button>
+```
+
+### Icon
+
+```html 
+<van-button icon="star-o" type="primary" />
+<van-button icon="star-o" type="primary">Button</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">Button</van-button>
+```
+
+### Size
+
+```html 
+<van-button type="primary" size="large">Large</van-button>
+<van-button type="primary" size="normal">Normal</van-button>
+<van-button type="primary" size="small">Small</van-button>
+<van-button type="primary" size="mini">Mini</van-button>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+|------|------|------|------|
+| type | Can be set to `primary` `info` `warning` `danger` | `String` | `default` |
+| size | Can be set to `large` `small` `mini` | `String` | `normal` |
+| text | Text | `String` | - |
+| icon | Left Icon | `String` | - |
+| tag | HTML Tag | `String` | `button` |
+| native-type | Native Type Attribute | `String` | `''` |
+| plain | Whether to be plain button | `Boolean` | `false` |
+| block | Whether to set display block | `Boolean` | `false` |
+| round | Whether to be round button | `Boolean` | `false` |
+| square | Whether to be square button | `Boolean` | `false` |
+| disabled | Whether to disable button | `Boolean` | `false` |
+| loading | Whether show loading status | `Boolean` | `false` |
+| loading-text | Loading text | `String` | - |
+| loading-type | Loading type, can be set to `spinner` | `String` | `circular` |
+| loading-size | Loading icon size | `String` | `20px` |
+| url | Link URL | `String` | - |
+| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
+| replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
+
+### Events
+
+| Event | Description | Arguments |
+|------|------|------|
+| click | Triggered when click button and not disabled or loading | event: Event |
+| touchstart | Triggered when touch start | event: TouchEvent |

src/button/index.less

@@ -0,0 +1,176 @@
+@import '../style/var';
+
+.van-button {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  height: @button-default-height;
+  margin: 0;
+  padding: 0;
+  font-size: @button-default-font-size;
+  line-height: @button-default-line-height;
+  text-align: center;
+  border-radius: @button-border-radius;
+  -webkit-appearance: none;
+  -webkit-text-size-adjust: 100%;
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background-color: @black;
+    border: inherit;
+    border-color: @black;
+    border-radius: inherit; /* inherit parent's border radius */
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+  &:active::before {
+    opacity: .1;
+  }
+
+  &--loading,
+  &--disabled {
+    &::before {
+      display: none;
+    }
+  }
+
+  &--default {
+    color: @button-default-color;
+    background-color: @button-default-background-color;
+    border: @button-border-width solid @button-default-border-color;
+  }
+
+  &--primary {
+    color: @button-primary-color;
+    background-color: @button-primary-background-color;
+    border: @button-border-width solid @button-primary-border-color;
+  }
+
+  &--info {
+    color: @button-info-color;
+    background-color: @button-info-background-color;
+    border: @button-border-width solid @button-info-border-color;
+  }
+
+  &--danger {
+    color: @button-danger-color;
+    background-color: @button-danger-background-color;
+    border: @button-border-width solid @button-danger-border-color;
+  }
+
+  &--warning {
+    color: @button-warning-color;
+    background-color: @button-warning-background-color;
+    border: @button-border-width solid @button-warning-border-color;
+  }
+
+  &--plain {
+    background-color: @button-plain-background-color;
+
+    &.van-button--primary {
+      color: @button-primary-background-color;
+    }
+
+    &.van-button--info {
+      color: @button-info-background-color;
+    }
+
+    &.van-button--danger {
+      color: @button-danger-background-color;
+    }
+
+    &.van-button--warning {
+      color: @button-warning-background-color;
+    }
+  }
+
+  &--large {
+    width: 100%;
+    height: @button-large-height;
+    line-height: @button-large-line-height;
+  }
+
+  &--normal {
+    padding: 0 15px;
+    font-size: @button-normal-font-size;
+  }
+
+  &--small {
+    min-width: @button-small-min-width;
+    height: @button-small-height;
+    padding: 0 8px;
+    font-size: @button-small-font-size;
+    line-height: @button-small-line-height;
+  }
+
+  &__loading {
+    display: inline-block;
+    vertical-align: top;
+  }
+
+  &--mini {
+    display: inline-block;
+    min-width: @button-mini-min-width;
+    height: @button-mini-height;
+    font-size: @button-mini-font-size;
+    line-height: @button-mini-line-height;
+
+    & + .van-button--mini {
+      margin-left: 5px;
+    }
+  }
+
+  &--block {
+    display: block;
+    width: 100%;
+  }
+
+  &--disabled {
+    opacity: @button-disabled-opacity;
+  }
+
+  &--round {
+    border-radius: @button-round-border-radius;
+  }
+
+  &--square {
+    border-radius: 0;
+  }
+
+  &__icon {
+    min-width: 1em;
+    font-size: 1.2em;
+    line-height: inherit;
+    vertical-align: top;
+  }
+
+  &__icon + &__text,
+  &__loading + &__text {
+    display: inline-block;
+    margin-left: 5px;
+    vertical-align: top;
+  }
+
+  &--hairline {
+    border-width: 0;
+
+    &::after {
+      border-color: inherit;
+      border-radius: @button-border-radius * 2;
+    }
+
+    &.van-button--round::after {
+      border-radius: @button-round-border-radius;
+    }
+
+    &.van-button--square::after {
+      border-radius: 0;
+    }
+  }
+}

src/button/index.tsx

@@ -0,0 +1,151 @@
+import { createNamespace } from '../utils';
+import { emit, inherit } from '../utils/functional';
+import { routeProps, RouteProps, functionalRoute } from '../utils/router';
+import Icon from '../icon';
+import Loading, { LoadingType } from '../loading';
+
+// Types
+import { CreateElement, RenderContext } from 'vue/types';
+import { DefaultSlots } from '../utils/types';
+
+export type ButtonType = 'default' | 'primary' | 'info' | 'warning' | 'danger';
+
+export type ButtonSize = 'large' | 'normal' | 'small' | 'mini';
+
+export type ButtonProps = RouteProps & {
+  tag: keyof HTMLElementTagNameMap | string;
+  type: ButtonType;
+  size: ButtonSize;
+  text?: string;
+  icon?: string;
+  block?: boolean;
+  plain?: boolean;
+  round?: boolean;
+  square?: boolean;
+  loading?: boolean;
+  hairline?: boolean;
+  disabled?: boolean;
+  nativeType?: string;
+  loadingSize: string;
+  loadingType?: LoadingType;
+  loadingText?: string;
+};
+
+export type ButtonEvents = {
+  onClick?(event: Event): void;
+};
+
+const [createComponent, bem] = createNamespace('button');
+
+function Button(
+  h: CreateElement,
+  props: ButtonProps,
+  slots: DefaultSlots,
+  ctx: RenderContext<ButtonProps>
+) {
+  const { tag, icon, type, disabled, loading, hairline, loadingText } = props;
+
+  function onClick(event: Event) {
+    if (!loading && !disabled) {
+      emit(ctx, 'click', event);
+      functionalRoute(ctx);
+    }
+  }
+
+  function onTouchstart(event: TouchEvent) {
+    emit(ctx, 'touchstart', event);
+  }
+
+  const classes = [
+    bem([
+      type,
+      props.size,
+      {
+        disabled,
+        hairline,
+        block: props.block,
+        plain: props.plain,
+        round: props.round,
+        square: props.square
+      }
+    ]),
+    { 'van-hairline--surround': hairline }
+  ];
+
+  function Content() {
+    const content = [];
+
+    if (loading) {
+      content.push(
+        <Loading
+          class={bem('loading')}
+          size={props.loadingSize}
+          type={props.loadingType}
+          color={type === 'default' ? undefined : ''}
+        />
+      );
+    } else if (icon) {
+      content.push(<Icon name={icon} class={bem('icon')} />);
+    }
+
+    let text;
+    if (loading) {
+      text = loadingText;
+    } else {
+      text = slots.default ? slots.default() : props.text;
+    }
+
+    if (text) {
+      content.push(<span class={bem('text')}>{text}</span>);
+    }
+
+    return content;
+  }
+
+  return (
+    <tag
+      class={classes}
+      type={props.nativeType}
+      disabled={disabled}
+      onClick={onClick}
+      onTouchstart={onTouchstart}
+      {...inherit(ctx)}
+    >
+      {Content()}
+    </tag>
+  );
+}
+
+Button.props = {
+  ...routeProps,
+  text: String,
+  icon: String,
+  block: Boolean,
+  plain: Boolean,
+  round: Boolean,
+  square: Boolean,
+  loading: Boolean,
+  hairline: Boolean,
+  disabled: Boolean,
+  nativeType: String,
+  loadingText: String,
+  loadingType: String,
+  tag: {
+    type: String,
+    default: 'button'
+  },
+  type: {
+    type: String,
+    default: 'default'
+  },
+  size: {
+    type: String,
+    default: 'normal'
+  },
+  loadingSize: {
+    type: String,
+    default: '20px'
+  }
+};
+
+export default createComponent<ButtonProps, ButtonEvents>(Button);

src/button/test/__snapshots__/demo.spec.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
+  </div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--hairline van-button--plain van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
+  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+    </button> <button class="van-button van-button--primary van-button--normal">
+      <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
+    </button> <button class="van-button van-button--danger van-button--normal">
+      <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span class="van-button__text">加载中...</span>
+    </button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
+        <!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
+        <!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon">
+        <div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <!---->
+      </i><span class="van-button__text">按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
+      大号按钮
+    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+      普通按钮
+    </span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">
+      小型按钮
+    </span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">
+      迷你按钮
+    </span></button></div>
+</div>
+`;

src/button/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`loading size 1`] = `
+<button class="van-button van-button--default van-button--normal">
+  <div class="van-loading van-loading--circular van-button__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(201, 201, 201); width: 10px; height: 10px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
+</button>
+`;

src/button/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import demoTest from '../../../test/demo-test';
+
+demoTest(Demo);

src/button/test/index.spec.js

@@ -0,0 +1,74 @@
+import { mount } from '../../../test/utils';
+import Button from '..';
+
+test('loading size', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      loading: true,
+      loadingSize: '10px'
+    }
+  });
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('click event', () => {
+  const onClick = jest.fn();
+  const wrapper = mount(Button, {
+    context: {
+      on: {
+        click: onClick
+      }
+    }
+  });
+
+  wrapper.trigger('click');
+  expect(onClick).toHaveBeenCalled();
+});
+
+test('not trigger click event when disabled', () => {
+  const onClick = jest.fn();
+  const wrapper = mount(Button, {
+    propsData: {
+      disabled: true
+    },
+    context: {
+      on: {
+        click: onClick
+      }
+    }
+  });
+
+  wrapper.trigger('click');
+  expect(onClick).toHaveBeenCalledTimes(0);
+});
+
+test('not trigger click event when loading', () => {
+  const onClick = jest.fn();
+  const wrapper = mount(Button, {
+    propsData: {
+      loading: true
+    },
+    context: {
+      on: {
+        click: onClick
+      }
+    }
+  });
+
+  wrapper.trigger('click');
+  expect(onClick).toHaveBeenCalledTimes(0);
+});
+
+test('touchstart event', () => {
+  const onTouchstart = jest.fn();
+  const wrapper = mount(Button, {
+    context: {
+      on: {
+        touchstart: onTouchstart
+      }
+    }
+  });
+
+  wrapper.trigger('touchstart');
+  expect(onTouchstart).toHaveBeenCalled();
+});

src/button/zh-CN.md

@@ -0,0 +1,123 @@
+# Button 按钮
+
+### 引入
+
+``` javascript
+import { Button } from 'vant';
+
+Vue.use(Button);
+```
+
+## 代码演示
+
+### 按钮类型
+
+支持`default`、`primary`、`info`、`warning`、`danger`五种类型，默认为`default`
+
+```html
+<van-button type="default">默认按钮</van-button>
+<van-button type="primary">主要按钮</van-button>
+<van-button type="info">信息按钮</van-button>
+<van-button type="warning">警告按钮</van-button>
+<van-button type="danger">危险按钮</van-button>
+```
+
+### 朴素按钮
+
+通过`plain`属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。
+
+```html
+<van-button plain type="primary">朴素按钮</van-button>
+<van-button plain type="danger">朴素按钮</van-button>
+```
+
+### 细边框
+
+设置`hairline`属性可以开启 0.5px 边框，基于伪类实现
+
+```html
+<van-button plain hairline type="primary">细边框按钮</van-button>
+<van-button plain hairline type="danger">细边框按钮</van-button>
+```
+
+### 禁用状态
+
+通过`disabled`属性来禁用按钮，禁用状态下按钮不可点击
+
+```html
+<van-button disabled type="primary">禁用状态</van-button>
+<van-button disabled type="danger">禁用状态</van-button>
+```
+
+### 加载状态
+
+通过`loading`属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过`loading-text`设置加载状态下的文字
+
+```html 
+<van-button loading type="primary" />
+<van-button loading type="primary" loading-type="spinner" />
+<van-button loading type="danger" loading-text="加载中..." />
+```
+
+### 按钮形状
+
+通过`square`设置方形按钮，通过`round`设置圆形按钮
+
+```html 
+<van-button square type="primary">方形按钮</van-button>
+<van-button round type="danger">圆形按钮</van-button>
+```
+
+### 图标按钮
+
+通过`icon`属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL
+
+```html 
+<van-button icon="star-o" type="primary" />
+<van-button icon="star-o" type="primary">按钮</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
+```
+
+### 按钮尺寸
+
+支持`large`、`normal`、`small`、`mini`四种尺寸，默认为`normal`
+
+```html 
+<van-button type="primary" size="large">大号按钮</van-button>
+<van-button type="primary" size="normal">普通按钮</van-button>
+<van-button type="primary" size="small">小型按钮</van-button>
+<van-button type="primary" size="mini">迷你按钮</van-button>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| type | 类型，可选值为 `primary` `info` `warning` `danger` | `String` | `default` | 1.6.6 |
+| size | 尺寸，可选值为 `large` `small` `mini` | `String` | `normal` | - |
+| text | 按钮文字 | `String` | - | - |
+| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | 2.0.0 |
+| tag | HTML 标签 | `String` | `button` | - |
+| native-type | 原生 button 标签 type 属性 | `String` | - | - |
+| block | 是否为块级元素 | `Boolean` | `false` | - |
+| plain | 是否为朴素按钮 | `Boolean` | `false` | 1.1.13 |
+| square | 是否为方形按钮 | `Boolean` | `false` | 1.2.0 |
+| round | 是否为圆形按钮 | `Boolean` | `false` | 1.3.4 |
+| disabled | 是否禁用按钮 | `Boolean` | `false` | - |
+| hairline | 是否使用 0.5px 边框 | `Boolean` | `false` | 1.6.11 |
+| loading | 是否显示为加载状态 | `Boolean` | `false` | - |
+| loading-text | 加载状态提示文字 | `String` | - | 1.6.3 |
+| loading-type | 加载图标类型，可选值为`spinner` | `String` | `circular` | 2.0.0 |
+| loading-size | 加载图标大小 | `String` | `20px` | 1.6.7 |
+| url | 跳转链接 | `String` | - | 1.6.5 |
+| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | 1.6.5 |
+| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | 1.6.5 |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+|------|------|------|
+| click | 点击按钮，且按钮状态不为加载或禁用时触发 | event: Event |
+| touchstart | 开始触摸按钮时触发 | event: TouchEvent |