feat: taro notify

src/config.json

@@ -177,7 +177,7 @@
         {
           "version": "3.0.0",
           "name": "Notify",
-          "taro": false,
+          "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

@@ -0,0 +1,121 @@
+#  Notify 消息通知
+
+### 介绍
+    
+在页面顶部展示消息提示
+    
+### 安装
+``` javascript
+import { createApp } from 'vue';
+import { Notify } from '@nutui/nutui@taro';
+
+const app = createApp();
+app.use(Notify);
+```    
+## 使用示例
+
+``` html 
+<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>
+```
+``` javascript
+import { reactive } from 'vue';
+export default {
+  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
+    };
+  }
+};
+``` 
+
+
+### Props
+    
+| 字段       | 说明                                                  | 类型    | 默认值   |
+|------------|-------------------------------------------------------|---------|----------|
+| 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
+
+| 事件名 | 说明         | 回调参数 |
+|--------|--------------|----------|
+| 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,91 @@
+<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 = () => {
+      clearTimer();
+    };
+    return { hide, onAfterLeave, onClick };
+  }
+});
+</script>
+
+<style lang="scss">
+@import 'index.scss';
+</style>

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

@@ -1,5 +1,6 @@
 export default {
   pages: [
+    'pages/notify/index',
     'pages/dialog/index',
     'pages/range/index',
     'pages/picker/index',

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>