你还在重复编写表单代码吗?封装一个组件不香吗?

2023-10-29 21:40

本文主要是介绍你还在重复编写表单代码吗?封装一个组件不香吗?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

说在前面

🎈表单是我们平时在很多情况下都会用到的,那么重复的编写表单代码会不会让你感到厌烦呢?如果将其封装成一个可配置组件的话是不是会减少我们很多的工作量。

组件效果

image.png

具体效果如上图,组件主要包括三部分,分别是上面头部标题,中间的表单主体以及下面的操作按钮三大部分。

组件实现

image.png

组件可以具体划分为这么几部分进行实现:

1、弹窗遮罩

使用一个fixed定位的view元素覆盖整个页面,设置合适的背景颜色、层级和透明度即可。

  • wxml
<view bindtap="hideModal" catchtouchmove="preventTouchMove" class="modal-mask" wx:if="{{!hiddenmodalput}}"></view>
  • wxss
.modal-mask {width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000;opacity: 0.5;overflow: hidden;z-index: 9000;color: #fff;
}

2、表单组件

2.1 配置规则定义

我们是希望可以通过传入配置信息到组件中,组件就可以生成我们想要的对应的表单呈现出来,那么我们需要先将配置信息的相关规则定义好,如下:

formData:[{name:'platform',cname:'平台|软件',value:'',type:'input',hide:false,placeholder:'平台|软件',},{name:'account',cname:'账号',value:'',type:'input',hide:false,placeholder:'账号',},{name:'password',cname:'密码',value:'',type:'input',hide:false,placeholder:'密码',},{name:'mark',cname:'备注',value:'',type:'textarea',hide:false,placeholder:'备注',}
],

上面是我自己定义的一个配置信息规则的例子,这里的配置项主要有6项,分别是:
name:该表单项的字段名;
cname:该表单项的中文名;
value:该表单项的值;
type:该表单项的展示类型;
hide:是否展示该表单项;
placeholder:该表单项的默认提示内容;
这是我结合自己的需求做出的一个配置,大家可以根据自己的实际需求来制定自己的配置信息。

2.2 配置规则处理

定义好了自己组件的一个配置规则之后,我们就需要在组件中对其进行适配处理了,下面还是以我上面制定的规则为例,简单描述一下处理过程:

  • 参数定义
    先在组件的properties中定义好需要父组件传入的参数。
properties: {formData:Array,hiddenmodalput:Boolean,tip:String
},
2.2.1 表单渲染

我们需要根据父组件传入的配置表生成对应的表单项,我们可以根据配置项的type字段来确定需要生成的表单项类型,如input为输入框、textarea为多行文本输入框、date为日期选择框、time为时间选择框……更多的类型可以自由扩展,我们只需要在这里进行一次处理,后面调用的时候传入对应的类型即可自动生成,这样可以省去我们很多重复的代码工作,具体实现代码如下:

<view catchtouchmove="preventTouchMove" class="modal-dialog" wx:if="{{!hiddenmodalput}}"><view class="modal-title">{{tip}}</view><view class="modal-content"><view wx:for="{{showFormData}}" wx:key="index"><view wx:if="{{!item.hide && item.type=='input'}}" class="modal-input"><input data-ind="{{index}}" bindinput="inputItem" class="input" maxlength="20" placeholder="{{item.placeholder}}" placeholderClass="input-holder" type="text" value="{{item.value}}"></input></view><view wx:if="{{!item.hide && item.type=='textarea'}}" class="modal-input"><textarea data-ind="{{index}}" bindinput="inputItem" class="input" maxlength="20" placeholder="{{item.placeholder}}" placeholderClass="input-holder" type="text" value="{{item.value}}"></textarea></view><view wx:if="{{!item.hide && item.type=='date'}}" class="modal-input"><picker data-ind="{{index}}" bindchange="inputItem" class="input-holder" end="2100-01-01" mode="date" start="{{item.value}}" value="{{item.value}}"><input class="input" disabled="ture" maxlength="20" placeholder="{{item.placeholder}}" placeholderClass="input-holder" type="text" value="{{item.value}}"></input></picker></view><view wx:if="{{!item.hide && item.type=='time'}}" class="modal-input"><picker data-ind="{{index}}" bindchange="inputItem" class="in" mode="time" start=""><input class="input" maxlength="20" placeholder="{{item.placeholder}}" placeholderClass="input-holder" type="text" value="{{item.value}}"></input></picker></view></view></view><view class="modal-footer"><view bindtap="cancel" class="btn-cancel" data-status="cancel">取消</view><view bindtap="confirm" class="btn-confirm" data-status="confirm">确定</view></view>
</view>
2.2.2 表单项数据监听

将表单项渲染展示出来之后,我们还需要可以对其进行数据处理,所以我们要监听每一个表单项的数值变化,并实时传递给父组件,父组件也可以及时根据表单项数值的变化进行一些相关的逻辑处理,这里我是这样处理的,我们以input类型的表单项来举例,代码如下:

<view wx:if="{{!item.hide && item.type=='input'}}" class="modal-input"><input data-ind="{{index}}" bindinput="inputItem" class="input" maxlength="20" placeholder="{{item.placeholder}}" placeholderClass="input-holder" type="text" value="{{item.value}}"></input>
</view>

看完上面代码可以发现,我们在组件的input事件上绑定了一个函数inputItem,通过这个函数来进行数据处理,那么让我们继续看看这个函数又进行了什么操作。

inputItem:function(e){let ind = e.target.dataset.ind;let val = e.detail.value;this.triggerEvent("inputItem", {ind:ind,val:val});
},

其实这个函数并没有进行什么特殊的处理,只是将数组变化的表单项下标和变化后的数组传递给父组件。

3、底部按钮

表单在填写完之后往往需要进行一个提交的操作,所以这里我也将确认按钮封装到了组件中。

<view class="modal-footer"><view bindtap="cancel" class="btn-cancel" data-status="cancel">取消</view><view bindtap="confirm" class="btn-confirm" data-status="confirm">确定</view>
</view>
confirm:function(){this.triggerEvent("confirm",{});
},
cancel:function(){this.triggerEvent("cancel",{});
}

组件使用

组件封装完了之后我们就该来使用一下试试效果了,那么具体该怎么使用呢?

1、组件引入

需要现在需要使用组件的页面json文件中引入组件

"usingComponents": {"modalDialog": "../../../components/modalDialog/modalDialog"
},

2、页面中使用

引入之后我们就该在页面中使用了,我们可以直接使用引入时定义的名称作为标签名,将相关的配置信息和事件绑定到组件上即可,代码如下:

  • wxml页面
<modalDialog bind:inputItem="inputItem" bind:cancel="cancel" bind:confirm="confirm" hiddenmodalput="{{hiddenmodalput}}" formData="{{formData}}"tip="{{tip}}">
</modalDialog>
  • 表单配置项
formData:[{name:'platform',cname:'平台|软件',value:'',type:'input',placeholder:'平台|软件',},{name:'account',cname:'账号',value:'',type:'input',placeholder:'账号',},{name:'password',cname:'密码',value:'',type:'input',placeholder:'密码',},{name:'mark',cname:'备注',value:'',type:'textarea',placeholder:'备注',}
],
tip:'添加信息',
hiddenmodalput:true,
  • 表单项数据监听
inputItem:function(e){let formData = this.data.formData;formData[e.detail.ind].value = e.detail.val;this.setData({formData:formData});
},
  • 取消按钮
cancel: function() {this.setData({hiddenmodalput: true});this.clearFormData();
},
  • 确认按钮
confirm: function() {this.setData({hiddenmodalput: true});this.clearFormData();
},

源码地址

该组件是在我的一个开源项目中封装使用的,需要查看源码的可以到该项目中查看:\

Gitee源码:https://gitee.com/zheng_yongtao/me-and-my-doodle/tree/master/miniprogram/components/modalDialog

觉得有帮助的同学可以帮忙给我点个star,感激不尽~~~
有什么想法或者改良可以给我提个pr,十分欢迎~~~
有什么问题都可以在评论告诉我~~~

往期精彩

vue封装一个图案手势锁组件

vue封装一个弹幕组件

为了学(mo)习(yu),我竟开发了这样一个插件

程序员的浪漫之——情侣日常小程序

JavaScript双向链表实现LRU缓存算法

JavaScript双向链表实现LFU缓存算法

JavaScript实现前缀树

vue简单实现词云图组件

vue + echarts实现中国地图省份下钻联动

纯CSS实现悬浮提示并封装成vue组件

使用学过的算法做个游戏很酷的好吗

说在后面

🎉这里是JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球🏸 ,平时也喜欢写些东西,既为自己记录📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解🙇,写错的地方望指出,定会认真改进😊,在此谢谢大家的支持,我们下文再见🙌。

这篇关于你还在重复编写表单代码吗?封装一个组件不香吗?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/303519

相关文章

使用Dify访问mysql数据库详细代码示例

《使用Dify访问mysql数据库详细代码示例》:本文主要介绍使用Dify访问mysql数据库的相关资料,并详细讲解了如何在本地搭建数据库访问服务,使用ngrok暴露到公网,并创建知识库、数据库访... 1、在本地搭建数据库访问的服务,并使用ngrok暴露到公网。#sql_tools.pyfrom

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

Java springBoot初步使用websocket的代码示例

《JavaspringBoot初步使用websocket的代码示例》:本文主要介绍JavaspringBoot初步使用websocket的相关资料,WebSocket是一种实现实时双向通信的协... 目录一、什么是websocket二、依赖坐标地址1.springBoot父级依赖2.springBoot依赖

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

讯飞webapi语音识别接口调用示例代码(python)

《讯飞webapi语音识别接口调用示例代码(python)》:本文主要介绍如何使用Python3调用讯飞WebAPI语音识别接口,重点解决了在处理语音识别结果时判断是否为最后一帧的问题,通过运行代... 目录前言一、环境二、引入库三、代码实例四、运行结果五、总结前言基于python3 讯飞webAPI语音

什么是 Java 的 CyclicBarrier(代码示例)

《什么是Java的CyclicBarrier(代码示例)》CyclicBarrier是多线程协同的利器,适合需要多次同步的场景,本文通过代码示例讲解什么是Java的CyclicBarrier,感... 你的回答(口语化,面试场景)面试官:什么是 Java 的 CyclicBarrier?你:好的,我来举个例

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》:本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示,通过Canvas的API,可以绘制出6个不同城市的时钟,并且这些时钟可以动态转动,每个时钟上都会标注出对应的24小时制时间,详细内容请阅读本文,希望能对你有所帮助...

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像