| 1 |
- import{c as t,o as e,C as n}from"./vendor.0d0a34e4.js";const o={class:"markdown-body"},l=n('<h1>Notify 消息通知</h1><h3>介绍</h3><p>在页面顶部展示消息提示</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Notify } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Notify);\n</code></pre><h2>使用示例</h2><pre><code class="language-html"><nut-cell-group :title="baseState.state.desc">\n <nut-cell is-Link @click="baseState.methods.cellClick">基础用法</nut-cell>\n <nut-notify @click="onClick" @closed="onClosed" v-model:visible="baseState.state.show"\n :msg="baseState.state.desc" />\n</nut-cell-group>\n\n<nut-cell-group title="通知类型">\n <nut-notify @click="onClick" @closed="onClosed" :type="notifyState.state.type"\n v-model:visible="notifyState.state.show" :msg="notifyState.state.desc" />\n <nut-cell is-Link @click="notifyState.methods.cellClick('primary','主要通知')">主要通知</nut-cell>\n <nut-cell is-Link @click="notifyState.methods.cellClick('success','成功通知')">成功通知</nut-cell>\n <nut-cell is-Link @click="notifyState.methods.cellClick('danger','危险通知')">危险通知</nut-cell>\n <nut-cell is-Link @click="notifyState.methods.cellClick('warning','警告通知')">警告通知</nut-cell>\n</nut-cell-group>\n\n<nut-cell-group title="自定义样式">\n <nut-notify @click="onClick" @closed="onClosed" color='#ad0000' background='#ffe1e1'\n :type="customState.state.type" v-model:visible="customState.state.show" :msg="customState.state.desc"\n :duration="customState.state.duration" />\n <nut-cell is-Link @click="customState.methods.cellClick('primary','自定义背景色和字体颜色')"> 自定义背景色和字体颜色\n </nut-cell>\n <nut-cell is-Link @click="customState.methods.cellClick('primary','自定义时长5s',5000)"> 自定义时长5s\n </nut-cell>\n</nut-cell-group>\n</code></pre><pre><code class="language-javascript">import { reactive } from 'vue';\nexport default {\n setup() {\n const onClosed = () => console.log('closed');\n const onClick = () => console.log('click');\n\n const baseState = {\n state: reactive({\n show: false,\n desc: '基础用法'\n }),\n methods: {\n cellClick() {\n baseState.state.show = true;\n }\n }\n };\n\n const notifyState = {\n state: reactive({\n show: false,\n desc: '',\n type: 'primary'\n }),\n methods: {\n cellClick(type: string, desc: string) {\n notifyState.state.show = true;\n notifyState.state.type = type;\n notifyState.state.desc = desc;\n }\n }\n };\n const customState = {\n state: reactive({\n show: false,\n desc: '',\n type: 'primary',\n duration: 3000\n }),\n methods: {\n cellClick(type: string, desc: string, duration: number) {\n customState.state.show = true;\n customState.state.type = type;\n customState.state.desc = desc;\n customState.state.duration = duration;\n }\n }\n };\n return {\n baseState,\n notifyState,\n customState,\n onClosed,\n onClick\n };\n }\n};\n</code></pre><h3>Props</h3><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>提示的信息类型（primary，success ，danger，warning）</td><td>String</td><td>‘danger’</td></tr><tr><td>message</td><td>展示文案，支持通过\\n换行</td><td>Boolean</td><td>false</td></tr><tr><td>duration</td><td>展示时长(ms)，值为 0 时，notify 不会消失</td><td>String</td><td>3000</td></tr><tr><td>color</td><td>字体颜色</td><td>String</td><td>空</td></tr><tr><td>background</td><td>背景颜色</td><td>String</td><td>空</td></tr><tr><td>class-name</td><td>自定义类名</td><td>String</td><td></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>点击事件回调</td><td>无</td></tr><tr><td>closed</td><td>关闭事件回调</td><td>无</td></tr></tbody></table>',12),s={setup:n=>(n,s)=>(e(),t("div",o,[l]))};export default s;
|
