微信小程序之使用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})}

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

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

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

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

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

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

微信小程序中使用Vant Weapp的dialog弹窗
最终实现效果: 实现方式很简单,我一共分为以下四步: 第一步:在界面的json文件中引入组件: {"usingComponents": {"van-search" ...
微信小程序中使用vant weapp 的dialog组件
微信小程序中使用vant weapp 的dialog组件官方文档路径:import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';,这不是 ...
在微信小程序里引入Vant Weapp组件库详细步骤
1. 新建一个文件夹. 2. 使用微信开发者工具选择一个模板(这里以javaScript 基础模板为例) 选择完模板之后如下: 2. 右键打开终端:按如下步骤执行命令. ① npm init 解释 ...
微信小程序中使用Vant Weapp组件--以card为例
一.构建环境: Vant Weapp官网文档: https://youzan.github.io/vant-weapp/#/quickstart 1.方法一注意要在微信小程序根目录下安装:用cmd命令 ...
微信小程序中使用Vant Weapp组件库
介绍 Vant 是一个轻量.可靠的移动端组件库,于 2017 年开源. 目前 Vant 官方提供了 Vue 2 版本.Vue 3 版本和微信小程序版本,并由社区团队维护 React 版本和支付宝小程序 ...
微信小程序：使用vant weapp安装并使用组件
两种方法: 第一种是直接去git官网,下载,然后将下载完的dist文件,复制到你本地就行或者是git clone https://github.com/youzan/vant-weapp.git g ...
微信小程序制作（Vant Weapp）
1.微信开发者工具创建小程序 2.cmd进入到WeChatApp目录,npm init,一路回车直到结束 3. npm i @vant/weapp -S --production 4.将 app.js ...
微信小程序安装使用Vant Weapp
一.先检查是否安装nodejs 1.按住win+R,输入cmd回车,打开控制台,输入node -v,若显示版本号,则表示已安装nodejs,若显示node不是内部命令,则表示没有安装 2.若没有安装, ...
微信小程序正确引入Vant Weapp
官网链接: https://vant-ui.github.io/vant-weapp/#/quickstart 我根据官网步骤,到后面构建npm时会报路径错误问题,如图这个问题是因为下载插件时,会 ...

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

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

最新文章

热门文章