微信小程序之使用Vant Weapp做一个弹窗填写文本

在小程序中，我们经常使用到输入文本框这个组件。比如要填写个人信息，填信息就要去跳转到一个填信息的页面，这样操作起来会有点浪费空间和时间。比如我只需要改一个自己的名字或者一点别的信息就要跳转到另外一个页面，实在是有点小题大做。

于是就想用弹窗的方式，填写信息，进行提交。

在网上找了类似的资料，都不太满意，总觉得太麻烦了，还是自己做吧。

于是想到了Vant ，这个UI框架很好用，简单安装，直接拿来它们封装好的组件即可。

先看我做的效果吧：

输入完信息，点击确定，控制台获取输入信息：

官网：Vant

官网有安装教程很简单，在此就不做介绍了。
我们直奔主题：做一个弹窗填写文本信息。

来到官网，找到 弹出窗

首先，我们需要在app.json或者要使用组件的页面的json文件中添加引用，才可以使用该组件。

这里需要注意，在引入的时候，需要根据你自己安装的vant路径进行引入。

接着我们就去官网探一探：

组件调用这种模式刚好符合我们所需要的弹窗填写文本。

我们只需要轻轻的改动一下：
wxml:

<van-dialog use-slot title="更改名称" show="{{ show }}" show-cancel-button  bind:close="onClose" show-confirm-button="{{false}}">
			<form bindsubmit="formSubmit">
                <input class="chageName" name="nickName" auto-focus placeholder="请输入"/>
                <button formType="submit" style="color:skyblue">确定</button>
            </form>
		</van-dialog>

js:

data:{
	show: false
}

fixName:function(){      //点击组件弹出弹窗，在相应的组件上绑定此函数
   this.setData({
      show:true
    })
  },
onClose() {
  this.setData({ close: false });    //点击取消按钮，弹窗隐藏
},

 formSubmit:function(e){        //确定按钮执行此提交事件
     console.log(e.detail.value)
     //写你的逻辑代码
     wx.showToast({
       title: '修改成功',
       icon:'success'
     })
     this.setData({
       show:false
     })
   }

关于此组件有很多用法，详情可以参考官方文档。有一些坑我已在上面的示例代码中修复，如果你的需求和我的展示示例相类似，你可以直接那我的代码去进行修改。

官方给的这些属性，都可以拿来使用。另外弹窗布局也可以根据你自己的需要进行修改。

需要注意的是：在使用布尔类型的属性时，属性值双引号里面姚家还是那个双花括号才可以实现。

一些基本的操作就这些了，有不懂的可以下方评论一起进行讨论哦！

欢迎关注公众号【夜来疏影】