插件名称 | szboynono |
---|---|
版本号 | v1.0.12 |
发布时间 | 2021年4月25日 |
插件作者 | mosha-vue-toastify |
轻巧有趣的Vue 3吐司或通知栏或小吃店,但是您想要将其称为库。
使用NPM:
$ npm install mosha-vue-toastify
使用纱线:
$ yarn add mosha-vue-toastify
1.导入必要的组件。
import { defineComponent } from ‘vue’
import { createToast } from ‘mosha-vue-toastify’;
import ‘mosha-vue-toastify/dist/style.css’
2.启用按钮以显示基本通知。
<template>
<button @click="toast">Click Me</button>
</template>
export default defineComponent({
name: 'myApp',
setup () {
const toast = () => {
createToast('Basic Toast.')
}
return { toast }
}
})
3.在toast 消息中添加标题。
createToast({
title: 'Toast title',
description: 'Toast description'
})
4.可用的自定义选项。
createToast({
title: 'Toast title',
description: 'Toast description'
},{
type: 'default', // 'info', 'danger', 'warning', 'success', 'default'
timeout: 5000,
showCloseButton: true,
position: 'top-right', // 'top-left', 'top-right', 'bottom-left', 'bottom-right', 'top-center', 'bottom-center'
transition: 'bounce',
hideProgressBar: false,
swipeClose: true,
toastBackgroundColor: '#fafafa',
onClose: null
})
v1.0.17 (07/12/2021)
v1.0.12 (06/14/2021)
v1.0.11(04/26/2021)