使用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的提示操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vant中的toast层级改变操作

    1.toast在main.js中引用 2.在每个页面中使用toast 3.每个页面有一个私有样式scoped,因此类名inexa的层级写在app.vue里 注:toast每调用一次(z-index)层级就会加一,因为默认打开了新窗口,层级会加一 补充知识:vant-ui toast和dialog使用 vant-ui中的toast和dialog使用 Toast('提示') Dialog({ message: '提示' }) //直接用官网的写法会报未定义 应该这样写 this.$toast('提示

  • Vant 中的Toast设置全局的延迟时间操作

    在引入Toast的配置文件里面配置如下: import { Toast } from 'vant'; Vue.use(Toast); Toast.setDefaultOptions({ duration: 800 }); // duration延迟时间 --完. 补充知识:vant ui库 toast 的使用及封装 最近在写一个项目,表单项较多,那必然前端做验证也是必须的了,一个一个写太繁琐,封装起来直接调用即可: 1.新建 toast.js import { Toast } from 'van

  • vant-ui组件调用Dialog弹窗异步关闭操作

    需求描述: 需求描述:官方文档又是组件调用方式,又是函数调用方式. 我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗. 一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果.网速慢点,用起来真的很不好. 正确的解决方式一: <van-dialog v-model="showDialog" title="提示" show-cancel-b

  • Vant 在vue-cli 4.x中按需加载操作

    在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** "plugins": [ ["import",{ "libraryName":"vant&q

  • vant中的toast轻提示实现代码

    在main.js中按需引入 import { Toast } from 'vant Vue.use(Toast) 页面中的methods中使用 send(name, img) { let msg = `${this.Cname}送${name}1`; this.$toast({ message: msg, icon: img }); }, 补充知识:Vant的Toast 轻提示API文档不准确解决方案 开发企业微信应用使用Vant组件库过程中,想要用到轻提示Toast,发现API文档无法使用:

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

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

    效果: 代码展示: <template> <!-- 通知消息提示 --> <div id="notify"> <van-button type="primary" @click="toNotify" class="btn">顶部通知</van-button> </div> </template> <script> export de

  • 解决vant的Toast组件时提示not defined的问题

    按照官方文档引入全局Toast组件,在methods里面定义函数执行函数时产生了报错: //定义的函数 handleClick(){ Toast('点击提示') } 报错信息 [Vue warn]: Error in v-on handler: "ReferenceError: Toast is not defined" 解决方法: handleClick(){ this.$toast('点击提示') } 补充知识:vue+vant移动端遇到的那些问题 1.项目引用了lib-flexi

  • jquery实现的用户注册表单提示操作效果代码分享

    jquery实现的用户注册表单提示操作效果代码分享

    本文实例讲述了jquery实现的用户注册表单提示操作效果.分享给大家供大家参考.具体如下: jQuery实现的用户注册表单上方弹窗提示文字特效源码,是一段不仅可以在输入的表单上方提示注意事项,同时也可以进行输入验证的代码,是一款非常实用的特效代码,值得大家学习. 运行效果图:                               -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分

  • vue element ui validate 主动触发错误提示操作

    elementUI使用了async-validator进行表单验证,但是当我使用下拉树(el-cascader)时,发现其不主动触发,于是我只能主动去触发,方法如下: this.$refs['form'].fields[0].validateMessage = 'error message' this.$refs['form'].fields[0].validateState = 'error' 补充知识:element-ui 打开页面触发校验问题 如果你设置了关闭弹出页就resetFields

  • 使用Vant完成DatetimePicker 日期的选择器操作

    效果展示: 代码展示: <template> <div id="date_time_picker"> <van-button plain type="primary" @click="showPopFn()">点击选择日期</van-button> <van-field v-model="timeValue" placeholder="选择的日期结果"

  • mybatis的dtd约束文件及配置文件xml自动提示操作

    mybatis的dtd约束文件及配置文件xml自动提示操作

    一.mybatis的dtd约束文件位置 我使用的是mybatis-3.2.7这个版本的mybatis,里面的核心jar包是:mybatis-3.2.7.jar,将这个jar包解压缩后进入\org\apache\ibatis\builder\xml 二.mybatis的dtd约束文件下载 (1)mybatis-3-config.dtd约束文件下载: http://mybatis.org/dtd/mybatis-3-config.dtd (2)mybatis-3-mapper.dtd约束文件下载:

  • 使用Vant如何完成各种Toast提示框

    使用Vant如何完成各种Toast提示框

    目录 Vant完成各种Toast提示框 效果展示 Vant Toast用法 1.首先引入 2.写事件 3.效果图如下 Vant完成各种Toast提示框 效果展示 (1)使用前的需要安装Vant奥. (2)在main.js里面引入Toast import { Toast } from 'vant'; Vue.use(Toast); (3)在页面使用:(根据步骤代码可以运行奥  Toast.vue文件)(上面截图的,在下面代码都有栗子奥). <template>   <!-- Toast提示

  • Sqlserver 2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法

    Sqlserver 2005附加数据库时出错提示操作系统错误5(拒绝访问)错误5120的解决办法

    最近几天从网上找了几个asp.net的登录案例想要研究研究代码,结果在用Sql Server2005附加数据库文件时弹出错误信息: 看到网友回复说:只需给Authenticated Users赋所有权限就行了. 本人也遇到类似的问题,但是解决方法很简单,只需要使用管理员的身份打开SQL Server Management Studio,即可附加数据库了 如下图:  ,一时无解,遂求助于百度谷歌,经过各种试验,特将解决办法整理于此,希望能帮到大家,同时如果有好的意见大家多多交流啊! 方案一:切换登

随机推荐