@cssninja/nuxt-烤面包机
Nuxt.js 的简单烤面包机( 通知器)处理器
特征
- 默认取消
- 将任何组件作为祝酒词
- 完全自定义
- 简单的使用
安装
- 添加
@cssninja/nuxt-toaster对您的项目的依赖性
# Using pnpm
pnpm add -D @cssninja/nuxt-toaster
# Using yarn
pnpm add -D @cssninja/nuxt-toaster
# Using npm
npm install --save-dev @cssninja/nuxt-toaster
- 添加
@cssninja/nuxt-toaster页:1modules节nuxt.config.js
export default defineNuxtConfig({
modules: [
'@cssninja/nuxt-toaster'
]
})
基本用途
举起手来
// get the ninjaToaster instance
const { $nt } = useNuxtApp()
// show a toast with a string as content
$nt.show('Hello world')
显示带有自定义组件的祝酒词
// define or import a component
const MyToast = defineComponent({
/* ... */
})
// get the ninjaToaster instance
const { $nt } = useNuxtApp()
// show a toast with render function as content
$nt.show(() => h(MyToast))
配置
使用 ninjaToaster.show 选项
// get the ninjaToaster instance
const { $nt } = useNuxtApp()
$nt.show({
/**
* The content of the toast, can be a render function (a.k.a stateless component)
*
* @type {string | number | Record<string, any> | (() => Component)}
* @required
*/
content: 'Hello world',
/**
* The duration of the toast
*
* @default 5000
*/
duration: 5000,
/**
* Pause the duration timer on hover, or focus
*
* @default true
*/
pauseOnHover: true,
/**
* Whereas the toast can be closed on click,
* or on pressing Enter/Space keys when focused
*
* @default true
*/
dismissible: false,
/**
* Maximum number of toasts to show
* on the same `theme.containerId`
*
* @default Infinity
*/
maxToasts: 5,
/**
* Transition property for the toast
*
* @see https://vuejs.org/api/built-in-components.html#transition
*/
transition: {
name: 'fadeIn',
},
/**
* The theme used for the toast
*/
theme: {
/**
* The container id where the toast will be rendered
* If not exists, it will be created automatically
*
* @default 'nt-container'
*/
containerId: 'nt-container',
/**
* The class name for the toaster container (applyed to toast container)
*
* @type {string | string[]}
* @default ''
*/
containerClass: 'nt-container-class',
/**
* The class name for the toast wrapper (applyed to each toast)
*
* @type {string | string[]}
* @default ''
*/
wrapperClass: 'nt-wrapper-class',
}
})
这将用以下的 HTML 结构创建祝酒:
<body> <!-- ... --> <div id="nt-container" class="nt-container-class"> <div class="nt-wrapper-class" role="alert" tabindex="0" > Hello world </div> </div> </body>注释 : 页:1
theme属性用于定制烤面包机行为。 每个theme.containerId将有自己的背景(例如:maxToasts将计算在容器中可看到多少个配有标识的烤面包机.
使用 toaster 应用程序配置
为避免自己重复,可以设置忍者toaster的默认值. 在 nuxt 中显示方法 app.config.ts 在您的项目根部.
// app.config.ts
export default defineAppConfig({
toaster: {
// default options for ninjaToaster.show
}
})
使用自定义插件
默认情况下,模块创建实例 ninjaToaster 并在 nuxt 语境中注入 useNuxtApp().$nt。 。 。 .
您可以使用自定义插件创建自己的实例并在上下文中注入。 这里我们用尾风来做土司.
- 禁用默认插件
nuxt.config.ts模块选项
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@cssninja/nuxt-toaster'
],
toaster: {
// disable the default plugin
installPlugin: false
}
})
- 创建自定义土司组件
<script setup lang="ts">
// components/MyToast.vue
const props = defineProps<{
title: string
message?: string
type: 'info' | 'error'
}>()
const {
isHovered,
isActive,
timer,
duration,
click,
close,
} = useNinjaToasterState()
const {
percent,
endAt,
closeIn
} = useNinjaToasterProgress()
</script>
<template>
<div
class="rounded p-4"
:class="[
props.type === 'info' && 'bg-indigo-600 text-indigo-500'
props.type === 'error' && 'bg-rose-600 text-rose-500'
]"
>
<h1>{{ props.title }}</h1>
<p v-if="props.message">{{ props.message }}</p>
<button @click="close()">Close</button>
</div>
</template>
- 创建自定义插件
// plugins/toaster.ts
import MyToast from '~/components/MyToast.vue'
interface ToasterOptions {
message: string
title?: string
}
export default defineNuxtPlugin(() => {
// define or import a theme
const theme = {
containerId: 'nt-container-bottom-right',
containerClass: [
'absolute',
'inset-0',
'pointer-events-none',
'p-4',
'flex',
'flex-col-reverse',
'items-start',
'gap-2'
],
wrapperClass: [
'pointer-events-auto',
'cursor-pointer',
],
}
// set default show options here
const nt = createNinjaToaster({
theme,
maxToasts: 5,
transition: {
enterActiveClass: 'transition duration-300 ease-out',
enterFromClass: 'transform translate-x-full opacity-0',
enterToClass: 'transform translate-x-0 opacity-100',
leaveActiveClass: 'transition duration-300 ease-in',
leaveFromClass: 'transform translate-x-0 opacity-100',
leaveToClass: 'transform translate-x-full opacity-0'
}
})
const toaster = {
info (options: ToasterOptions) {
nt.show(() => h(MyToast, {
...options,
type: 'info'
}))
},
async error (options: ToasterOptions) {
// wait for the toast to be mounted
const { el, close } = await nt.show(() => h(MyToastError, {
...options,
type: 'error'
}))
// focus the toast once it's mounted
el.focus()
},
close() {
// close all toasts
nt.closeAll()
// or close toasts in a specific containerId
nt.close('nt-container-bottom-right')
// or close toasts using a theme
nt.close(theme)
},
}
return {
provide {
toaster
}
}
})
- 用你们的
toaster应用程序中的实例
// pages/index.vue
const { $toaster } = useNuxtApp()
$toaster.info({
title: 'Hello world',
message: 'This is a toaster info message'
})
$toaster.error({
title: 'Hello world',
message: 'This is a toaster error message'
})
他们
最小 CSS 主题
#nt-container {
/* make container fit the screen */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 100;
pointer-events: none;
/* position the toasts using flexbox */
display: flex;
/**
* position all toasts in bottom of the screen
* - use "flex-direction: column;" to position in top screen
*/
flex-direction: column-reverse;
/**
* align all toasts to the center
* - use "align-items: start" to aling to the left
* - use "align-items: end" to aling to the right
*/
align-items: center;
/* add some space between toasts and screen */
padding: 2rem;
gap: 1rem;
}
#nt-container [role='alert'] {
/* allow toasts to be interactive */
pointer-events: auto;
/* add styles to toasts */
padding: 1rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
@media (max-width: 767px) {
#nt-container {
/* fit toasts to screen on mobile */
padding: 0;
}
}
发展
- 运行
npm run dev:prepare生成类型根. - 使用
npm run dev开始 游乐场 在开发模式中.