uniapp 手动调用form表单submit事件

背景:

UI把提交的按钮弄成了图片,之前的button不能用了。

<button form-type="submit">搜索</button>

实现:

html:

通过 this.$refs.fd 获取到form的vue对象。手动调用里面的_onSubmit()方法。

复制代码
methods: {
		search(){//图片点击事件
			console.log(this.$refs.fd);
			this.$refs.fd._onSubmit();//手动调用formvue对象的_onSubmit()方法
			// console.log(this.$refs.targetBtn);
		},
		formSubmit(e) {  //原来的form submit事件 不要动,留着
			console.log(e) // 获取原生的 input 事件对
			this.list =[];
			this.formParam =  e.detail.value;
			this.to_Ajax({ ...this.param, ...this.formParam,...this.model});//合并三个参数对象并传递
		},
		formReset(){
			this.param.page = 0;
			this.list = [];
			this.to_Ajax({ ...this.param,...this.model});
			},//合并三个参数对象并传递
		reset(){
			console.log(this.$refs.fd);
			this.$refs.fd._onReset()
			// console.log(this.$refs.targetBtn);
		},
相关推荐
paopaokaka_luck4 小时前
基于SpringBoot+Uniapp球场预约小程序(腾讯地图API、Echarts图形化分析、二维码识别)
spring boot·小程序·uni-app
于慨4 小时前
uniapp各端通过webview实现互相通信
uni-app
初出茅庐的10 小时前
uniapp - AI 聊天页面布局的实现
前端·vue.js·uni-app
初出茅庐的12 小时前
uniapp - 键盘上推 踩坑
前端·vue.js·uni-app
2501_9151063216 小时前
iOS 抓包工具选择与配置指南 从零基础到高效调试的完整流程
android·ios·小程序·https·uni-app·iphone·webview
2c237c617 小时前
Uniapp中双弹窗为什么无法显示?
android·javascript·uni-app
芒果沙冰哟19 小时前
uniapp小程序实现地图多个标记点
javascript·vue.js·小程序·uni-app
摆烂式编程19 小时前
APP端定位实现(uniapp Vue3)(腾讯地图)
uni-app·app·vue3·定位·腾讯
傻傻有内涵的我19 小时前
【uni-ui】hbuilderx的uniapp 配置 -小程序左滑出现删除等功能
小程序·uni-app
Heyuan_Xie1 天前
uni-app 选择国家区号
uni-app·uni-app插件·区号选择