使用Vant完成通知栏Notify的提示操作


Posted in Javascript onNovember 11, 2020

效果:

使用Vant完成通知栏Notify的提示操作

代码展示:

<template>
 <!-- 通知消息提示 -->
 <div id="notify">
  <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button>
 </div>
</template>
<script>
 export default{
 data(){
  return{
  msg:''
  }
 },
 methods:{
  toNotify(){
  this.$notify({
   message:'我是提示的notify',
   background:'pink',
   duration: 1000
  })
  }
 },
 mounted() {
 
 }
 }
</script>
<style scoped="scoped">
 .btn{
 margin-top: 100px;
 }
</style>

补充知识:vantweapp引入notify消息提示组件解决importpath/to/@vant/weapp/dist/notify/notify和‘selectComponent‘ of undefined

**

微信小程序搭配vantweapp引入notify消息提示组件

/path/to/@vant/weapp/dist/notify/notify未找到

‘selectComponent‘ of undefined报错

解决办法:

** import引入相对路径

Notify({ type: ‘success', message: ‘通知内容' });//放入事件中

对应js文件代码:

import Notify from '../../miniprogram_npm/@vant/weapp/notify/notify';
Page({
 data: {},
 //btnSub是事件名
 btnSub() {
 Notify({ type: 'success', message: '通知'});
 }
})

wxml文件代码

<van-notify id="van-notify" />

app.json文件代码

"usingComponents": {
 "van-notify": "@vant/weapp/notify/index"
}

以上这篇使用Vant完成通知栏Notify的提示操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
AngularJS基础学习笔记之简单介绍
May 10 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
Node.js实现文件上传的示例
Jun 28 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
html中两种获取标签内的值的方法
Jun 16 jQuery
Vue3 响应式侦听与计算的实现
Nov 11 #Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
Nov 10 #Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 #Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 #Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 #Javascript
vue解决跨域问题(推荐)
Nov 10 #Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 #Javascript
You might like
第九节 绑定 [9]
2006/10/09 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
Yii2针对游客、用户防范规则和限制的解决方法分析
2016/10/08 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
2008/09/26 Javascript
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
Immutable 在 JavaScript 中的应用
2016/05/02 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
2016/05/28 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
微信小程序实现多图上传
2020/06/19 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
在Python程序中实现分布式进程的教程
2015/04/28 Python
Django的session中对于用户验证的支持
2015/07/23 Python
利用Python画ROC曲线和AUC值计算
2016/09/19 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python 发送json数据操作实例分析
2019/10/15 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
市场营销专业毕业生自荐信
2013/11/02 职场文书
烹饪自我鉴定
2014/03/01 职场文书
设计师求职信
2014/07/01 职场文书
出售房屋协议书范本
2014/10/06 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
Python 批量下载阴阳师网站壁纸
2021/05/19 Python