uni表单组件封装

展示效果

表单效果

组件介绍

组件说明

此组件为一个输入框，利用它可以快速实现表单验证，输入内容

基本使用

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
type	输入内容的类型	String	text	text / number
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	初始值，用于编辑页面绑定值	String, Number	-	-
placeholder	placeholder显示值	String	请输入数据	-
required	是否必填	Boolean	false	false / true
rule	正则表达式，用于表单验证	String	-	-
errTip	错误提示	String	请输入正确的数据	-

组件说明

此组件为一个多行输入框，利用它可以快速实现表单验证，输入内容

基本使用

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	初始值	String，用于编辑页面绑定值	-	-
placeholder	placeholder显示值	String	请输入数据	-
required	是否必填	Boolean	false	false / true
maxlength	限制文本输入的最长字符串	Number	100	-

组件说明

此组件为一个单选框，数据在当前页面

基本使用


data() {
    return {
        Fruits:[{
            id:1,
            label:'苹果'
        },{
            id:2,
            label:'香蕉'
        }]
    }
},

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	list数据对应的索引，-1代表不选中，用于编辑页面绑定值	Number	-1	-
list	带选择的数据列表，对象结构得满足{id:0,label:'名称'}	Array	[]	-
required	是否必填	Boolean	false	false / true

说明

当未选中任何值时，返回数据为null，否则返回数据对象{id:0,label:'名称'}。

组件说明

此组件为一个多选框，数据在当前页面

基本使用


data() {
    return {
        Fruits:[{
            id:1,
            label:'苹果'
        },{
            id:2,
            label:'香蕉'
        }],
        activeFruits:[]
    }
},

Props

参数	说明	类型	默认值	可选值
label	标题	String	标题	-
code	表单字段 id，用于配合 m-form-btn 提交数据使用	String	id	-
value	list数据对应的id,初始值，用于编辑页面绑定值	Array	[]	-
list	带选择的数据列表，对象结构得满足{id:0,label:'名称'}	Array	[]	-

说明

当未选中任何值时，返回数据为[]，否则返回数据对象[{id:0,label:'名称'}]。

组件说明

此组件为一个提交按钮，专为form表单设计使用

基本使用



tapSubmit(e){
    if(!e.isRules){
        this.$u.toast('请按要求录入数据')
    }else{
        console.log(e.pageData)
    }
}

Props

参数	说明	类型	默认值	可选值
label	按钮显示文字	String	提交	-

Events

事件名称	说明	回调参数
submit	提交表单	(e:{isRules,pageData}),isRules:数据是否验证通过;pageData:要提交的数据

使用例子

展开阅读全文

页面更新：2024-04-04

标签：表单组件字段对象名称参数类型页面标题数据

1 2 3 4 5

特斯拉一夜暴跌近12%，2天1.3万亿市值灰飞烟灭！6成粉丝赞成马斯克卖股票，弟弟却抢先套现约6.9亿元

每经编辑：杜宇美东时间周二，特斯拉股价早盘短线跳水一度跌11%，日低下探1000美元，截至收盘，特斯拉报1023.5美元，跌幅近12%，市值最新市值为1.02万亿美元。值得注意的是，特斯拉上一个交易日收跌4.8%。特斯拉2个交易日累计跌幅达1

车险理赔后，保费上涨多少？

很多朋友咨询，车险理赔后第二年保费能上涨多少，这个问题比较复杂，很难一句话讲清楚。随着汽车保有量的增加，交通事故也越来越多，涉及理赔的案件也相应增加，理赔会影响保费，到底影响多少，怎么避免影响？交强险保费=基础保费*（1+交

高速公路连亏8年，负债一度达到7万亿，难道14亿人也养不起？

据统计，我国高速公路已经连续亏损的第8年，累计负债一度达到7万亿。这就不禁令人产生疑惑：难道14亿国人也养不起高速吗？赚的钱都到哪里去了？根据数据显示，2020年我国高速公路收费站收入是4868亿美元，处于亏损状态，亏损金额高达

“懒人调料”火了，懒人经济又站上风口

近日，“酱油醋掀涨价潮！”、“懒人调料火了”等相关词条热度居高不下。最近，受原材料、能源、运输等成本上涨等因素影响，调味品企业纷纷提价。除传统调味品外，复合调味品销售上涨趋势明显，尤其是天气转冷后，炖煮所需的复合调

崩盘！暴跌近10000元/吨！几十种化工原材料“闪崩”

【能源人都在看，点击右上角加'关注'】近日，持续暴涨的环氧树脂价格骤然降温。固体环氧树脂报价26500元/吨，较前一周下跌2000元/吨。尽管价格已经开始下降，但仍有不少下游客户期盼着价格能继续降至26000元/吨、25000元/吨

人生最美的华章

深秋，仿佛总是和落叶相连。眼看着，那叶子一片片变红，变黄，天气也日渐变冷，变短。我们的校园，果树成荫，一年四季都能给人带来浓厚的季节气息，春天，梨花朵朵盛开，霎那间一片白如雪的景致在校园绽放，犹如进入梨园的一般。一棵棵梨

人死后到底去哪了？

生与死是所有人共同面对的问题，无论是你在意与不在意，都无法回避这一客观实际。这是一个令人纠结的问题，除非你刻意的回避不去考虑，管他从哪里来的，反正已经来了！管他死后去哪里了，眼睛一闭什么都不知道了！可是，一旦遇到生死

“朋友”这样对你，就是看不上你，别太天真了

有人说，人生就像一趟列车，有来有往。在这些来来往往的人当中，我们最初并不清楚，哪些是好，哪些是坏。有的来了一下子，还没深入了解，就走了。有的坐得久一点，本以为算是相识，却并非如此。人生就是一个不断去识别乘客的过程，有些

业精于勤，人贵有恒

子曰：‘人而无恒，不可以作巫医善夫！”“不恒其德，或承之羞。”子曰：“不占而已矣。”孔子强调：一是人必须有恒心，这样才能成就事业；二是人必须恒久保持德行，否则就可能遭受羞辱；三是性格决定命运，如果没有恒心，不能恒久保持自己

“惊艳你的八字短句”

（1）凡是过往，皆为序章。（2）迷途漫漫，终有一归。（3）温柔半两，从容一生（4）洒脱余生，坦然今朝（5）忠于自己，热爱生活（6）且听风吟，静待花开（7）有人可爱，有梦可待。（8）念念不忘，必有回响（9）不妨不妨，來日方長（10）一切尽力，万事胜意（11）不论结局，感谢相遇（12）一

1959年，彭老总被免职后，最早任命的3个志愿军副司令过得如何？

1950年10月，抗美援朝爆发，彭老总被任命为志愿军的总司令，率领志愿军跨过鸭绿江，进入朝鲜战场保家卫国。彭老总担任志愿军总司令的时间是1950年10月，1952年4月后，彭老总已经不再具体指挥志愿军，陈赓以及邓华陆续担任了志愿军

爱因斯坦的私人生活

爱因斯坦一生有两个私生女，第一个是米列娃与爱因斯坦热恋时未婚先孕产下的，有精神残疾，没有任何证据显示爱因斯坦一生曾见过这个女儿一面。另一个是爱因斯坦1933年正式移民美国后，与一名纽约舞女所生，爱因斯坦也从来没有管

时刻知道丨为什么说“长津湖之战”是朝鲜战场最残酷一战？

红网时刻记者张俊段懿丹整理报道设计赵冰制图刘春田今天是我国第六个烈士纪念日，由陈凯歌、徐克、林超贤联合执导的电影《长津湖》同日上映。71年前，一群热血青年跨过鸭绿江，入朝对抗美军侵略，鏖战百万“联合国军

曾经的第四核大国，今天的无核国家

1991年12月25日，苏联解体。随着苏联解体，其庞大的核武器库也一分为四，主要被俄罗斯、白俄罗斯、乌克兰和哈萨克斯坦四个国家继承。其中，哈萨克斯坦继承了1400枚战略核弹头和650枚战术核弹头，占原苏联核力量的7.6％。哈萨

挖掘火星第21集

大卫：这次我们将会说到德国人的火星之旅，当然还有以前节目中一些非常重要却没有得到解答的问题。其中一个问题是在月球上我们发现的古遗迹在火星上也发现了，所以我们要说说自从德国人在两个星球上发现这些以来，月球上的

上滑加载更多 ↓