微搭问搭001-如何清空表单的数据
创始人
2024-06-01 01:13:36
0

韩老师,我点关闭按钮后,弹窗从新打开,里面的数据还在,这个可以从新打开清除不?

在这里插入图片描述

点关闭的时候清掉

就是清楚不掉也?咋清掉

清掉表单内容有属性可以做到?

在这里插入图片描述

$page.widgets.id**.value = “” 就可以实现清空

日常我们经常有这种需求,点击一个弹框,输入内容,在弹框关闭后将输入的内容清空。有粉丝问那有没有方法可以直接用呢?类似于表单的reset方法,目前看微搭不提供组件的内置方法可以一次性清空表单内容,这就要求我们自己用代码实现。

我们如果要还原这位学员的场景,先需要搭建一个弹窗组件

在这里插入图片描述
有学员问,弹窗组件如何往里添加内容,弹窗组件是分为两个插槽,一个是按钮插槽,一个是内容插槽。按钮插槽可以让我们自己决定放置哪些按钮,而内容插槽可以放置各类组件,一般我们可以放置表单类的组件,比如像开始学员问的是放置的单行输入和图片上传组件

在这里插入图片描述
这位学员问的问题是点击关闭按钮,清空表单组件输入的内容,我们首先要解决窗口如何关闭的问题。

现在弹窗组件已经提供了组件的内置方法可以实现窗口的关闭和打开,在右下角的事件,我们选择点击关闭按钮

在这里插入图片描述
在弹出的窗口里选择弹窗

在这里插入图片描述
在下一个界面我们选择关闭窗口

在这里插入图片描述

我们是要在关闭时清空表单内容,这里就涉及到一个链式调用的问题,可以在切换开关状态成功时我们继续调用方法
在这里插入图片描述
选择的动作是Javascript代码
在这里插入图片描述
选择添加新方法,输入方法名称,方法里的内容写入清空表单组件的输入内容
在这里插入图片描述
代码的话就是我开始讲的通过重置组件的输入内容属性来清空,先需要找到组件的组件Id
在这里插入图片描述
重置语句是

$page.widgets.formInput1.value = ""

这里讲解一下这句话用到了javascript表达式的概念,操作数1 操作符 操作数2 ,等号表示赋值的意思,它会将操作数2的值赋值给操作数1,这样通过赋予空字符串就实现了清空表单内容的目的。

完整代码

$page.widgets.formInput1.value = ""
$page.widgets.formImageUploader1.value=""

设置好了之后,我们再添加个按钮组件,点击的时候再次让窗口打开

在这里插入图片描述最终效果

在这里插入图片描述

相关内容

热门资讯

监控摄像头接入GB28181平... 流程简介将监控摄像头的视频在网站和APP中直播,要解决的几个问题是:1&...
Windows10添加群晖磁盘... 在使用群晖NAS时,我们需要通过本地映射的方式把NAS映射成本地的一块磁盘使用。 通过...
protocol buffer... 目录 目录 什么是protocol buffer 1.protobuf 1.1安装  1.2使用...
在Word、WPS中插入AxM... 引言 我最近需要写一些文章,在排版时发现AxMath插入的公式竟然会导致行间距异常&#...
【PdgCntEditor】解... 一、问题背景 大部分的图书对应的PDF,目录中的页码并非PDF中直接索引的页码...
修复 爱普生 EPSON L4... L4151 L4153 L4156 L4158 L4163 L4165 L4166 L4168 L4...
Fluent中创建监测点 1 概述某些仿真问题,需要创建监测点,用于获取空间定点的数据࿰...
educoder数据结构与算法...                                                   ...
MySQL下载和安装(Wind... 前言:刚换了一台电脑,里面所有东西都需要重新配置,习惯了所...
MFC文件操作  MFC提供了一个文件操作的基类CFile,这个类提供了一个没有缓存的二进制格式的磁盘...