feat(Toast): add message slot (#11018)

packages/vant/src/toast/Toast.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
 
   emits: ['update:show'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     let timer: NodeJS.Timeout;
     let clickable = false;
 
@@ -118,6 +118,10 @@ export default defineComponent({
     const renderMessage = () => {
       const { type, message } = props;
 
+      if (slots.message) {
+        return <div class={bem('text')}>{slots.message()}</div>;
+      }
+
       if (isDef(message) && message !== '') {
         return type === 'html' ? (
           <div key={0} class={bem('text')} innerHTML={String(message)} />

packages/vant/src/toast/test/__snapshots__/index.spec.ts.snap

@@ -12,3 +12,17 @@ exports[`create a forbidClick toast 1`] = `
   </div>
 </transition-stub>
 `;
+
+exports[`should render message slot correctly 1`] = `
+<transition-stub>
+  <div role="dialog"
+       tabindex="0"
+       class="van-popup van-popup--center van-toast van-toast--middle van-toast--text"
+       style="z-index: 2007;"
+  >
+    <div class="van-toast__text">
+      Custom Message
+    </div>
+  </div>
+</transition-stub>
+`;

packages/vant/src/toast/test/index.spec.ts

@@ -88,3 +88,17 @@ test('should change loading icon size when using icon-size prop', async () => {
   expect(wrapper.find('.van-loading__spinner').style.width).toEqual('10px');
   expect(wrapper.find('.van-loading__spinner').style.height).toEqual('10px');
 });
+
+test('should render message slot correctly', async () => {
+  const wrapper = mount(Toast, {
+    props: {
+      show: true,
+    },
+    slots: {
+      message: () => 'Custom Message',
+    },
+  });
+
+  await later();
+  expect(wrapper.html()).toMatchSnapshot();
+});