返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue提示框组件vue-notification使用详解
  • 110
分享到

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

Vue提示框vuenotificationVue提示框组件 2023-03-20 14:03:06 110人浏览 安东尼
摘要

先看下演示效果: 安装方法:通过 npm install Vue-notification 就能使用了。 导入方法: import Notifications from 'vue-

先看下演示效果:

请添加图片描述

安装方法:
通过 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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue提示框组件vue-notification使用详解

本文链接: https://lsjlt.com/news/200567.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue提示框组件vue-notification使用详解
    先看下演示效果: 安装方法:通过 npm install vue-notification 就能使用了。 导入方法: import Notifications from 'vue-...
    99+
    2023-03-20
    Vue提示框vue notification Vue提示框组件
  • Vue提示框组件vue-notification如何使用
    今天小编给大家分享一下Vue提示框组件vue-notification如何使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。...
    99+
    2023-07-05
  • Vue对话框组件使用方法详解
    本文实例为大家分享了Vue对话框组件的使用,供大家参考,具体内容如下 效果如下图所示:(整体样式模仿ant-design-vue Modal样式,同时阴影覆盖浏览器窗口) ①创建组...
    99+
    2024-04-02
  • Vue下拉选择框Select组件使用详解(一)
    本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下:  展开图如下: ①创建组件Select.vue:预设两...
    99+
    2024-04-02
  • Vue下拉选择框Select组件使用详解(二)
    本文实例为大家分享了Vue下拉选择框Select组件的使用方法,供大家参考,具体内容如下 效果图如下: 下拉组件宽度可自定义设置以下属性: ①下拉组件宽度width属性,...
    99+
    2024-04-02
  • Vue组件Toast显示框怎么用
    本篇内容介绍了“Vue组件Toast显示框怎么用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果展示 代码分析div包含icon...
    99+
    2023-07-04
  • Vue+Element switch组件的使用示例代码详解
    代码如下所示: <el-table-column label="商品状态" align="center"> <template slot-sco...
    99+
    2024-04-02
  • 如何使用flexible的Vue组件Toast显示框
    这篇文章将为大家详细讲解有关如何使用flexible的Vue组件Toast显示框,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Toast -- 显示框效果展示 ...
    99+
    2024-04-02
  • Vue 可拖拽组件Vue Smooth DnD的使用详解
    目录简介和 Demo 展示API: Container属性生命周期回调事件API: Draggable实战简介和 Demo 展示 最近需要有个拖拽列表的需求,发现一个简单好用的 Vu...
    99+
    2024-04-02
  • vue组件生命周期钩子使用示例详解
    目录组件生命周期图组件生命周期钩子1、beforeCreate2、created3、beforeMount4、mounted5、beforeUpdate6、updated7...
    99+
    2024-04-02
  • Vue之组件详解
    <body> <div id="root"> <h2>{{name}}</h2> ...
    99+
    2024-04-02
  • vue组件historyApiFallback作用详解
    本篇博客主要是详细总结一下vue中的historyApiFallback的作用。 当我们在浏览器中输入一个网址(比如说是:http://www.edit.com),此时会经过dns解...
    99+
    2024-04-02
  • vue中router-view组件的使用详解
    在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面 例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面。 这...
    99+
    2024-04-02
  • vue实现过渡动画Message消息提示组件示例详解
    目录概述目录结构总结概述 在我自己平时做项目的时候,必不可少的会用到message组件,用来对用户友好反馈,总之使用频率还是挺高的,刚开始工作的时候,经常用的就是组件库的现成的,想想...
    99+
    2024-04-02
  • vue输入框组件开发过程详解
    本文实例为大家分享了vue输入框组件开发过程的具体代码,供大家参考,具体内容如下 input-number.js function isValueNumber(value) {   ...
    99+
    2024-04-02
  • vue 内置组件 component 的用法示例详解
    目录component is 内置组件切换方法一:component is 内置组件切换方法二:component is 内置组件切换方法一: component组件(单独拿出一个组...
    99+
    2022-11-13
    vue 内置组件 component vue  component用法
  • vue中使用svg封装全局消息提示组件
    本文实例为大家分享了vue中使用svg封装全局消息提示组件的具体代码,供大家参考,具体内容如下 先看效果图 一、首先安装下载需要用到的svg相关依赖 npm install sv...
    99+
    2024-04-02
  • vue滑动解锁组件使用方法详解
    本文实例为大家分享了vue滑动解锁组件的使用,供大家参考,具体内容如下 这是一个pc端的滑动解锁组件 效果图: 话不多说,直接上代码 html部分 <template>...
    99+
    2024-04-02
  • Vue滑块解锁组件使用方法详解
    本文实例为大家分享了Vue滑块解锁组件的使用,供大家参考,具体内容如下 依据 JS拖动滑块验证 开发的 Vue 滑块解锁组件。 <template>   <div ...
    99+
    2024-04-02
  • vue验证码组件使用方法详解
    本文实例为大家分享了vue验证码组件使用的具体实现代码,供大家参考,具体内容如下 代码如下: <template> <div class="join...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作