import{B as o,o as F,c as y,x as s,D as n,z as p,a as t,N as C}from"./chunks/framework.68f3e7ab.js";const u=s("h1",{id:"通知菜单",tabindex:"-1"},[t("通知菜单 "),s("a",{class:"header-anchor",href:"#通知菜单","aria-label":'Permalink to "通知菜单"'},"​")],-1),d=s("h2",{id:"效果",tabindex:"-1"},[t("效果 "),s("a",{class:"header-anchor",href:"#效果","aria-label":'Permalink to "效果"'},"​")],-1),A={style:{padding:"1em",border:"1px solid #ccc","border-radius":"10px","margin-top":"20px"}},g=s("br",null,null,-1),m=s("br",null,null,-1),h=s("br",null,null,-1),_=s("br",null,null,-1),x=s("br",null,null,-1),b=C(`<h2 id="代码示例" tabindex="-1">代码示例 <a class="header-anchor" href="#代码示例" aria-label="Permalink to &quot;代码示例&quot;">​</a></h2><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">xs-notification</span><span style="color:#89DDFF;"> :value=&quot;55&quot; :max=&quot;50&quot;&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">		&lt;template #default&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">			&lt;xs-noticeList</span></span>
<span class="line"><span style="color:#89DDFF;">				@clickItem=&quot;handleItem&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">				@clickAction=&quot;handleAction&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">				:list=&quot;list&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">				:actions=&quot;actions&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">			&gt;&lt;/</span><span style="color:#FFCB6B;">xs-noticeList</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">		</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">xs</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">notification</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">xs-notification</span><span style="color:#89DDFF;"> :value=&quot;10&quot; :max=&quot;50&quot;&gt;1111&lt;/xs-notification&gt;&lt;br /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">xs-notification</span><span style="color:#89DDFF;"> :value=&quot;55&quot; :max=&quot;50&quot; :isDot=&quot;true&quot;&gt;&lt;/xs-notification&gt;&lt;br /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">br</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">&lt;</span><span style="color:#FFCB6B;">xs-notification</span><span style="color:#89DDFF;"> :value=&quot;55&quot; :max=&quot;50&quot; </span><span style="color:#C792EA;">icon</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ChatRound</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#FFCB6B;">xs-notification</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#A6ACCD;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">import </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> list</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> actions </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> from &quot;./data.ts&quot;;</span></span>
<span class="line"><span style="color:#A6ACCD;">const handleItem = (val: any) =&gt; </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(val);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">const handleAction = (val: any) =&gt; </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;">	console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(val);</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div>`,2),j=JSON.parse('{"title":"通知菜单","description":"","frontmatter":{},"headers":[],"relativePath":"examples/Notification/index.md"}'),q={name:"examples/Notification/index.md"},E=Object.assign(q,{setup(f){const e=[{title:"通知",content:[{title:"蒂姆·库克回复了你的邮件",time:"2019-05-08 14:33:18",avatar:"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"},{title:"蒂姆·库克回复了你的邮件",time:"2019-05-08 14:33:18",avatar:"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"},{title:"斯蒂夫·沃兹尼亚克已批准了你的休假申请",time:"2019-05-08 14:33:18",avatar:"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"}]},{title:"关注",content:[{avatar:"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",title:"曲丽丽 评论了你",desc:" 描述信息描述信息描述信息",time:"3小时前"},{avatar:"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",title:"曲丽丽 评论了你",desc:" 描述信息描述信息描述信息",time:"3小时前"},{avatar:"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",title:"曲丽丽 评论了你",desc:" 描述信息描述信息描述信息",time:"3小时前"},{avatar:"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",title:"曲丽丽 评论了你",desc:" 描述信息描述信息描述信息",time:"3小时前"}]},{title:"代办",content:[{title:"任务名称",desc:"任务需要在 2017-01-12 20:00 前启动",tag:"未开始",tagType:""},{title:"第三方紧急代码变更",desc:"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务",tag:"马上到期",tagType:"warning"},{title:"信息安全考试",desc:"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务",tag:"已耗时8天",tagType:"danger"},{title:"第三方紧急代码变更",desc:"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务",tag:"已耗时8天",tagType:"warning"}]}],c=[{text:"清空代办",icon:"delete"},{text:"查看更多",icon:"edit"}],r=a=>{console.log(a)},i=a=>{console.log(a)};return(a,v)=>{const D=o("xs-noticeList"),l=o("xs-notification");return F(),y("div",null,[u,d,s("div",A,[n(l,{value:55,max:50},{default:p(()=>[n(D,{onClickItem:r,onClickAction:i,list:e,actions:c})]),_:1}),g,m,h,n(l,{value:10,max:50},{default:p(()=>[t("1111")]),_:1}),_,x]),b])}}});export{j as __pageData,E as default};
