Vue提示框组件vue-notification使用详解

更新时间：2023年03月20日 14:49:25 作者：挣扎的蓝藻

这篇文章主要介绍了Vue提示框组件vue-notification使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

先看下演示效果：

请添加图片描述

安装方法：
通过 npm install vue-notification 就能使用了。

导入方法：

import Notifications from 'vue-notification';

Vue.use(Notifications);

引用方法：

this.$notify({
  type: 'success',
  title: '提示：',
  text: '参数保存成功！'
});

并且需要在 App.vue 里加入 <notifications position="top right" duration=4 /> 。
其中 duration 参数为持续时间。
position 参数为提示位置，前面的值为纵向的顶部 top 和底部 bottom，后面的值为横向的左 left、中 center、右 right。
觉得 top 太靠上的话，
可以加个 css 调整下位置。

/* 设置提示框显示位置 */
.vue-notification-group{
  top: 10% !important;
}

更多参数：

在这里插入图片描述

到此这篇关于Vue提示框组件vue-notification使用的文章就介绍到这了,更多相关Vue提示框vue-notification内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue.js click点击事件获取当前元素对象的操作
这篇文章主要介绍了vue.js click点击事件获取当前元素对象的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
在vue项目实现一个ctrl+f的搜索功能
刚刚接到领导通知，需要实现搜索功能，因为项目是vue的而且是手机端，对我来说有点小难度。经过小编的一番思索最终还是解决了，今天小编把实现过程分享到脚本之家平台，需要的朋友参考下
2020-02-02
Vue为何弃用Ajax，选择Axios？ajax与axios的区别？
ajax技术实现了局部数据的刷新，axios实现了对ajax的封装；axios有的ajax都有，ajax有的axios不一定有。总结一句话就是axios是ajax，ajax不止axios。
2023-01-01
element表单验证如何清除校验提示语
本文主要介绍了element表单验证如何清除校验提示语，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
vue自定义横向滚动条css导航两行排列布局实现示例
这篇文章主要为大家介绍了vue自定义横向滚动条css导航两行排列布局实现示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Vue实现登录功能全套超详细讲解(含封装axios)
这篇文章主要给大家介绍了关于Vue实现登录功能(含封装axios)的相关资料,Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,需要的朋友可以参考下
2023-10-10
vue实现数字滚动效果
这篇文章主要为大家详细介绍了vue实现数字滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
vue实现滑动和滚动效果
这篇文章主要为大家详细介绍了vue实现滑动和滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
这篇文章主要介绍了uni-app自定义导航栏按钮|uniapp仿微信顶部导航条,需要的朋友可以参考下
2019-11-11
少女风vue组件库的制作全过程
这篇文章主要给大家介绍了关于少女风vue组件库的制作全过程，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-05-05