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

Notify 消息通知

介绍

在页面顶部展示消息提示

安装

import { createApp } from 'vue';\nimport { Notify } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Notify);\n

使用示例

<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

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

Props

字段	说明	类型	默认值
type	提示的信息类型（primary，success ，danger，warning）	String	‘danger’
message	展示文案，支持通过\\n换行	Boolean	false
duration	展示时长(ms)，值为 0 时，notify 不会消失	String	3000
color	字体颜色	String	空
background	背景颜色	String	空
class-name	自定义类名	String

Events

事件名	说明	回调参数
click	点击事件回调	无
closed	关闭事件回调	无

',12)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};