手写代码?

meta(json)需要手写吗?别闹,手写多麻烦呀,我这么懒怎么可能手写,这辈子都别想,所以要弄个工具出来,咱们说干就干。

这个工具,说白了本身就是一个表单,一个meta属性对应一个meta的属性,合在一起就是一个完整的meta了,只是不同的组件属性不同,需要区分对待不能混为一谈。

先看看工具啥样的

【工具截图】

是不是挺难看?我没有艺术细胞,大家多担待。等找到支持3.0的UI,就可以做一个漂亮的页面了,现在先实现功能。

左面是表单,右面是控件展示、控件值以及生成的meta。

流程

  1. 父级把需要生成的meta,通过属性传递进来,
  2. 把属性值设置给内部的固定meta,
  3. 根据控件类型筛选出来需要的属性。
  4. 然后依据固定meta生成表单,显示需要的属性。
  5. 填写内容生成需要的json

前四步都是内部流程,不用管,只需要第五步填内容即可。

代码

鸡生蛋还是蛋生鸡?

想做一个工具生成meta,然后这个工具还想用meta绑定的方式来做。

似乎是个死循环。

meta

破解之法就是,先写个简洁的meta

   {
"101": {
"controlId": 101,
"colName": "controlId",
"controlType": 101,
}
}

然后复制三份,用这三个先绑定出来一个表单,然后在加属性,在绑定表单,一层一层循环出来的。

    {
"101": {
"controlId": 101,
"colName": "controlId",
"controlType": 131,
"isClear": false,
"defaultValue": "",
"autofocus": false,
"disabled": false,
"required": true,
"readonly": false,
"pattern": "",
"class": "",
"placeholder": "请输入组件编号",
"title": "组件编号",
"autocomplete": "on",
"min": "0",
"max": "9999",
"step": "1"
}

这是一个完整的meta,把一个表单需要的meta都筹齐了就可以召唤神龙了。好吧,是创建表单。

表单代码

<template>
<div class="home">
<div><h1>表单元素组件meta生成工具</h1></div>
<div style="background-color:#dddddd;height:600px;width:400px;float:left;">
<!--表单-->
<table>
<tr v-for="(key,index) in trList" :key="index"><!--遍历需要的meta-->
<td align="right">{{helpMeta[key].colName}}:<!--名称-->
</td>
<td align="left"><!--控件-->
<nfInput :modelValue="modelValue[helpMeta[key].colName]" :meta="helpMeta[key]" @getvalue="sendValue"/>
{{helpMeta[key].title}}
</td>
</tr>
</table>
</div>
</div>
</template>

用v-for循环,把表单循环出来,我这么懒,才不会一行一行的写tr呢。

因为每种组件需要的属性不同,所以需要做个数组存放组件需要的属性的ID,这样循环数组即可绑定出来需要的属性了。

meta的模板

<template>
<div class="home">
<div align="left" style="padding:5px;background-color:#FFFFEE;height:600px;width:400px;float:left;">
<!--效果和json-->
测试:<nfInput v-model="testValue" :meta="baseMeta" /> ==》 {{testValue}}
<div align="left" style="padding:15px;background-color:#FFEEEE;height:400px;width:400px;clear:both">
{<br>
<span v-for="(item, key, index) in tmpMeta" :key="index">
<span v-if="typeof item === 'number' && !isNaN(item)">&nbsp;&nbsp;"{{key}}": {{item}}, <br></span>
<span v-if="typeof item === 'string'">&nbsp;&nbsp;"{{key}}": "{{item}}", <br></span>
<span v-if="typeof(item) ==='boolean'">&nbsp;&nbsp;"{{key}}": {{item}}, <br></span>
<span v-if="typeof(item) ==='object'">
&nbsp;&nbsp;"{{key}}": [<br>
<span v-for="(opt, index) in item" :key="'opt'+index">&nbsp;&nbsp;&nbsp;&nbsp;{{opt}}, <br></span>
&nbsp;&nbsp;]<br>
</span>
</span>
}
</div>
</div>
</div>
</template>

这是生成需要的json的模板,直接用模板的方式来实现,这样可以根据需要调整格式。

比如json文件要求key要用双引号引起来,而js里面key就不需要双引号,

而eslint又要求字符串只能用单引号。

要求不一样怎么办?做不同的模板呗。

data

data: function () {
return {
testValue: '测试',
helpMeta: {}, // 创建表单需要的meta
baseMeta: { // 固定属性的
controlId: 101,
colName: 'abc',
controlType: 101,
isClear: true,
defaultValue: '',
autofocus: false,
disabled: false,
required: true,
readonly: false,
pattern: '',
class: '',
placeholder: '请输入',
title: '',
autocomplete: 'on',
size: 10,
maxlength: 10,
min: 0,
max: 9999,
step: 1,
rows: 5,
cols: 50,
optionKey: 'beixuan',
optionList: []
},
tmpMeta: {}, // 按需生成属性的
trList: [103],
type: {}, // 各种组件类型需要的属性ID数组
numberList: []
}
}
created: function () {
// 读取json
const json = require('@/components/metahelp.json')
// 给data赋值
this.helpMeta = json.helpMeta
this.helpMeta[103].optionList = json.dic.ControlTypeList
this.type = json.type
this.trList = this.type[103] // 默认使用文本框的属性
}

发现个问题,在setup里面似乎无法读取属性(prop)的值,所以还是用data、created 的方式来做。

变幻

  methods: {
sendValue: function (value, colName) {
// 根据字段名判断,设置需要的属性
if (colName === 'controlType') {
this.trList = this.type[value]
}
// 给对应字段赋值
this.baseMeta[colName] = value // 根据类型拼接对象
this.tmpMeta = {}
for (var i = 0; i < this.trList.length; i += 1) {
var item = this.trList[i]
var key = this.helpMeta[item].colName
this.tmpMeta[key] = this.baseMeta[key]
}
// 提交给父级组件
this.$emit('update:modelValue', this.tmpMeta)
}
}

这个是依据组件类型拼接需要的属性,然后提交给父级组件的代码

这段确实有点绕,自己都晕。因为我懒,不想写那么多代码。

one more thing

写这段代码,花了好长时间,主要是对vue不太熟悉,另外上了点年龄,反应有点慢。

写这篇博客一比较卡文,原因就是思路很混乱,这个就比较狠危险了。

对了,完整代码在这里: https://github.com/naturefwvue/nfComponents

meta生成器 —— 表单元素组件的更多相关文章

  1. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  2. 表单组件 form fastadmin(生成表单元素)

    Form组件 定义文件位置: /extend/fast/Formphp 通用参数 $name 通常为我们组件的名称(name属性值),我们在后台接收时可以通过这个名称来获取到它所对应的值 $value ...

  3. 前端笔记之React(二)组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

  4. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  5. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  6. CSS之表单元素

    表单就是收集用户信息的,就是让用户填写的.选择的. 1                <div> 2                         <h3>欢迎注册本网站&l ...

  7. 表单元素的submit()方法和onsubmit事件

    1.表单元素中出现了name="submit"的元素 2.elemForm.submit();不会触发表单的onsubmit事件 3.动态创建表单时遇到的问题 表单元素拥有subm ...

  8. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  9. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

随机推荐

  1. C++运用栈实现网络浏览器的“前进”与“后退”功能

    在用户最近访问的网页中进行“前进”和“后退”是Web浏览器的常用功能,实现该功能的一种方式是使用两个栈(backward 栈和forward栈)来存储用户访问的网址,用户的不同操作对应的具体实现方法如 ...

  2. C#设计模式之1-工厂方法模式

    工厂方法模式(Factory Method Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/389 访问 ...

  3. 解读闭包,这次从ECMAScript词法环境,执行上下文说起

    对于x年经验的前端仔来说,项目也做了好些个了,各个场景也接触过一些.但是假设真的要跟面试官敞开来撕原理,还是有点慌的.看到很多大神都在手撕各种框架原理还是有点羡慕他们的技术实力,羡慕不如行动,先踏踏实 ...

  4. 提升团队幸福感之:集成 GitLab && JIRA 实现自动化工作流

    佛罗伦萨 - 圣母百花圣殿(图) 前言 GitLab 和 Jira 是平时开发过程中使用非常高频的代码管理系统(开发人员)和项目管理系统(项目管理),通过两套系统的协作完成平常大多数的功能开发,但是两 ...

  5. Excel清除隐藏的引号或空格

    问题场景 导出到Excel的数据内容有时候被"暗中"添加了[引号]或[空格]等字符. 尤其还"隐藏"了,以至于相同的内容,数据格式都没有问题,不能进行函数操作, ...

  6. C++ Templates (1.4 默认模板实参 Default Template Arguments)

    返回完整目录 目录 1.4 默认模板实参 Default Template Arguments 1.4 默认模板实参 Default Template Arguments 可以为模板参数定义默认值,这 ...

  7. C++ Templates 目录

    第1部分 : 基本概念 第1章 函数模板 1.1 初识函数模板 1.1.1 定义模板 1.1.2 使用模板 1.1.3 二阶段翻译 1.2 模板参数推导 1.3 多模板参数 1.3.1 返回类型的模板 ...

  8. 【原创】探索容器底层知识之Namespace

    一.先谈谈进程 在正式介绍Namespace之前,先介绍下进程,因为容器本质上是进程,但是在介绍进程之前,先理清下“程序”和“进程”的关系,这是IT从业人员在日常工作中经常碰到的两个词汇,举个通俗点的 ...

  9. 力扣Leetcode 3. 无重复字符的最长子串

    无重复字符的最长子串 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串 ...

  10. 工作不到一年,做出了100k系统,老板给我升职加薪

    看了下自己上一次发技术文还是在6月15日,算了算也是两个来月了.别怕,短暂的离开,是为了更好的相遇. 来到新公司以后啊,发现公司的搜索业务是真的太多了,大大小小有几百个搜索业务.来了之后得先梳理.熟悉 ...