upd: doc && demo

src/config.json

@@ -183,8 +183,8 @@
         {
           "version": "3.0.0",
           "name": "Notify",
-          "taro": false,
           "tarodoc": true,
+          "taro": true,
           "type": "methods",
           "cName": "消息通知",
           "desc": "在页面顶部展示消息提示，支持函数调用和组件调用两种方式",

src/packages/__VUE/notify/demo.vue

@@ -1,60 +1,24 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell :showIcon="true" :isLink="true" @click="baseNotify('基础用法')">
-      <span>
-        <label>基础用法</label>
-      </span>
-    </nut-cell>
-    <h2>通知类型</h2>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="primaryNotify('主要通知')"
-    >
-      <span>
-        <label>主要通知</label>
-      </span>
-    </nut-cell>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="successNotify('成功通知')"
-    >
-      <span>
-        <label>成功通知</label>
-      </span>
-    </nut-cell>
-    <nut-cell :showIcon="true" :isLink="true" @click="errorNotify('危险通知')">
-      <span>
-        <label>危险通知</label>
-      </span>
-    </nut-cell>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="warningNotify('警告通知')"
-    >
-      <span>
-        <label>警告通知</label>
-      </span>
-    </nut-cell>
-    <h2>自定义样式</h2>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="cusBgNotify('自定义背景色和字体颜色')"
-    >
-      <span>
-        <label>自定义背景色和字体颜色</label>
-      </span>
-    </nut-cell>
-    <h2>自定义时长</h2>
-    <nut-cell :showIcon="true" :isLink="true" @click="timeNotify('自定义时长')">
-      <span>
-        <label>自定义时长</label>
-      </span>
-    </nut-cell>
+    <nut-cell-group title="基础用法">
+      <nut-cell is-Link @click="baseNotify('基础用法')">基础用法</nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="通知类型">
+      <nut-cell is-Link @click="primaryNotify('主要通知')">主要通知</nut-cell>
+      <nut-cell is-Link @click="successNotify('成功通知')">成功通知</nut-cell>
+      <nut-cell is-Link @click="errorNotify('危险通知')">危险通知</nut-cell>
+      <nut-cell is-Link @click="warningNotify('警告通知')">警告通知</nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="自定义样式">
+      <nut-cell is-Link @click="cusBgNotify('自定义背景色和字体颜色')">
+        自定义背景色和字体颜色
+      </nut-cell>
+    </nut-cell-group>
+    <nut-cell-group title="自定义时长">
+      <nut-cell is-Link @click="timeNotify('自定义时长')">
+        自定义时长
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 

src/packages/__VUE/notify/doc.md

@@ -76,19 +76,19 @@ export default {
     
 ### Props
     
-| 字段       | 说明                                     | 类型          | 默认值 |
-| ---------- | ---------------------------------------- | ------------- | ------ |
-| type       | 提示的信息                               | String        | 空     |
-| message    | 展示文案，支持通过\n换行                 | Boolean       | false  |
-| duration   | 展示时长(ms)，值为 0 时，notify 不会消失 | String        | 空     |
-| color      | 字体颜色                                 | String        | 空     |
-| background | 背景颜色                                 | String        | 空     |
-| class-name  | 自定义类名                               | String/Number | 1      |
+| 字段       | 说明                                                  | 类型          | 默认值   |
+|------------|-------------------------------------------------------|---------------|----------|
+| type       | 提示的信息类型（primary，success  ，danger，warning） | String        | 'danger' |
+| message    | 展示文案，支持通过\n换行                              | Boolean       | false    |
+| duration   | 展示时长(ms)，值为 0 时，notify 不会消失              | String        | 3000     |
+| color      | 字体颜色                                              | String        | 空       |
+| background | 背景颜色                                              | String        | 空       |
+| class-name | 自定义类名                                            | String/Number | 1        |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| on-click  | 点击事件回调       | 无       |
-| on-close  | 关闭事件回调       | 无       |
+| 事件名 | 说明         | 回调参数 |
+|--------|--------------|----------|
+| click  | 点击事件回调 | 无       |
+| closed | 关闭事件回调 | 无       |
     

src/packages/__VUE/notify/doc.taro.md

@@ -7,88 +7,115 @@
 ### 安装
 ``` javascript
 import { createApp } from 'vue';
-import { Notify } from '@nutui/nutui';
+import { Notify } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(Notify);
 ```    
-## 基本用法
+## 使用示例
 
-```javascript
+``` html 
+<nut-cell-group :title="baseState.state.desc">
+  <nut-cell is-Link @click="baseState.methods.cellClick">基础用法</nut-cell>
+  <nut-notify @click="onClick" @closed="onClosed" v-model:visible="baseState.state.show"
+    :msg="baseState.state.desc" />
+</nut-cell-group>
+
+<nut-cell-group title="通知类型">
+  <nut-notify @click="onClick" @closed="onClosed" :type="notifyState.state.type"
+    v-model:visible="notifyState.state.show" :msg="notifyState.state.desc" />
+  <nut-cell is-Link @click="notifyState.methods.cellClick('primary','主要通知')">主要通知</nut-cell>
+  <nut-cell is-Link @click="notifyState.methods.cellClick('success','成功通知')">成功通知</nut-cell>
+  <nut-cell is-Link @click="notifyState.methods.cellClick('danger','危险通知')">危险通知</nut-cell>
+  <nut-cell is-Link @click="notifyState.methods.cellClick('warning','警告通知')">警告通知</nut-cell>
+</nut-cell-group>
+
+<nut-cell-group title="自定义样式">
+  <nut-notify @click="onClick" @closed="onClosed" color='#ad0000' background='#ffe1e1'
+    :type="customState.state.type" v-model:visible="customState.state.show" :msg="customState.state.desc"
+    :duration="customState.state.duration" />
+  <nut-cell is-Link @click="customState.methods.cellClick('primary','自定义背景色和字体颜色')"> 自定义背景色和字体颜色
+  </nut-cell>
+  <nut-cell is-Link @click="customState.methods.cellClick('primary','自定义时长5s',5000)"> 自定义时长5s
+  </nut-cell>
+</nut-cell-group>
+```
+``` javascript
+import { reactive } from 'vue';
 export default {
-  mounted() {
-      Notify.text('通知内容', {
-        onClosed() {
-          console.log('close');
-        },
-        onClick: () => {
-          console.log('click');
+  setup() {
+    const onClosed = () => console.log('closed');
+    const onClick = () => console.log('click');
+
+    const baseState = {
+      state: reactive({
+        show: false,
+        desc: '基础用法'
+      }),
+      methods: {
+        cellClick() {
+          baseState.state.show = true;
         }
-      });
+      }
+    };
+
+    const notifyState = {
+      state: reactive({
+        show: false,
+        desc: '',
+        type: 'primary'
+      }),
+      methods: {
+        cellClick(type: string, desc: string) {
+          notifyState.state.show = true;
+          notifyState.state.type = type;
+          notifyState.state.desc = desc;
+        }
+      }
+    };
+    const customState = {
+      state: reactive({
+        show: false,
+        desc: '',
+        type: 'primary',
+        duration: 3000
+      }),
+      methods: {
+        cellClick(type: string, desc: string, duration: number) {
+          customState.state.show = true;
+          customState.state.type = type;
+          customState.state.desc = desc;
+          customState.state.duration = duration;
+        }
+      }
+    };
+    return {
+      baseState,
+      notifyState,
+      customState,
+      onClosed,
+      onClick
+    };
   }
-}
-```
-## 通知类型
-### 主要通知
-```javascript
-    mounted(){
-      Notify.primary('通知内容');
-    }
-```
-### 成功通知
-```javascript
-    mounted(){
-      Notify.success('通知内容');
-    }
-```
-### 危险通知
-```javascript
-    mounted(){
-      Notify.danger('通知内容');
-    }
-```
-### 警告通知
-```javascript
-    mounted(){
-      Notify.warn('通知内容');
-    }
-```
-## 自定义
-### 自定义样式
-```javascript
-    mounted(){
-      Notify.text(val, {
-        color: '#ad0000',
-        background: '#ffe1e1'
-      });
-    }
-```
-### 自定义时长
-```javascript
-    mounted(){
-      Notify.text(val, {
-        duration: 10000
-      });
-    }
-```
-    
-## API
-    
+};
+``` 
+
+
 ### Props
     
-| 字段       | 说明                                     | 类型          | 默认值 |
-| ---------- | ---------------------------------------- | ------------- | ------ |
-| type       | 提示的信息                               | String        | 空     |
-| message    | 展示文案，支持通过\n换行                 | Boolean       | false  |
-| duration   | 展示时长(ms)，值为 0 时，notify 不会消失 | String        | 空     |
-| color      | 字体颜色                                 | String        | 空     |
-| background | 背景颜色                                 | String        | 空     |
-| class-name  | 自定义类名                               | String/Number | 1      |
+| 字段       | 说明                                                  | 类型    | 默认值   |
+|------------|-------------------------------------------------------|---------|----------|
+| type       | 提示的信息类型（primary，success  ，danger，warning） | String  | 'danger' |
+| message    | 展示文案，支持通过\n换行                              | Boolean | false    |
+| duration   | 展示时长(ms)，值为 0 时，notify 不会消失              | String  | 3000     |
+| color      | 字体颜色                                              | String  | 空       |
+| background | 背景颜色                                              | String  | 空       |
+| class-name | 自定义类名                                            | String  |          |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数     |
-|--------|----------------|--------------|
-| on-click  | 点击事件回调       | 无       |
-| on-close  | 关闭事件回调       | 无       |
+| 事件名 | 说明         | 回调参数 |
+|--------|--------------|----------|
+| click  | 点击事件回调 | 无       |
+| closed | 关闭事件回调 | 无       |
     

src/packages/__VUE/notify/index.scss

@@ -8,6 +8,18 @@
   z-index: 9999;
 }
 
+.nut-fade-enter-active {
+  transition: opacity 1s;
+}
+
+.nut-fade-leave-active {
+  transition: opacity 1s;
+}
+
+.nut-fade-enter-from,
+.nut-fade-leave-to {
+  opacity: 0;
+}
 .nut-notify {
   box-sizing: border-box;
   padding: $notify-padding;

src/packages/__VUE/notify/index.taro.vue

@@ -0,0 +1,94 @@
+<template>
+  <Transition name="nut-fade" @after-leave="onAfterLeave">
+    <view
+      :class="['popup-top', 'nut-notify', `nut-notify--${type}`, { className }]"
+      :style="{ color: color, background: background }"
+      v-show="visible"
+      @click="onClick"
+    >
+      <template v-if="$slots.default">
+        <slot></slot>
+      </template>
+      <template v-else>{{ msg }}</template>
+    </view>
+  </Transition>
+</template>
+<script lang="ts">
+import { watch } from 'vue';
+import { createComponent } from '../../utils/create';
+import Popup from '../popup/index.taro.vue';
+const { componentName, create } = createComponent('notify');
+
+export default create({
+  components: {
+    [Popup.name]: Popup
+  },
+  props: {
+    id: String,
+    color: { type: String, default: '' },
+    msg: { type: Number, default: '' },
+    duration: { type: Number, default: 3000 },
+    className: {
+      type: String,
+      default: ''
+    },
+    background: { type: String, default: '' },
+    type: {
+      type: String,
+      default: 'danger'
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'closed', 'click'],
+  setup(props, { emit }) {
+    let timer: null | number = null;
+
+    const onClick = () => {
+      emit('click');
+    };
+    const clearTimer = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const hide = () => {
+      emit('update:visible', false);
+      emit('closed');
+    };
+
+    watch(
+      () => props.visible,
+      (value: boolean) => {
+        if (value) {
+          show();
+        }
+      }
+    );
+
+    const show = () => {
+      clearTimer();
+      if (props.duration) {
+        timer = setTimeout(() => {
+          hide();
+        }, props.duration);
+      }
+    };
+
+    const onAfterLeave = () => {
+      if (props.visible) {
+        clearTimer();
+        hide();
+      }
+    };
+    return { hide, onAfterLeave, onClick };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

src/packages/__VUE/toast/doc.taro.md

@@ -10,84 +10,81 @@
 
 ``` javascript
 import { createApp } from 'vue';
-import { Toast } from '@nutui/nutui';
+import { Toast } from '@nutui/nutui@taro';
 
 const app = createApp();
 app.use(Toast);
 ```
 
-## 代码演示
+## 代码示例
 
-### 基本用法
-
-文字提示
-```javascript
-Toast.text('网络失败，请稍后再试~');
-```
-
-成功提示
-
-```javascript
-Toast.success('成功提示');
+``` html
+<nut-toast :msg="page.state.msg" v-model:visible="page.state.show" :type="page.state.type" @closed="page.methods.onClosed" :cover="page.state.cover" />
+<nut-cell title="Text 文字提示" is-link @click="page.methods.openToast('text','网络失败，请稍后再试~')"></nut-cell>
+<nut-cell title="Success 成功提示" is-link @click="page.methods.openToast('success','成功提示')"></nut-cell>
+<nut-cell title="Error 失败提示" is-link @click="page.methods.openToast('fail','失败提示')"></nut-cell>
+<nut-cell title="Warning 警告提示" is-link @click="page.methods.openToast('warn','警告提示')"></nut-cell>
+<nut-cell title="Loading 加载提示" is-link @click="page.methods.openToast('loading','加载中')"></nut-cell>
+<nut-cell title="Loading 带白色背景遮罩" is-link @click="page.methods.openToast('loading','加载中',true)"></nut-cell>
 ```
-
-失败提示
-
-```javascript
-Toast.fail('失败提示');
-```
-
-警告提示
-
-```javascript
-Toast.warn('警告提示');
-```
-
-加载提示
-
-```javascript
-Toast.loading('加载中');
-```
-
-##¥ 支持在JS模块中导入使用
-```javascript
-import { Toast } from "@nutui/nutui";
-Toast.text('在js模块中使用');
-// 返回实例，可以手动调用实例中的hide方法关闭提示
-const toast = Toast.loading('在js模块中使用');
-toast.hide();
+``` javascript
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const page = {
+      state: reactive({
+        msg: 'toast',
+        type: 'text',
+        show: false,
+        cover: false
+      }),
+      methods: {
+        openToast: (type: string, msg: string, cover: boolean = false) => {
+          page.state.show = true;
+          page.state.msg = msg;
+          page.state.type = type;
+          page.state.cover = cover;
+        },
+        onClosed: () => console.log('closed')
+      }
+    };
+    return {
+      page
+    };
+  }
+};
 ```
+### 基本用法
 
 
 ### API
-| 方法名                    | 说明                                                                    | 参数            | 返回值     |
-| ------------------------- | ----------------------------------------------------------------------- | --------------- | ---------- |
-| Toast.text                | 展示文字提示                                                            | options/message | toast 实例 |
-| Toast.success             | 展示成功提示                                                            | options/message | toast 实例 |
-| Toast.fail                | 展示失败提示                                                            | options/message | toast 实例 |
-| Toast.warn                | 展示警告提示                                                            | options/message | toast 实例 |
-| Toast.hide                | 关闭提示                                                                | force:boolean   | void       |
-| Toast.loading             | 展示加载提示                                                            | options/message | toast 实例 |
-
-## Options
-
-| 字段                | 说明                                                                          | 类型          | 默认值                        |
-| ------------------- | ----------------------------------------------------------------------------- | ------------- | ----------------------------- |
-| msg                 | 消息文本内容,支持传入HTML                                                     | String/VNode  | ""                            |
-| id                  | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number | -                             |
-| duration            | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0）       | Number        | 2000                          |
-| center              | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
-| bottom              | 距页面底部的距离（像素），option.center为false时生效                          | Number       | 30                          |
-| text-align-center     | 多行文案是否居中                                                              | Boolean       | true                          |
-| bg-color             | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"       |
-| custom-class         | 自定义类名                                                                    | String        | ""                            |
-| icon                | 自定义图标，**支持图片链接或base64格式**                                        | String        | ""                            |
-| size                | 文案尺寸，**small**/**base**/**large**三选一                                                  | String        | "base"                        |
-| cover               | 是否显示遮罩层，loading类型默认显示                                           | Boolean       | loading类型true/其他类型false |
-| cover-color          | 遮罩层颜色，默认透明                                                          | String        | "rgba(0,0,0,0)"               |
-| loading-rotate       | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
-| on-close             | 关闭时触发的事件                                                              | function      | null                          |
+| 方法名        | 说明         | 参数            | 返回值     |
+|---------------|--------------|-----------------|------------|
+| Toast.text    | 展示文字提示 | options/message | toast 实例 |
+| Toast.success | 展示成功提示 | options/message | toast 实例 |
+| Toast.fail    | 展示失败提示 | options/message | toast 实例 |
+| Toast.warn    | 展示警告提示 | options/message | toast 实例 |
+| Toast.hide    | 关闭提示     | force:boolean   | void       |
+| Toast.loading | 展示加载提示 | options/message | toast 实例 |
+
+## Props
+
+| 字段                   | 说明                                                                          | 类型          | 默认值                        |
+|------------------------|-------------------------------------------------------------------------------|---------------|-------------------------------|
+| msg                    | 消息文本内容,支持传入HTML                                                     | String/VNode  | ""                            |
+| duration               | 展示时长（毫秒）<br>值为 0 时，toast 不会自动消失（loading类型默认为0）       | Number        | 2000                          |
+| center                 | 是否展示在页面中部（为false时展示在底部）                                     | Boolean       | true                          |
+| bottom                 | 距页面底部的距离（像素），center为false时生效                                 | Number        | 30                            |
+| text-align-center      | 多行文案是否居中                                                              | Boolean       | true                          |
+| bg-color               | 背景颜色（透明度）                                                            | String        | "rgba(0, 0, 0, 0.8)"          |
+| custom-class           | 自定义类名                                                                    | String        | ""                            |
+| icon                   | 自定义图标，**对应icon组件，支持图片链接**                                    | String        | ""                            |
+| size                   | 文案尺寸，**small**/**base**/**large**三选一                                  | String        | "base"                        |
+| cover                  | 是否显示遮罩层，loading类型默认显示                                           | Boolean       | loading类型true/其他类型false |
+| cover-color            | 遮罩层颜色，默认透明                                                          | String        | "rgba(0,0,0,0)"               |
+| loading-rotate         | loading图标是否旋转，仅对loading类型生效                                      | Boolean       | true                          |
+| on-close               | 关闭时触发的事件                                                              | function      | null                          |
 | close-on-click-overlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
-| toast-style          | 提示框style                                                        | object       | {}                         |
-| toast-class          | 提示框class                                                        | String       | ""                         |
+| toast-style            | 提示框style                                                                   | object        | {}                            |
+| toast-class            | 提示框class                                                                   | String        | ""                            |
 

src/packages/__VUE/toast/index.taro.vue

@@ -0,0 +1,184 @@
+<template>
+  <Transition name="toast-fade" @after-leave="onAfterLeave">
+    <view
+      :class="toastBodyClass"
+      v-show="visible"
+      :style="{
+        bottom: center ? 'auto' : bottom + 'px',
+        'background-color': coverColor
+      }"
+      @click="clickCover"
+    >
+      <template v-if="$slots.default">
+        <slot></slot>
+      </template>
+      <template v-else>
+        <view
+          class="nut-toast-inner"
+          :style="{
+            'text-align': textAlignCenter ? 'center' : 'left',
+            'background-color': bgColor
+          }"
+        >
+          <view v-if="hasIcon" class="nut-toast-icon-wrapper">
+            <nut-icon size="20" color="#ffffff" :name="iconName"></nut-icon>
+          </view>
+          <view class="nut-toast-text" v-html="msg"></view>
+        </view>
+      </template>
+    </view>
+  </Transition>
+</template>
+<script>
+import { computed, watch } from 'vue';
+import { createComponent } from '../../utils/create';
+const { create } = createComponent('toast');
+import Icon from '../icon/index.vue';
+export default create({
+  components: {
+    [Icon.name]: Icon
+  },
+  props: {
+    id: String,
+    msg: String,
+    duration: {
+      type: Number,
+      default: 2000
+    },
+    center: {
+      type: Boolean,
+      default: true
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    customClass: String,
+    bottom: {
+      type: Number,
+      default: 30
+    },
+    size: {
+      type: [String, Number],
+      default: 'base'
+    },
+    icon: String,
+    textAlignCenter: {
+      type: Boolean,
+      default: true
+    },
+    loadingRotate: {
+      type: Boolean,
+      default: true
+    },
+    bgColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, .8)'
+    },
+
+    onClose: Function,
+    unmount: Function,
+    cover: {
+      type: Boolean,
+      default: false
+    },
+    coverColor: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0)'
+    },
+    closeOnClickOverlay: {
+      type: Boolean,
+      default: false
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'closed'],
+  setup(props, { emit }) {
+    let timer;
+    const clearTimer = () => {
+      if (timer) {
+        clearTimeout(timer);
+        timer = null;
+      }
+    };
+    const hide = () => {
+      emit('update:visible', false);
+      emit('closed');
+    };
+    const show = () => {
+      clearTimer();
+      if (props.duration) {
+        timer = setTimeout(() => {
+          hide();
+        }, props.duration);
+      }
+    };
+    const clickCover = () => {
+      if (props.closeOnClickOverlay) {
+        hide();
+      }
+    };
+
+    watch(
+      () => props.visible,
+      (val) => {
+        if (val) {
+          show();
+        }
+      }
+    );
+
+    const hasIcon = computed(() => {
+      if (props.type !== 'text') {
+        return true;
+      } else {
+        return !!props.icon;
+      }
+    });
+    const iconName = computed(() => {
+      if (props.icon) {
+        return props.icon;
+      } else {
+        return {
+          success: 'success',
+          fail: 'failure',
+          warn: 'tips',
+          loading: 'loading'
+        }[props.type];
+      }
+    });
+    const toastBodyClass = computed(() => {
+      return [
+        'nut-toast',
+        { 'nut-toast-center': props.center },
+        { 'nut-toast-has-icon': hasIcon.value },
+        { 'nut-toast-cover': props.cover },
+        { 'nut-toast-loading': props.type === 'loading' },
+        props.customClass,
+        'nut-toast-' + props.size
+      ];
+    });
+
+    const onAfterLeave = () => {
+      if (props.visible) {
+        clearTimer();
+        hide();
+      }
+    };
+
+    return {
+      clickCover,
+      hasIcon,
+      iconName,
+      toastBodyClass,
+      onAfterLeave
+    };
+  }
+});
+</script>
+<style lang="scss">
+@import 'index.scss';
+</style>

src/sites/mobile-taro/vue/src/app.config.ts

@@ -1,5 +1,7 @@
 export default {
   pages: [
+    'pages/toast/index',
+    'pages/notify/index',
     'pages/dialog/index',
     'pages/range/index',
     'pages/picker/index',
@@ -34,7 +36,7 @@ export default {
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
-    navigationBarTitleText: 'WeChat',
+    navigationBarTitleText: 'NutUI',
     navigationBarTextStyle: 'black'
   }
 };

src/sites/mobile-taro/vue/src/pages/notify/index.vue

@@ -1,65 +1,131 @@
 <template>
   <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell :showIcon="true" :isLink="true" @click="baseNotify('基础用法')">
-      <span>
-        <label>基础用法</label>
-      </span>
-    </nut-cell>
-    <h2>通知类型</h2>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="primaryNotify('主要通知')"
-    >
-      <span>
-        <label>主要通知</label>
-      </span>
-    </nut-cell>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="successNotify('成功通知')"
-    >
-      <span>
-        <label>成功通知</label>
-      </span>
-    </nut-cell>
-    <nut-cell :showIcon="true" :isLink="true" @click="errorNotify('危险通知')">
-      <span>
-        <label>危险通知</label>
-      </span>
-    </nut-cell>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="warningNotify('警告通知')"
-    >
-      <span>
-        <label>警告通知</label>
-      </span>
-    </nut-cell>
-    <h2>自定义样式</h2>
-    <nut-cell
-      :showIcon="true"
-      :isLink="true"
-      @click="cusBgNotify('自定义背景色和字体颜色')"
-    >
-      <span>
-        <label>自定义背景色和字体颜色</label>
-      </span>
-    </nut-cell>
-    <h2>自定义时长</h2>
-    <nut-cell :showIcon="true" :isLink="true" @click="timeNotify('自定义时长')">
-      <span>
-        <label>自定义时长</label>
-      </span>
-    </nut-cell>
+    <nut-cell-group :title="baseState.state.desc">
+      <nut-cell is-Link @click="baseState.methods.cellClick">{{
+        baseState.state.desc
+      }}</nut-cell>
+      <nut-notify
+        @click="onClick"
+        @closed="onClosed"
+        v-model:visible="baseState.state.show"
+        :msg="baseState.state.desc"
+      />
+    </nut-cell-group>
+
+    <nut-cell-group title="通知类型">
+      <nut-notify
+        @click="onClick"
+        @closed="onClosed"
+        :type="notifyState.state.type"
+        v-model:visible="notifyState.state.show"
+        :msg="notifyState.state.desc"
+      />
+      <nut-cell
+        is-Link
+        @click="notifyState.methods.cellClick('primary', '主要通知')"
+        >主要通知</nut-cell
+      >
+      <nut-cell
+        is-Link
+        @click="notifyState.methods.cellClick('success', '成功通知')"
+        >成功通知</nut-cell
+      >
+      <nut-cell
+        is-Link
+        @click="notifyState.methods.cellClick('danger', '危险通知')"
+        >危险通知</nut-cell
+      >
+      <nut-cell
+        is-Link
+        @click="notifyState.methods.cellClick('warning', '警告通知')"
+        >警告通知</nut-cell
+      >
+    </nut-cell-group>
+    <nut-cell-group title="自定义样式">
+      <nut-notify
+        @click="onClick"
+        @closed="onClosed"
+        color="#ad0000"
+        background="#ffe1e1"
+        :type="customState.state.type"
+        v-model:visible="customState.state.show"
+        :msg="customState.state.desc"
+        :duration="customState.state.duration"
+      />
+      <nut-cell
+        is-Link
+        @click="
+          customState.methods.cellClick('primary', '自定义背景色和字体颜色')
+        "
+      >
+        自定义背景色和字体颜色
+      </nut-cell>
+      <nut-cell
+        is-Link
+        @click="customState.methods.cellClick('primary', '自定义时长5s', 5000)"
+      >
+        自定义时长5s
+      </nut-cell>
+    </nut-cell-group>
   </div>
 </template>
 
 <script lang="ts">
+import { reactive } from 'vue';
 export default {
-  setup() {}
+  setup() {
+    const onClosed = () => console.log('closed');
+    const onClick = () => console.log('click');
+
+    const baseState = {
+      state: reactive({
+        show: false,
+        desc: '基础用法'
+      }),
+      methods: {
+        cellClick() {
+          baseState.state.show = true;
+        }
+      }
+    };
+
+    const notifyState = {
+      state: reactive({
+        show: false,
+        desc: '',
+        type: 'primary'
+      }),
+      methods: {
+        cellClick(type: string, desc: string) {
+          notifyState.state.show = true;
+          notifyState.state.type = type;
+          notifyState.state.desc = desc;
+        }
+      }
+    };
+    const customState = {
+      state: reactive({
+        show: false,
+        desc: '',
+        type: 'primary',
+        duration: 3000
+      }),
+      methods: {
+        cellClick(type: string, desc: string, duration: number) {
+          customState.state.show = true;
+          customState.state.type = type;
+          customState.state.desc = desc;
+          customState.state.duration = duration;
+        }
+      }
+    };
+    return {
+      baseState,
+      notifyState,
+      customState,
+      onClosed,
+      onClick
+    };
+  }
 };
 </script>

src/sites/mobile-taro/vue/src/pages/toast/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+  navigationBarTitleText: 'Toast'
+};

src/sites/mobile-taro/vue/src/pages/toast/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="demo">
+    <h2>基本用法</h2>
+    <nut-toast
+      :msg="page.state.msg"
+      v-model:visible="page.state.show"
+      :type="page.state.type"
+      @closed="page.methods.onClosed"
+      :cover="page.state.cover"
+    />
+    <nut-cell
+      title="Text 文字提示"
+      is-link
+      @click="page.methods.openToast('text', '网络失败，请稍后再试~')"
+    ></nut-cell>
+    <nut-cell
+      title="Success 成功提示"
+      is-link
+      @click="page.methods.openToast('success', '成功提示')"
+    ></nut-cell>
+    <nut-cell
+      title="Error 失败提示"
+      is-link
+      @click="page.methods.openToast('fail', '失败提示')"
+    ></nut-cell>
+    <nut-cell
+      title="Warning 警告提示"
+      is-link
+      @click="page.methods.openToast('warn', '警告提示')"
+    ></nut-cell>
+    <nut-cell
+      title="Loading 加载提示"
+      is-link
+      @click="page.methods.openToast('loading', '加载中')"
+    ></nut-cell>
+    <nut-cell
+      title="Loading 带白色背景遮罩"
+      is-link
+      @click="page.methods.openToast('loading', '加载中', true)"
+    ></nut-cell>
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive } from 'vue';
+export default {
+  setup() {
+    const page = {
+      state: reactive({
+        msg: 'toast',
+        type: 'text',
+        show: false,
+        cover: false
+      }),
+      methods: {
+        openToast: (type: string, msg: string, cover: boolean = false) => {
+          page.state.show = true;
+          page.state.msg = msg;
+          page.state.type = type;
+          page.state.cover = cover;
+        },
+        onClosed: () => console.log('closed')
+      }
+    };
+    return {
+      page
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>