import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

Notify \u6D88\u606F\u901A\u77E5

\u4ECB\u7ECD

\u5728\u9875\u9762\u9876\u90E8\u5C55\u793A\u6D88\u606F\u63D0\u793A

\u5B89\u88C5

import { createApp } from 'vue';
import { Notify } from '@nutui/nutui-taro';

const app = createApp();
app.use(Notify);

\u4F7F\u7528\u793A\u4F8B

<nut-cell-group :title="baseState.state.desc">
  <nut-cell is-Link @click="baseState.methods.cellClick">\u57FA\u7840\u7528\u6CD5</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="\u901A\u77E5\u7C7B\u578B">
  <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','\u4E3B\u8981\u901A\u77E5')">\u4E3B\u8981\u901A\u77E5</nut-cell>
  <nut-cell is-Link @click="notifyState.methods.cellClick('success','\u6210\u529F\u901A\u77E5')">\u6210\u529F\u901A\u77E5</nut-cell>
  <nut-cell is-Link @click="notifyState.methods.cellClick('danger','\u5371\u9669\u901A\u77E5')">\u5371\u9669\u901A\u77E5</nut-cell>
  <nut-cell is-Link @click="notifyState.methods.cellClick('warning','\u8B66\u544A\u901A\u77E5')">\u8B66\u544A\u901A\u77E5</nut-cell>
</nut-cell-group>

<nut-cell-group title="\u81EA\u5B9A\u4E49\u6837\u5F0F">
  <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','\u81EA\u5B9A\u4E49\u80CC\u666F\u8272\u548C\u5B57\u4F53\u989C\u8272')"> \u81EA\u5B9A\u4E49\u80CC\u666F\u8272\u548C\u5B57\u4F53\u989C\u8272
  </nut-cell>
  <nut-cell is-Link @click="customState.methods.cellClick('primary','\u81EA\u5B9A\u4E49\u65F6\u957F5s',5000)"> \u81EA\u5B9A\u4E49\u65F6\u957F5s
  </nut-cell>
</nut-cell-group>

import { reactive } from 'vue';
export default {
  setup() {
    const onClosed = () => console.log('closed');
    const onClick = () => console.log('click');

    const baseState = {
      state: reactive({
        show: false,
        desc: '\u57FA\u7840\u7528\u6CD5'
      }),
      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

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
type	\u63D0\u793A\u7684\u4FE1\u606F\u7C7B\u578B\uFF08primary\uFF0Csuccess \uFF0Cdanger\uFF0Cwarning\uFF09	String	\u2018danger\u2019
message	\u5C55\u793A\u6587\u6848\uFF0C\u652F\u6301\u901A\u8FC7\\n\u6362\u884C	Boolean	false
duration	\u5C55\u793A\u65F6\u957F(ms)\uFF0C\u503C\u4E3A 0 \u65F6\uFF0Cnotify \u4E0D\u4F1A\u6D88\u5931	String	3000
color	\u5B57\u4F53\u989C\u8272	String	\u7A7A
background	\u80CC\u666F\u989C\u8272	String	\u7A7A
class-name	\u81EA\u5B9A\u4E49\u7C7B\u540D	String

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
click	\u70B9\u51FB\u4E8B\u4EF6\u56DE\u8C03	\u65E0
closed	\u5173\u95ED\u4E8B\u4EF6\u56DE\u8C03	\u65E0

`,12),c=[p],i={setup(e,{expose:s}){return s({frontmatter:{}}),(r,o)=>(t(),a("div",l,c))}};export{i as default};