微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式

vantweapp中Dialog弹出框使用组件调用，怎么将form表单的提交按钮与Dialog弹出框相结合呢

解决方案：

wxml代码

<van-dialoguse-slottitle="商品详情"show="{{true}}"confirmButtonText="修改"show-confirm-button="{{false}}"show-cancel-buttonbind:cancel="dialogOnClose"
><form bindsubmit="updategoodlist"><input name="barcode" placeholder="请输入条形码" value="6913825649859"></input><input name="name" placeholder="请输入商品名称" value="测试商品"></input><button formType="submit" class="submitbtn">提交</button></form>
</van-dialog>

wxss代码

/*提交按钮样式*/
.submitbtn{color:#1989fa;position: relative;top:2rpx;border: none;float: right;background-color: #fff;width: 50%;height: 100%;
}
/*清除按钮边框*/
.submitbtn::after {border: none
}

JavaScript代码

//确定提交弹窗按钮updategoodlist(res){wx.showLoading({title: '正在提交',mask:true})//解构赋值var {barcode,name} = res.detail.value;//云函数wx.cloud.callFunction({name:"goodsUpdateData",data:{barcode:barcode,name:name}}).then(res => {console.log(res)this.setData({show:false})wx.hideLoading()})},//取消修改弹窗按钮dialogOnClose(){console.log("关闭弹窗")},

app.json代码

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

测试效果

微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式相关推荐

【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
html表单弹窗提示框,【前端】弹出框提交表单
[前端]弹出框提交表单发布时间:2018-11-03 22:30, 浏览次数:826 目录 * 功能描述 * 效果截图 * 代码 * html代码 * 触发弹出窗口的按钮 * js代码 * 弹出框的 ...
微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）
实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...
JEECG弹出框提交表单
一.设备主页面(deviceMain.jsp) <t:dgToolBar title="编辑设备" icon="icon-edit" url=" ...
微信小程序评论input 弹出框
运用了一个组件: https://youzan.github.io/vant-weapp/#/popup 这里面有详细的介绍和使用方法!!! 需求:点击评论,弹出评论的输入框,再次点击评论又会隐藏弹出 ...
微信小程序自定义showmodal 弹出框
最近一直忙着修改bug 增加新功能,好久没总结了,也不知道该总结啥,先写一个自定义showmodal框吧废话少说直接上代码 wxml部分 <view class="mask" ...
微信小程序实现气泡弹出框
这个组件可以实现引用别人的组件,上面github可以很好的实现气泡弹窗效果 <view style="margin-top: 200rpx;" class="he ...
layui写弹出框显示表单信息_layui 弹出框提交表单
layer.open({ type:1, title:"发送消息", skin:"myclass",//自定样式 area:["800px" ...

微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式

vantweapp中Dialog弹出框使用组件调用，怎么将form表单的提交按钮与Dialog弹出框相结合呢

解决方案：

微信小程序vantweapp-Dialog弹出框提交表单，并还原确定按钮样式相关推荐

最新文章

热门文章