推荐一个VUE3和NUXT3通用TOAST消息提醒组件。
发布于2023-10-17 15:40 阅读1394次 推荐一下好用的vue3和nuxt3通用toast消息提醒组件,vue3中直接在可使用下面代码直接全局导入,this.toast('message content');支持toast.info/success/error/danger/warning('message content');
nuxt3下在plugins中建立toastify.client.ts复制下方代码 第二段代码为nuxt3专属全局注册vue3组件使用。
```
import toastify, { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';
//全局参数配置
const options = {
position:'top-center',//top-left,top-center,top-right,bottom-left,bottom-center,bottom-right
autoClose:3000,
hideProgressBar:true,
closeButton:true,
theme:'auto',//auto,colored,dark,light
transition:'bounce',//bounce,flip,slide,zoom
pauseOnFocusLoss:true,
pauseOnHover:true,
rtl:false,
style: {
opacity: '0.95',
userSelect: 'none',
zIndex:'40'
},
};
//以下代码为NUXT3全局注册组件
export default defineNuxtPlugin(nuxtApp => {// defineNuxtPlugin 是全局的,不需要手动引入即可使用,不会报错
nuxtApp.vueApp.use(toastify,options);
return {provide:{toast}};
})
```
1楼 1年前
组件全局引入时已配置默认全局参数,实际调用时仍然可以配置临时参数,例如:useNuxtApp().$toast.info("已向你邮箱发送验证码,请填写验证。",{autoClose:20000});