自己封装的一个Vue全局Toast插件

最新推荐文章于 2024-01-23 10:03:53 发布
最新推荐文章于 2024-01-23 10:03:53 发布
阅读量459 收藏 1
点赞数 1
分类专栏： 前端 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18297883/article/details/105690122
版权

起因

因为自己做的一个项目用到的是Vuetify，然而它本身不支持全局的消息提示，所以参考了网上的教程之后，自己实现了一个Vue的全局Toast消息插件。npm地址：toast_demo_based_vue

安装

$ npm i toast_demo_based_vue

引入

import toastRegistry from 'toast_demo_based_vue'
Vue.use(toastRegistry)

使用方法

this.$toast({
    text: "Your text",
    type: "type",
    duration: time
});

部分API

参数说明值
type提示类型success/wraning/danger/info
text文本null
duration持续时长2000毫秒

部分界面

danger
在这里插入图片描述
success
在这里插入图片描述

干巴爹兔
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
snackbar 使用_使用Vuetify Snackbar组件的基本Vue Toast服务
cuk5340的博客
07-26 1711
snackbar 使用 Vuetify吐司快餐 (Vuetify Toast Snackbar) Basic Vue toast service that uses Vuetify Snackbar component. 使用Vuetify Snackbar组件的基本Vue Toast服务。 View Demo 查看演示 Download Source 下载源 安装 (Installati...
vuetify框架下的Vue项目弹窗留白
xiewu1015的博客
01-11 2580
在使用vuetify框架的v-dialog时，点击侧边栏，弹出弹框，因内容过长，所以留白。 Q:猜测可能的原因： ----1、document.body.clientHeight监听的是屏幕可视高度 <v-dialog v-model="dialog7" fullscreen transition="dialog-bottom-transition"> <layout co...
vuetify-toast:基于vuetify快餐栏组件的简单烤面包服务
05-07
Vuetify吐司 基于快餐栏组件的简单烤面包服务。 （〜1kB gzip） 适用于版本1.x 安装 npm install --save vuetify-toast 演示版 演示： : 用法 捆绑器（Webpack，汇总） import vuetifyToast from 'vuetify-toast' vuetifyToast . info ( 'This is an info toast' ) ; vuetifyToast . success ( 'The document has been saved.' ) ; vuetifyToast . show ( { text : 'Test message' , icon : 'information' , color : 'warning' , timeout : 10000 , dis
如何封装一个vue3组件，以Toast弹框为例
xyphf的博客
03-21 2797
1、建一个components文件夹，里面建一个Toast.vue文件 <template> <div class="toast">{{message}}</div> </template> <script> import { reactive } from 'vue' export default { props: ['message'] } export const useToastEffect = () => {
vuetify-toast-snackbar:使用Vuetify Snackbar组件的基本Vue Toast服务
05-07
Vuetify吐司快餐 具有 Snackbar组件的队列支持的基本Vue Toast服务。 灵感来自 安装 npm install vuetify-toast-snackbar 演示版 演示： : 用法 捆绑器（Webpack，汇总） import VuetifyToast from 'vuetify-toast-snackbar' Vue . use ( VuetifyToast , { x : 'right' , // default y : 'bottom' , // default color : 'info' , // default icon : 'info' , iconColor : '' , // default classes : [ 'body-2' ] , timeout : 3000 , // default dismissable :
2.vue插件总结——总有你能用上的插件
weixin_30872733的博客
09-09 550
UI组件 框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 ...
Node.js-对Toast和Snackbar的封装提高性能和用户体验
08-12
对Toast和Snackbar的封装，提高性能和用户体验！
vuetify-toast-snackbar-fbits
05-07
Vuetify Vuetify 2.3及更高版本的Vuetify Toast Snackbar 具有 Snackbar组件的队列支持的基本Vue Toast服务。 从更新 安装 npm install vuetify-toast-snackbar-ng 用法 捆绑器（Webpack，汇总） import VuetifyToast from 'vuetify-toast-snackbar-ng' Vue . use ( VuetifyToast , { x : 'right' , // default y : 'bottom' , // default color : 'info' , // default icon : 'info' , iconColor : '' , // default classes : [ 'body-2' ] , timeout : 30
vuetify全局提示组件
weixin_44188300的博客
02-18 8297
模仿elment 的Message elment 有一个Message 可以全局提示的控件很是羡慕，但是作为一位后端人员又不想搞太多前端css，喜欢用vuetify，但是没有全局Message，只好自己动手实现一个了。 .先看一下效果，成功提示框： 失败提示框： 接下来让我们一步步实现 首先在src/commponents/下创建Message目录，并在Message目录下创建 Message....
vuetify封装全局组件 通过this.xx()直接调用
liuchuangqiang的博客
03-18 1231
vuetify 全局组件 dialog toast modal
mmessage基于Vue的信息提示插件
08-08
m-message 基于 Vue 的信息提示插件
Vue 之 Toast 消息提示插件的简单封装
08-01
vue 中简单封装类似 Toast 的消息提示插件，然后在 vue 中任意位置都可以简单使用 Toast 消息显示最前，并且默认 3 秒后自动消失 实现原理 1、vue 创建 Toast 消失提示组件的显示界面 2、js 代码动态引入 Toast 的 ...
第一个Vue插件从封装到发布
11-30
这是我封装的第一个Vue插件，实现的功能是滑动选择省市区，虽然只是一个简单的插件，但还是挺开心的，记录一下步骤。 　插件地址：https://github.com/leichangchun/vue-area-select 欢迎指正 准备 　Vue官网插件...
详解使用webpack打包编写一个vue-toast插件
08-28
本篇文章主要介绍了详解使用webpack打包编写一个vue插件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue自定义全局Toast和Loading的实例详解
10-17
主要介绍了Vue自定义全局Toast和Loading,需要的朋友可以参考下
vue-toast-notification:Vue.js的另一个Toast Notification插件
05-04
另一个Vue.js Toast通知插件。 :warning: 该库与Vue v3尚不兼容 或 安装 # yarn yarn add vue-toast-notification # npm npm install vue-toast-notification 用法 import Vue from 'vue' ; import VueToast from...
使用Vuetify构建登录系统的UI并实现表单验证——experiment4
m0_59744429的博客
04-16 869
但是在Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，那就是getCurrentInstance，该方法返回了当前的实例对象。删除UserLoign.vue中style元素的样式定义，修改main.css，本实验中使用vue的样式类设置界面样式。复位按钮处理事件处理，在官方文档中我们可以看到，v-form组件中提供了数据清除的方法，这里我们使用组件功能。要注意的是getCurrentInstance只在 setup、生命周期函数中有效，在方法中是无效的。
VUE3二次封装vuetify3的snackbar
是吗乔治的博客
11-08 462
使用vue3封装vuetify3的snackbar 组件，实现函数调用。
使用Vuetify构建登录系统的UI并实现表单验证【实验四】
最新发布
weixin_51302020的博客
01-23 1581
1.练习使用Vuetify组件设计界面。 2.练习对表单数据进行验证。
如何封装一个vue插件
04-25
首先，为了在 Vue 中使用插件，您需要定义一个 Vue 插件。执行此操作的最佳方法是编写一个具有 install 方法的对象。 install 方法接收 Vue 构造函数、插件选项以及其他必要参数。它应该注册组件、指令、过滤器等等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值