feat(Button): add loading slot (#6966)

src/button/README.md

@@ -132,3 +132,10 @@ Vue.use(Button);
 | --- | --- | --- |
 | click | Triggered when click button and not disabled or loading | _event: Event_ |
 | touchstart | Triggered when touch start | _event: TouchEvent_ |
+
+### Slots
+
+| Name              | Description         |
+| ----------------- | ------------------- |
+| default           | Default slot        |
+| loading `v2.10.1` | Custom loading icon |

src/button/README.zh-CN.md

@@ -155,3 +155,10 @@ Vue.use(Button);
 | ---------- | ---------------------------------------- | ------------------- |
 | click      | 点击按钮，且按钮状态不为加载或禁用时触发 | _event: Event_      |
 | touchstart | 开始触摸按钮时触发                       | _event: TouchEvent_ |
+
+### Slots
+
+| 名称              | 说明           |
+| ----------------- | -------------- |
+| default           | 按钮内容       |
+| loading `v2.10.1` | 自定义加载图标 |

src/button/index.tsx

@@ -10,7 +10,7 @@ import Loading, { LoadingType } from '../loading';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
+import { ScopedSlot, DefaultSlots } from '../utils/types';
 
 export type ButtonType = 'default' | 'primary' | 'info' | 'warning' | 'danger';
 
@@ -41,12 +41,16 @@ export type ButtonEvents = {
   onClick?(event: Event): void;
 };
 
+export type ButttonSlots = DefaultSlots & {
+  loading?: ScopedSlot;
+};
+
 const [createComponent, bem] = createNamespace('button');
 
 function Button(
   h: CreateElement,
   props: ButtonProps,
-  slots: DefaultSlots,
+  slots: ButttonSlots,
   ctx: RenderContext<ButtonProps>
 ) {
   const {
@@ -112,12 +116,16 @@ function Button(
 
     if (loading) {
       content.push(
-        <Loading
-          class={bem('loading')}
-          size={props.loadingSize}
-          type={props.loadingType}
-          color="currentColor"
-        />
+        slots.loading ? (
+          slots.loading()
+        ) : (
+          <Loading
+            class={bem('loading')}
+            size={props.loadingSize}
+            type={props.loadingType}
+            color="currentColor"
+          />
+        )
       );
     } else if (icon) {
       content.push(
@@ -188,4 +196,4 @@ Button.props = {
   },
 };
 
-export default createComponent<ButtonProps, ButtonEvents>(Button);
+export default createComponent<ButtonProps, ButtonEvents, ButttonSlots>(Button);

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

@@ -7,6 +7,12 @@ exports[`icon-prefix prop 1`] = `
 </button>
 `;
 
+exports[`loading slot 1`] = `
+<button class="van-button van-button--default van-button--normal van-button--loading">
+  <div class="van-button__content">Custom Loading</div>
+</button>
+`;
+
 exports[`loading-size prop 1`] = `
 <button class="van-button van-button--default van-button--normal van-button--loading">
   <div class="van-button__content">

src/button/test/index.spec.js

@@ -93,3 +93,16 @@ test('icon-prefix prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('loading slot', () => {
+  const wrapper = mount(Button, {
+    propsData: {
+      loading: true,
+    },
+    scopedSlots: {
+      loading: () => 'Custom Loading',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});