美文网首页
在小程序里引入使用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