微搭问搭001-如何清空表单的数据

news2024/11/28 16:48:36

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

在这里插入图片描述

点关闭的时候清掉

就是清楚不掉也?咋清掉

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

在这里插入图片描述

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

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

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

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

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

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

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

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

在这里插入图片描述

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

$page.widgets.formInput1.value = ""

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

完整代码

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

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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/402210.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HCIP-5.4OSPF路由聚合、缺省路由

1、路由聚合 OSPF 是一种链路状态路由协议,因此 OSPF路由器不传输路由,而是传输链路状态信息。因此,OSPF 路由通过汇总 LSA 来控制链路状态信息的传输,从而减小 LSDB 数据库的大小,进而控制路由的汇总。 由于OSPF路由…

Object对象键值的输出循序到底如何排列的?

1.日常摸鱼看八股 今天又是复习八股文的一天,发现还是彻底懂得原理才好和面试官吹牛批呀。 接着来看看我chat大宝贝的回答: 在现代浏览器中,Object 对象的键值输出循序是比较稳定的,通常是按照如下顺序输出: 所有的数…

打怪升级之如何发送HEX进制的数据出去

Hex数据老大难 不少人都困扰于如何将电脑中读取到的string类型的数据变成整形发送出去。一半来说,不论你调用的通信方式是串口的还是网络的,亦或是PCIE的,其在电脑端的实际情况都是以系统API的形式呈现的。而系统API函数提供的接口&#xff…

项目实战典型案例23——-注册上nacos上的部分服务总是出现频繁掉线的情况

注册上nacos上的部分服务总是出现频繁掉线的情况一:背景介绍二:思路&方案解决问题过程涉及到的知识nacos服务注册和服务发现一:背景介绍 spring cloud项目通过nacos作为服务中心和配置中心,出现的问题是其中几个服务总是出现…

【电子通识】案例:从YS-CH341T USB转IIC和UART模块使用学习如何找资料

最近在调一个充电芯片,要用到IIC与充电芯片通信来读取和写入充电芯片寄存器,控制充电芯片的各种参数。从以前老员工那里捡到一个这样的模块,模块背面写了YS-CH341T。看着有IIC通信的样子,所以先在网上找一下资料。首先先在网上找到…

npm安装依赖包:405 Method Not Allowed...

运用npm安装依赖包时报错,错误如下。 解决思路: 关注到错误信息上写明了 Method Not Allowed,其后注明了 GET请求以及一个url,说明极有可能是不允许向这个路由发送GET请求; 在浏览器中尝试打开这个地址,结…

在分析了共50亿美元的加密融资之后,我们发现了这些

对加密市场嗅觉敏锐的玩家来说,市场中项目融资是不得不关注的选项,不少优质项目拿到了巨额融资之后,被大家所关注,在20-21年期间,行业内也出现了不少一级机构,布局早期项目,获取时代红利已经成为…

圆桌(满足客人空座需求,合理安排客人入座圆桌,准备最少的椅子)

CSDN周赛第30期第四题算法解析。 (本文获得CSDN质量评分【91】)【学习的细节是欢悦的历程】Python 官网:https://www.python.org/ Free:大咖免费“圣经”教程《 python 完全自学教程》,不仅仅是基础那么简单…… 地址:https://lq…

什么是业务运营?关键组成部分有哪些?

企业领导者使用收入运营和智能软件等技术来分析买家的不同接触点。这些见解决定了客户互动的成败,从而改善了业务运营,从而带来了成功。 什么是业务运营? 业务运营包括企业为保持盈利而执行的一系列日常任务。虽然这些任务可能因业务类型或行…

主辅助服务市场出清模型研究【旋转备用】(Matlab代码实现)

👨‍🎓个人主页:研学社的博客💥💥💞💞欢迎来到本博客❤️❤️💥💥🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密…

【已解决】Python的坑:os.system()运行带有空格的长路径和双引号参数有bug

在Python代码里运行DOS命令,可以使用os库的os.system()函数。其用法很简单,需要注意的是os.system不会返回输出的结果赋予一个变量。今天我发现了一个bug:当DOS命令行带有双引号路径、双引号参数时,os.system()运行的结果总是显示…

带你认识什么是485通信

在现代工业控制系统中,常常需要实现分布式控制,而分布式控制需要实现不同设备之间的通信。其中,485通信协议是一种被广泛使用的通信协议之一。1. 介绍A. 485通信的定义485通信协议是一种串行通信协议,也被称为RS-485。它是由美国电…

300. 最长递增子序列——【Leetcode每日刷题】

300. 最长递增子序列 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子…

leetcode 1648. 销售价值减少的颜色球

1648. 销售价值减少的颜色球这道题不知为何总想记录下来,思路很简单,但是实现总是出错,这也许就是要记录的原因。再一个觉得题解写的比较难以理解,所以再细致一些解析。希望可以帮到实在搞不懂的同学 思路: 目的:我们…

聚观早报|谷歌发布最大视觉语言模型;王兴投资王慧文ChatGPT项目

今日要闻:谷歌发布全球最大视觉语言模型;马斯克预计Twitter下季度现金流转正;王兴投资王慧文ChatGPT项目;美国拟明年 11 月开展载人绕月飞行;慧与科技宣布收购Athonet谷歌发布全球最大视觉语言模型 近日,来…

RocketMQ重复消费的症状以及解决方案

RocketMQ重复消费的症状以及解决方案 生产消息时重复 症状 当一条消息已被成功发送到 消费者 并完成持久化,此时出现了网络闪断或者客户端宕机,导致服务端对客户端应答失败。 如果此时 生产者 意识到消息发送失败并尝试再次发送消息,消费者…

学习 Python 之 Pygame 开发魂斗罗(十一)

学习 Python 之 Pygame 开发魂斗罗(十一)继续编写魂斗罗1. 改写主类函数中的代码顺序2. 修改玩家初始化3. 显示玩家生命值4. 设置玩家碰到敌人死亡5. 设置敌人子弹击中玩家6. 修改updatePlayerPosition()函数逻辑继续编写魂斗罗 在上次的博客学习 Pytho…

【Flutter从入门到入坑】Flutter 知识体系

学习 Flutter 需要掌握哪些知识? 终端设备越来越碎片化,需要支持的操作系统越来越多,从研发效率和维护成本综合考虑,跨平台开发一定是未来大前端的趋势,我们应该拥抱变化。而 Flutter 提供了一套彻底的移动跨平台方案…

【AlgorithmTraining】06:STL容器使用与练习(上)

STL容器的使用与练习(上) OVERVIEWSTL容器的使用与练习(上)string类1.vector动态数组:(1)vector动态一维数组:(2)vector动态二维数组:2.deque双端…

VR全景旅游,成为数字文旅破局关键!

导语:VR全景技术是一种基于虚拟现实技术的全景图像显示技术,已经在各个领域得到广泛应用。在旅游业中,VR全景技术也越来越受到重视,并逐渐成为旅游业发展的重要趋势。本文将介绍VR全景技术在旅游业中的应用场景和价值,…