通过vue如何实现动态配置页面?

目标:
实现一个功能,用户可以通过这个功能来定制自己想要的页面(不是动态表单,期望是可以定制化一切页面以及页面上的逻辑);

思路:
为用户提供很多控件,如:input、select、checkbox、button等,然后让用户配置各种控件的样式、属性、事件以及事件对应的逻辑;

目前只能实现非常简单的功能,并且大部分都是写死的:一个页面的增、删、改、查,假设我添加了两列:用户名、年龄

然后这些列会出现在查询条件区域、表格区域、编辑页面,调用的接口都是写死的;

问题:
目前非常棘手的问题是:如何为这些控件动态绑定事件?如何处理(配置)不同事件里面对应的逻辑——逻辑是一张白纸,用户想怎么写就怎么写?

最佳答案

这个功能有点复杂,首先你要定义好数据格式,一个页面你可以把它划分成多个组件来构成,例如一个基本的布局:
header,main,footer。那么就可以划分成三个组件,为这三个组件添加样式,属性,事件。一个很好的示例网站就是:易企秀。那么组件数据大致可以分为如下:

`

{
   header:{
      style:{},
      property:{},
      event:{}
   },
   main:{
      style:{},
      property:{},
      event:{}
   }
}

`
当数据添加进去,你生成的页面就应该根据这些数据来渲染,可以用canvas引擎来写,例如:pixi.js。页面是根据用户定制的,那么你就需要一个后台管理系统来让用户自己操作自定义,如果更为复杂,可能还涉及到拖拽,旋转,缩放等复杂功能,可以说常用的业务功能都涉及到了。然后根据用户自定义的数据来渲染页面,整体的思路就是这样,但要细分的话,可能会更多。