feat(Notify): support component call (#6453)

src/image-preview/README.zh-CN.md

@@ -2,11 +2,11 @@
 
 ### 介绍
 
-图片放大预览，支持函数调用和组件调用两种方式
+图片放大预览，支持函数调用和组件调用两种方式。
 
 ### 函数调用
 
-ImagePreview 是一个函数，调用函数后展示图片预览
+ImagePreview 是一个函数，调用函数后会直接在页面中展示图片预览界面。
 
 ```js
 import { ImagePreview } from 'vant';
@@ -16,7 +16,7 @@ ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
 
 ### 组件调用
 
-通过组件调用 ImagePreview 时，可以通过下面的方式进行注册
+通过组件调用 ImagePreview 时，可以通过下面的方式进行注册。
 
 ```js
 import Vue from 'vue';
@@ -37,7 +37,7 @@ export default {
 
 ### 基础用法
 
-直接传入图片数组，即可展示图片预览
+直接传入图片数组，即可展示图片预览。
 
 ```js
 ImagePreview([
@@ -48,7 +48,7 @@ ImagePreview([
 
 ### 传入配置项
 
-通过传入配置对象，可以指定初始图片的位置、监听关闭事件
+通过传入配置对象，可以指定初始图片的位置、监听关闭事件。
 
 ```js
 ImagePreview({
@@ -65,7 +65,7 @@ ImagePreview({
 
 ### 展示关闭按钮
 
-设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置
+设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
 
 ```js
 ImagePreview({
@@ -79,7 +79,7 @@ ImagePreview({
 
 ### 异步关闭
 
-通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览
+通过`asyncClose`属性可以开启异步关闭，开启后异步关闭后，只能通过实例上的 close 方法关闭图片预览。
 
 ```js
 const instance = ImagePreview({
@@ -97,7 +97,7 @@ setTimeout(() => {
 
 ### 组件调用
 
-如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件
+如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 `Vue.use` 注册组件。
 
 ```html
 <van-image-preview v-model="show" :images="images" @change="onChange">

src/notify/Notify.tsx

@@ -46,7 +46,7 @@ function Notify(
       class={[bem([props.type]), props.className]}
       {...inherit(ctx, true)}
     >
-      {props.message}
+      {slots.default?.() || props.message}
     </Popup>
   );
 }

src/notify/README.md

@@ -41,9 +41,9 @@ Notify({
 });
 ```
 
-### \$notify Method
+### Global Method
 
-After import the Notify component, the \$notify method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
+After import the Notify component, the `$notify` method is automatically mounted on Vue.prototype, making it easy to call within a vue component.
 
 ```js
 export default {
@@ -53,6 +53,34 @@ export default {
 };
 ```
 
+### Component Call
+
+```html
+<van-button type="primary" text="Component Call" @click="showNotify" />
+<van-notify v-model="show" type="success">
+  <van-icon name="bell" style="margin-right: 4px;" />
+  <span>Content</span>
+</van-notify>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    showNotify() {
+      this.show = true;
+      setTimeout(() => {
+        this.show = false;
+      }, 2000);
+    },
+  },
+};
+```
+
 ## API
 
 ### Methods

src/notify/README.zh-CN.md

@@ -1,12 +1,36 @@
 # Notify 消息提示
 
-### 引入
+### 介绍
+
+在页面顶部展示消息提示，支持函数调用和组件调用两种方式。
+
+### 函数调用
+
+Notify 是一个函数，调用后会直接在页面中弹出相应的消息提示。
+
+```js
+import { Notify } from 'vant';
+
+Notify('通知内容');
+```
+
+### 组件调用
+
+通过组件调用 Notify 时，可以通过下面的方式进行注册（从 2.8.5 版本开始支持）：
 
 ```js
 import Vue from 'vue';
 import { Notify } from 'vant';
 
+// 全局注册
 Vue.use(Notify);
+
+// 局部注册
+export default {
+  components: {
+    [Notify.Component.name]: Notify.Component,
+  },
+};
 ```
 
 ## 代码演示
@@ -19,7 +43,7 @@ Notify('通知内容');
 
 ### 通知类型
 
-支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
+支持 `primary`、`success`、`warning`、`danger` 四种通知类型，默认为 `danger`。
 
 ```js
 // 主要通知
@@ -37,7 +61,7 @@ Notify({ type: 'warning', message: '通知内容' });
 
 ### 自定义通知
 
-自定义消息通知的颜色和展示时长
+自定义消息通知的颜色和展示时长。
 
 ```js
 Notify({
@@ -52,9 +76,9 @@ Notify({
 });
 ```
 
-### 组件内调用
+### 全局方法
 
-引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 \$notify 方法，便于在组件内调用。
+引入 Notify 组件后，会自动在 Vue 的 prototype 上挂载 `$notify` 方法，便于在组件内调用。
 
 ```js
 export default {
@@ -64,6 +88,36 @@ export default {
 };
 ```
 
+### 组件调用
+
+如果需要在 Notify 内嵌入组件或其他自定义内容，可以使用组件调用的方式。
+
+```html
+<van-button type="primary" text="组件调用" @click="showNotify" />
+<van-notify v-model="show" type="success">
+  <van-icon name="bell" style="margin-right: 4px;" />
+  <span>通知内容</span>
+</van-notify>
+```
+
+```js
+export default {
+  data() {
+    return {
+      show: false,
+    };
+  },
+  methods: {
+    showNotify() {
+      this.show = true;
+      setTimeout(() => {
+        this.show = false;
+      }, 2000);
+    },
+  },
+};
+```
+
 ## API
 
 ### 方法

src/notify/demo/index.vue

@@ -42,6 +42,19 @@
         @click="showCustomDuration"
       />
     </demo-block>
+
+    <demo-block :title="t('componentCall')">
+      <van-button
+        type="primary"
+        :text="t('componentCall')"
+        @click="showComponentCall"
+      />
+
+      <van-notify v-model="show" type="success">
+        <van-icon name="bell" style="margin-right: 4px;" />
+        <span>{{ t('content') }}</span>
+      </van-notify>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -57,6 +70,7 @@ export default {
       notifyType: '通知类型',
       customColor: '自定义颜色',
       customNotify: '自定义配置',
+      componentCall: '组件调用',
       customDuration: '自定义时长',
     },
     'en-US': {
@@ -68,10 +82,17 @@ export default {
       notifyType: 'Notify Type',
       customColor: 'Custom Color',
       customNotify: 'Custom Notify',
+      componentCall: 'Component Call',
       customDuration: 'Custom Duration',
     },
   },
 
+  data() {
+    return {
+      show: false,
+    };
+  },
+
   methods: {
     showNotify() {
       this.$notify(this.t('content'));
@@ -98,6 +119,13 @@ export default {
         type,
       });
     },
+
+    showComponentCall() {
+      this.show = true;
+      setTimeout(() => {
+        this.show = false;
+      }, 2000);
+    },
   },
 };
 </script>

src/notify/index.less

@@ -1,6 +1,9 @@
 @import '../style/var';
 
 .van-notify {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   box-sizing: border-box;
   padding: @notify-padding;
   color: @notify-text-color;

src/notify/index.ts

@@ -89,6 +89,8 @@ Notify.install = () => {
   Vue.use(VanNotify as any);
 };
 
+Notify.Component = VanNotify;
+
 Vue.prototype.$notify = Notify;
 
 export default Notify;

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

@@ -21,5 +21,10 @@ exports[`renders demo correctly 1`] = `
     </button> <button class="van-button van-button--primary van-button--normal">
       <div class="van-button__content"><span class="van-button__text">自定义时长</span></div>
     </button></div>
+  <div><button class="van-button van-button--primary van-button--normal">
+      <div class="van-button__content"><span class="van-button__text">组件调用</span></div>
+    </button>
+    <!---->
+  </div>
 </div>
 `;

types/notify.d.ts

@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import { VanComponent } from './component';
 
 export type NotifyMessage = string | number;
 
@@ -30,6 +31,7 @@ export interface Notify {
   defaultOptions: NotifyOptions;
   setDefaultOptions(options: NotifyOptions): void;
   resetDefaultOptions(): void;
+  Component: typeof VanComponent;
 }
 
 declare module 'vue/types/vue' {