美文网首页
在小程序里引入使用Toast

在小程序里引入使用Toast

作者: 静昕妈妈芦培培 | 来源:发表于2021-01-26 15:39 被阅读0次

项目需求:想要在info页面使用Toast组件

1.引入

全局引入(推荐)

app.json中引入组件,

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

局部引入

info.json中引入组件,

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

2.在info.wxml中使用

  <!-- 轻提示 -->
  <van-toast id="van-toast" />

3.在info.js导入toast并使用

import Toast from '@vant/weapp/toast/toast';
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 方法
   */
  validateInfo1() {
    if(!this.data.info.name) {
      Toast.fail('名字不能为空!')
      return false 
    }
    return true
  },
})

相关文章

网友评论

      本文标题:在小程序里引入使用Toast

      本文链接:https://www.haomeiwen.com/subject/efigzktx.html