持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第24天,点击查看活动详情
写在前面
前面两篇文章已经对低代码相关的拖拽操作进行了简单的探索,完成了拖拽编辑,那么接下来就是对组件相关参数的编辑与配置了,由于每个组件的参数都不相同,也没有什么共同点可寻,所以对于每个组件,我们都需要给他们单独编辑一个“身份证”,用于识别组件相关的参数以及参数的类型等信息,那么我们该如何定义呢,接下来就让我们一起来探索探索。
组件参数配置
对于每个组件的参数,总的来说可以分为3类,第一类是最常见的,直接传入字符串或数字、数组等,这种我们把它称为 input 类,第二种为二选一的我们把它称为 boolean 类,最后一种为多个选项选一个的,我们称为 select 类,接下来我们来看看如何写组件的“身份证”
组件参数信息定义
为了使得配置者能够做到该参数对应组件的什么配置,所以标识表中我们要写的第一项是描述 describe
,
而决定该配置是什么类型的配置,则需要有一个配置项,为类型 type
,然后还有一个是当组件的类型 type
为 select
时,需要额外提供一个选项 options
,用于存放选项,大致就这三个参数,实例如下
{
"CPN1": {
"name": {
"type": "input",
"describe": "名称"
},
"border": {
"type": "boolean",
"describe": "边框"
},
"color": {
"type": "select",
"describe": "背景颜色",
"options": ["white","black"]
}
}
}
参数信息与配置界面绑定
定义好了参数信息,接下来一步就是如何利用界面来动态修改参数了。这里我们通过引入 ElementUI 来快速搭建编辑参数的相关小组件。
安装并引入 ElementUI
npm i element-ui -S
// main.js 引入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
展示所有配置项
1、通过 v-for
将所有配置项展示到配置框中
2、通过各个配置项的类型选择显示需要使用的配置小组件
3、将配置小组件的数值和源组件相关的数值进行绑定,完成联动效果
示例如下
<div class="setting-item" v-for="(item, key) in settingList" :key="item.describe">
<div class="name">{{item.describe}}</div>
<div class="set-cpn">
<!-- input 类型-->
<el-input
v-if="item.type === 'input'"
v-model="cpnProps[key]"
placeholder="请输入内容">
</el-input>
<!-- boolean 类型 -->
<el-switch
v-if="item.type === 'boolean'"
v-model="cpnProps[key]"
>
</el-switch>
<!-- select 类型 -->
<el-select
v-if="item.type === 'select'"
v-model="cpnProps[key]" placeholder="请选择">
<el-option
v-for="op in item.options"
:key="op"
:label="op"
:value="op">
</el-option>
</el-select>
</div>
</div>
总结
至此,我们通过为组件提供“身份证”解决了组件参数不统一,配置繁琐的问题,接着利用引入的 ElementUI 组件库,给各种类型的参数添加对应的编辑小组件,最后将小编辑组件与源组件的参数做绑定,最终实现可视化的参数配置了方式。
可视化的参数配置,极大减少了组件的使用难度、也能够实现组件修改的及时反馈,相比修改代码,“所见即所得”的感觉更加明显,因此这样的操作方式可以说是低代码平台必不可少的功能模块,它也将越来越受广泛的相关应用所推崇。
往期好文推荐
面试官:说说从输入 URL 到页面显示到底经历了什么,体现一下你的知识广度
面试官:HTTPS 采用的是对称加密还是非对称加密?具体说说其加密过程
面试官:你就只会 npm run build 吗?(Webpack 配置 Vue+Ts)
面试官:连VuePress都没搭过还说开发过组件库?(VuePress 搭建)
面试官: 连 Vue 视图更新都不会写?(Vue视图更新原理【一】)
面试官: 能不能手写 Vue 响应式?(Vue2 响应式原理【完整版】)
面试官:能不能手写 Vue3 响应式(Vue3 原理解析之响应系统的实现)
面试官:说一下这个Loading动画实现思路 (CSS3 实现 Loading 动画)
面试官:你确定你说的防抖不是节流吗?( 面试题梳理系列 (二))
面试官:除了 HTTP,你还用过什么通信协议?(Websocket 在数字孪生中的应用)
面试官:你真的理解 Event Loop 吗?( JS 事件循环 )
面试官:v-for 中 key 为什么不能用 index,从原理层面聊聊?
面试官:vue-router 的 hash 与 history 哪个模式会刷新页面?
面试官:说说你平时用过的自适应方案(数字孪生可视化自适应方案)
写在最后
博主接下来将持续更新好文,欢迎关注博主哟!!
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟!!❤️❤️❤️