使用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 相关文章推荐
javascript闭包的高级使用方法实例
Jul 04 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
Jan 24 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
jquery实现模拟百分比进度条渐变效果代码
Oct 29 Javascript
简单的分页代码js实现
May 17 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
Jan 22 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
Mar 30 Javascript
简单实现js轮播图效果
Jul 14 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
Sep 25 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
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
搜索附近的人PHP实现代码
2018/02/11 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
jQuery 1.7.2中getAll方法的疑惑分析
2012/05/23 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
如何快速上手Vuex
2017/02/14 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
JavaScript基础之this详解
2017/06/04 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
JS实现轮播图效果
2020/01/11 Javascript
vue中实现回车键登录功能
2020/02/19 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
1亿有多大教学反思
2014/05/01 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
长城导游词
2015/01/30 职场文书
创业计划书之家教中心
2019/09/25 职场文书
python多次执行绘制条形图
2022/04/20 Python