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

Toast \u5410\u53F8

\u4ECB\u7ECD

\u7528\u4E8E\u8F7B\u63D0\u793A\u3002

\u5B89\u88C5

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

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

<nut-toast :msg="page.state.msg" v-model:visible="page.state.show" :type="page.state.type" @closed="page.methods.onClosed" :cover="page.state.cover" />
<nut-cell title="Text \u6587\u5B57\u63D0\u793A" is-link @click="page.methods.openToast('text','\u7F51\u7EDC\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BD5~')"></nut-cell>
<nut-cell title="Title \u6807\u9898\u6587\u5B57" is-link @click="page.methods.openToast('text', '\u7F51\u7EDC\u5931\u8D25\uFF0C\u8BF7\u7A0D\u540E\u518D\u8BD5~',false,'\u6807\u9898\u6587\u5B57')" ></nut-cell>
<nut-cell title="Text \u81EA\u5B9A\u4E49\u4F4D\u7F6E" is-link @click="page.methods.openToast('text', '\u81EA\u5B9A\u4E49\u4F4D\u7F6E',false,'','20%',false)"></nut-cell>
<nut-cell title="Success \u6210\u529F\u63D0\u793A" is-link @click="page.methods.openToast('success','\u6210\u529F\u63D0\u793A')"></nut-cell>
<nut-cell title="Error \u5931\u8D25\u63D0\u793A" is-link @click="page.methods.openToast('fail','\u5931\u8D25\u63D0\u793A')"></nut-cell>
<nut-cell title="Warning \u8B66\u544A\u63D0\u793A" is-link @click="page.methods.openToast('warn','\u8B66\u544A\u63D0\u793A')"></nut-cell>
<nut-cell title="Loading \u52A0\u8F7D\u63D0\u793A" is-link @click="page.methods.openToast('loading','\u52A0\u8F7D\u4E2D')"></nut-cell>
<nut-cell title="Loading \u5E26\u767D\u8272\u80CC\u666F\u906E\u7F69" is-link @click="page.methods.openToast('loading','\u52A0\u8F7D\u4E2D',true)"></nut-cell>

import { reactive } from 'vue';
export default {
  setup() {
    const page = {
      state: reactive({
        msg: 'toast',
        type: 'text',
        show: false,
        cover: false,
        title:'',
        bottom:'',
        center:true,
      }),
      methods: {
        openToast: (type: string, msg: string, cover: boolean = false) => {
          page.state.show = true;
          page.state.msg = msg;
          page.state.type = type;
          page.state.cover = cover;
          page.state.title = title;
          page.state.bottom = bottom;
          page.state.center = center
        },
        onClosed: () => console.log('closed')
      }
    };
    return {
      page
    };
  }
};

\u57FA\u672C\u7528\u6CD5

API

\u65B9\u6CD5\u540D	\u8BF4\u660E	\u53C2\u6570	\u8FD4\u56DE\u503C
Toast.text	\u5C55\u793A\u6587\u5B57\u63D0\u793A	options/message	toast \u5B9E\u4F8B
Toast.success	\u5C55\u793A\u6210\u529F\u63D0\u793A	options/message	toast \u5B9E\u4F8B
Toast.fail	\u5C55\u793A\u5931\u8D25\u63D0\u793A	options/message	toast \u5B9E\u4F8B
Toast.warn	\u5C55\u793A\u8B66\u544A\u63D0\u793A	options/message	toast \u5B9E\u4F8B
Toast.hide	\u5173\u95ED\u63D0\u793A	force:boolean	void
Toast.loading	\u5C55\u793A\u52A0\u8F7D\u63D0\u793A	options/message	toast \u5B9E\u4F8B

Props

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
msg	\u6D88\u606F\u6587\u672C\u5185\u5BB9,\u652F\u6301\u4F20\u5165HTML	String/VNode	\u201C\u201D
duration	\u5C55\u793A\u65F6\u957F\uFF08\u6BEB\u79D2\uFF09 \u503C\u4E3A 0 \u65F6\uFF0Ctoast \u4E0D\u4F1A\u81EA\u52A8\u6D88\u5931\uFF08loading\u7C7B\u578B\u9ED8\u8BA4\u4E3A0\uFF09	Number	2000
title	\u6807\u9898	String	\u2018\u2019
center	\u662F\u5426\u5C55\u793A\u5728\u9875\u9762\u4E2D\u90E8\uFF08\u4E3Afalse\u65F6\u5C55\u793A\u5728\u5E95\u90E8\uFF09	Boolean	true
bottom	\u8DDD\u9875\u9762\u5E95\u90E8\u7684\u8DDD\u79BB\uFF08\u50CF\u7D20\u6216\u8005\u767E\u5206\u6BD4\uFF09\uFF0Coption.center\u4E3Afalse\u65F6\u751F\u6548	String	\u201C30px\u201D
text-align-center	\u591A\u884C\u6587\u6848\u662F\u5426\u5C45\u4E2D	Boolean	true
bg-color	\u80CC\u666F\u989C\u8272\uFF08\u900F\u660E\u5EA6\uFF09	String	\u201Crgba(0, 0, 0, 0.8)\u201D
custom-class	\u81EA\u5B9A\u4E49\u7C7B\u540D	String	\u201C\u201D
icon	\u81EA\u5B9A\u4E49\u56FE\u6807\uFF0C\u5BF9\u5E94icon\u7EC4\u4EF6\uFF0C\u652F\u6301\u56FE\u7247\u94FE\u63A5	String	\u201C\u201D
size	\u6587\u6848\u5C3A\u5BF8\uFF0Csmall/base/large\u4E09\u9009\u4E00	String	\u201Cbase\u201D
cover	\u662F\u5426\u663E\u793A\u906E\u7F69\u5C42\uFF0Cloading\u7C7B\u578B\u9ED8\u8BA4\u663E\u793A	Boolean	loading\u7C7B\u578Btrue/\u5176\u4ED6\u7C7B\u578Bfalse
cover-color	\u906E\u7F69\u5C42\u989C\u8272\uFF0C\u9ED8\u8BA4\u900F\u660E	String	\u201Crgba(0,0,0,0)\u201D
loading-rotate	loading\u56FE\u6807\u662F\u5426\u65CB\u8F6C\uFF0C\u4EC5\u5BF9loading\u7C7B\u578B\u751F\u6548	Boolean	true
on-close	\u5173\u95ED\u65F6\u89E6\u53D1\u7684\u4E8B\u4EF6	function	null
close-on-click-overlay	\u662F\u5426\u5728\u70B9\u51FB\u906E\u7F69\u5C42\u540E\u5173\u95ED\u63D0\u793A	Boolean	false
toast-style	\u63D0\u793A\u6846style	object	{}
toast-class	\u63D0\u793A\u6846class	String	\u201C\u201D

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