你的浏览器无法正常显示内容,请更换或升级浏览器!

推荐一个VUE3和NUXT3通用TOAST消息提醒组件。

tenfei
tenfei
发布于2023-10-17 15:40 阅读1089次
推荐一个VUE3和NUXT3通用TOAST消息提醒组件。
推荐一下好用的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}}; }) ```

2

0

文章点评
tenfei
1楼 1年前
组件全局引入时已配置默认全局参数,实际调用时仍然可以配置临时参数,例如:useNuxtApp().$toast.info("已向你邮箱发送验证码,请填写验证。",{autoClose:20000});
Copyright © from 2021 by namoer.com
458815@qq.com QQ:458815
蜀ICP备2022020274号-2