面试官:了解低代码平台吗?(数字孪生低代码平台探索)(三)

1,573 阅读5分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第24天,点击查看活动详情

写在前面

前面两篇文章已经对低代码相关的拖拽操作进行了简单的探索,完成了拖拽编辑,那么接下来就是对组件相关参数的编辑与配置了,由于每个组件的参数都不相同,也没有什么共同点可寻,所以对于每个组件,我们都需要给他们单独编辑一个“身份证”,用于识别组件相关的参数以及参数的类型等信息,那么我们该如何定义呢,接下来就让我们一起来探索探索。

组件参数配置

对于每个组件的参数,总的来说可以分为3类,第一类是最常见的,直接传入字符串或数字、数组等,这种我们把它称为 input 类,第二种为二选一的我们把它称为 boolean 类,最后一种为多个选项选一个的,我们称为 select 类,接下来我们来看看如何写组件的“身份证”

组件参数信息定义

为了使得配置者能够做到该参数对应组件的什么配置,所以标识表中我们要写的第一项是描述 describe, 而决定该配置是什么类型的配置,则需要有一个配置项,为类型 type,然后还有一个是当组件的类型 typeselect 时,需要额外提供一个选项 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>

GIF 2022-6-24 2-15-41.gif

总结

至此,我们通过为组件提供“身份证”解决了组件参数不统一,配置繁琐的问题,接着利用引入的 ElementUI 组件库,给各种类型的参数添加对应的编辑小组件,最后将小编辑组件与源组件的参数做绑定,最终实现可视化的参数配置了方式。

可视化的参数配置,极大减少了组件的使用难度、也能够实现组件修改的及时反馈,相比修改代码,“所见即所得”的感觉更加明显,因此这样的操作方式可以说是低代码平台必不可少的功能模块,它也将越来越受广泛的相关应用所推崇。

往期好文推荐

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(五)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(四)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(三)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(二)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(一)

面试官:说说从输入 URL 到页面显示到底经历了什么,体现一下你的知识广度

面试官:作为前端,服务器相关了解多少?

面试官:HTTPS 采用的是对称加密还是非对称加密?具体说说其加密过程

面试官:说说 Cookie 和 Token 的区别?

面试官:网络安全了解多少,简单说说?(一)

面试官:网络安全了解多少,简单说说?(二)

面试官:网络安全了解多少,简单说说?(三)

面试官:网络安全了解多少,简单说说?(四)

面试官:网络安全了解多少,简单说说?(五)

面试官:网络安全了解多少,简单说说?(六)

面试官:网络安全了解多少,简单说说?(七)

面试官:网络安全了解多少,简单说说?(八)

浅尝 | 从 0 到 1 Vue 组件库封装

面试官:这么简单的正则表达式都不会?

Webpack 打包类库踩坑

面试官:你就只会 npm run build 吗?(Webpack 配置 Vue+Ts)

面试官:连VuePress都没搭过还说开发过组件库?(VuePress 搭建)

面试官: 连 Vue 视图更新都不会写?(Vue视图更新原理【一】)

面试官: 能不能手写 Vue 响应式?(Vue2 响应式原理【完整版】)

面试官:能不能手写 Vue3 响应式(Vue3 原理解析之响应系统的实现)

JS 优雅之道(JS 代码优化小 Tip)

面试官:你真的会用 SVG 吗? (SVG 应用实战)

面试官:说一下这个Loading动画实现思路 (CSS3 实现 Loading 动画)

JS 扫盲题 ( 面试题梳理系列 (一))

面试官:你确定你说的防抖不是节流吗?( 面试题梳理系列 (二))

面试官:除了 HTTP,你还用过什么通信协议?(Websocket 在数字孪生中的应用)

面试官:你真的理解 Event Loop 吗?( JS 事件循环 )

面试官:v-for 中 key 为什么不能用 index,从原理层面聊聊?

面试官:vue-router 的 hash 与 history 哪个模式会刷新页面?

面试官:说说你平时用过的自适应方案(数字孪生可视化自适应方案)

面试官:说一下如何优化过渡动画(数字孪生可视化过渡动画)

写在最后

博主接下来将持续更新好文,欢迎关注博主哟!!
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟!!❤️❤️❤️