首页 发现 帮助
登录
githab
/
nutui
3
0
派生 0
文件
目录树: fd0e987e90
分支列表 标签列表
nutui
/
3.1.5
/
doc.taro.e0d0509c.js

doc.taro.e0d0509c.js 10 KB
文件历史 原始文件

1 
  1. import{e as s,o as a,G as t}from"./vendor.92dabd7f.js";const n={class:"markdown-body"},l=[t('<h1>Notify 消息通知</h1><h3>介绍</h3><p>在页面顶部展示消息提示</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Notify } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Notify);\n</code></pre><h2>使用示例</h2><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-cell-group</span> <span class="hljs-attr">:title</span>=<span class="hljs-string">&quot;baseState.state.desc&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">is-Link</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;baseState.methods.cellClick&quot;</span>&gt;</span>基础用法<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-notify</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;onClick&quot;</span> @<span class="hljs-attr">closed</span>=<span class="hljs-string">&quot;onClosed&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;baseState.state.show&quot;</span>\n    <span class="hljs-attr">:msg</span>=<span class="hljs-string">&quot;baseState.state.desc&quot;</span> /&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell-group</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;通知类型&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-notify</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;onClick&quot;</span> @<span class="hljs-attr">closed</span>=<span class="hljs-string">&quot;onClosed&quot;</span> <span class="hljs-attr">:type</span>=<span class="hljs-string">&quot;notifyState.state.type&quot;</span>\n    <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;notifyState.state.show&quot;</span> <span class="hljs-attr">:msg</span>=<span class="hljs-string">&quot;notifyState.state.desc&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">is-Link</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;notifyState.methods.cellClick(&#39;primary&#39;,&#39;主要通知&#39;)&quot;</span>&gt;</span>主要通知<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">is-Link</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;notifyState.methods.cellClick(&#39;success&#39;,&#39;成功通知&#39;)&quot;</span>&gt;</span>成功通知<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">is-Link</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;notifyState.methods.cellClick(&#39;danger&#39;,&#39;危险通知&#39;)&quot;</span>&gt;</span>危险通知<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">is-Link</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;notifyState.methods.cellClick(&#39;warning&#39;,&#39;警告通知&#39;)&quot;</span>&gt;</span>警告通知<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell-group</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-cell-group</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;自定义样式&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-notify</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;onClick&quot;</span> @<span class="hljs-attr">closed</span>=<span class="hljs-string">&quot;onClosed&quot;</span> <span class="hljs-attr">color</span>=<span class="hljs-string">&#39;#ad0000&#39;</span> <span class="hljs-attr">background</span>=<span class="hljs-string">&#39;#ffe1e1&#39;</span>\n    <span class="hljs-attr">:type</span>=<span class="hljs-string">&quot;customState.state.type&quot;</span> <span class="hljs-attr">v-model:visible</span>=<span class="hljs-string">&quot;customState.state.show&quot;</span> <span class="hljs-attr">:msg</span>=<span class="hljs-string">&quot;customState.state.desc&quot;</span>\n    <span class="hljs-attr">:duration</span>=<span class="hljs-string">&quot;customState.state.duration&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">is-Link</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;customState.methods.cellClick(&#39;primary&#39;,&#39;自定义背景色和字体颜色&#39;)&quot;</span>&gt;</span> 自定义背景色和字体颜色\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-cell</span> <span class="hljs-attr">is-Link</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;customState.methods.cellClick(&#39;primary&#39;,&#39;自定义时长5s&#39;,5000)&quot;</span>&gt;</span> 自定义时长5s\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-cell-group</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { reactive } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n  <span class="hljs-function"><span class="hljs-title">setup</span>(<span class="hljs-params"></span>)</span> {\n    <span class="hljs-keyword">const</span> onClosed = <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#39;closed&#39;</span>);\n    <span class="hljs-keyword">const</span> onClick = <span class="hljs-function">() =&gt;</span> <span class="hljs-built_in">console</span>.log(<span class="hljs-string">&#39;click&#39;</span>);\n\n    <span class="hljs-keyword">const</span> baseState = {\n      <span class="hljs-attr">state</span>: reactive({\n        <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;基础用法&#39;</span>\n      }),\n      <span class="hljs-attr">methods</span>: {\n        <span class="hljs-function"><span class="hljs-title">cellClick</span>(<span class="hljs-params"></span>)</span> {\n          baseState.state.show = <span class="hljs-literal">true</span>;\n        }\n      }\n    };\n\n    <span class="hljs-keyword">const</span> notifyState = {\n      <span class="hljs-attr">state</span>: reactive({\n        <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>\n      }),\n      <span class="hljs-attr">methods</span>: {\n        <span class="hljs-function"><span class="hljs-title">cellClick</span>(<span class="hljs-params">type: string, desc: string</span>)</span> {\n          notifyState.state.show = <span class="hljs-literal">true</span>;\n          notifyState.state.type = type;\n          notifyState.state.desc = desc;\n        }\n      }\n    };\n    <span class="hljs-keyword">const</span> customState = {\n      <span class="hljs-attr">state</span>: reactive({\n        <span class="hljs-attr">show</span>: <span class="hljs-literal">false</span>,\n        <span class="hljs-attr">desc</span>: <span class="hljs-string">&#39;&#39;</span>,\n        <span class="hljs-attr">type</span>: <span class="hljs-string">&#39;primary&#39;</span>,\n        <span class="hljs-attr">duration</span>: <span class="hljs-number">3000</span>\n      }),\n      <span class="hljs-attr">methods</span>: {\n        <span class="hljs-function"><span class="hljs-title">cellClick</span>(<span class="hljs-params">type: string, desc: string, duration: number</span>)</span> {\n          customState.state.show = <span class="hljs-literal">true</span>;\n          customState.state.type = type;\n          customState.state.desc = desc;\n          customState.state.duration = duration;\n        }\n      }\n    };\n    <span class="hljs-keyword">return</span> {\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)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
    2.