vue3 + vite + pinia 低代码探究

低代码难点

事件绑定、触发和流转,这一步我还没有很好思路。大家有什么想法可以评论留言。

设计

一、页面布局

按照传统做法就是左边组件拖动,中间是页面设计,右边是属性的设置,如下:
vue3 + vite + pinia 低代码探究

布局组件可以嵌套任何组件,这不比那些表单设计厉害一点点,嘻嘻

vue3 + vite + pinia 低代码探究

二、数据结构

[  {    id: "",    name: "行", // 组件名称    code: "el-row", // 组件渲染,放到component的is使用    type: "layout", // 组件类型,layout可以嵌套,可以在这个组件放其他组件,比如el-row,el-col,el-card,el-form,有子级的    children: [], // 子级
    // 组件属性
    props: {
      gutter: 0,
      justify: "start",
      align: null,
    },
    // 组件样式
    style: {
      radiusType: "all",
      borderType: "all",
    },
    // 表单项属性
    formItem: {
      label: "标题",
      labelWidth: "",
      required: false,
    },
    // 下拉框,多选框,单选框等数据
    dataset: {
      type: 'custom', // custom  fetch
      labelKey: '',
      valueKey: '',
      options: [
        {
          label: "",
          value: "",
        },
      ],
      fetch: {
        url: '',
        method: '',
        params: {}
      },
      fetchResult: []
    },
    // 表格字段
    columns: [
      {
        prop: "",
        label: "",
        sortable: "",
      },
    ],
    // 动作
    events: {
      click: {
        id: '',
        actions: [{
          id: '',
          name: '',
          actionType: 'message',
          props: {
            message: '就够大家好',
            type: 'success'
          }
        }]
      }
    },
  },
]

三、数据设置

数据是放到dataset里面,有自定义的数据,也有发送请求拿到的数据

vue3 + vite + pinia 低代码探究

四、事件设置

事件这块是最难的,比如一个表单,点击表单的提交按钮发送请求,怎么把表单的数据提交给接口?提交成功之后,怎么把结果反馈进行下一步的动作?

点击事件发送请求,把请求成功拿到的结果赋给某个组件,比如简单的CRUD,拿到的数据怎么赋给表格组件?总页数怎么赋给页码组件?等等。。。

vue3 + vite + pinia 低代码探究

vue3 + vite + pinia 低代码探究

vue3 + vite + pinia 低代码探究

事件触发??
用eval的话,把事件处理成字符串,放到eval执行;或者是用new Funtion(),但是new Funtion()变量是全局的。

const actions = events[i].actions;
const arr = [];
for (let j = 0; j < actions.length; j++) {
    const acitem = actions[j];
    if (acitem.actionType === "message") {
      arr.push(function () {
        ElMessage({
          type: acitem.props.type,
          message: acitem.props.message,
        });
      });
    }
    if (acitem.actionType === "dialog") {
      arr.push(function () {
        const node = designStore.getNodeById(designStore.views, acitem.props.id)
        node.props.value = acitem.props.value
      });
    }
    }
    res[i] = eval(`() => {
    arr.forEach(item => {
      item()
    })
}`);

这是最近做的一个项目的一些设计,在这开发越来越卷,越不值钱的年代,低代码是个趋势,以后估计前端开发都是定义人员了,专门在低代码平台画页面。

原文链接:https://juejin.cn/post/7351770402047754291 作者:我是饿额

(0)
上一篇 2024年3月31日 上午10:54
下一篇 2024年3月31日 上午11:04

相关推荐

发表评论

登录后才能评论