好家伙,
完整代码已开源
https://github.com/Fattiger4399/ph-questionnaire.git
本片我们来讲述
如何将dsl的数据渲染为视图
1.数据格式
dsl: {
component: 'div',
wid: 0,
props: {
},
style: { background: ' #FFF8DC' },
children: [
{
wid: 1,//序号
component: 'ph-radio', //组件名
props: { //组件数据接口
No: 1,
title: "我是输入框",
options_1: "选项一一",
options_2: "选项二二"
},
style: { top: '300px', left: '300px', zIndex: '1', border: "2px dashed red" },//组件配置项
attrs: {
},
events: {
}
},
]
2.vue的h函数
h函数是 Vue.js 中的一个辅助函数，通常用于创建虚拟 DOM 元素（VNode）。
在 Vue.js 中，h函数实际上是createElement函数的别名
createElement函数是 Vue.js 内部用来创建虚拟 DOM 元素（VNode）的核心函数。
h函数接收三个参数
- 第一个参数：表示要创建的元素的标签名、组件或者函数。
- 第二个参数：是一个包含元素属性、样式、事件等信息的对象。
- 第三个参数：是元素的子元素，可以是一个数组或者单个元素。
3.编辑器代码解释
代码如下:
export default {
data() {
return {
a: true
}
},
props: ['dsl', 'model'],
render(h) {
let dsl = this.dsl;
return this.generator(h, dsl);
},
methods: {
adddraggable() {
},
select(e) {
console.log(e);
},
generator(h, dsl) {
//h(tagName，props，children)
//当前元素，元素属性，子元素
return h(dsl.component, this.generateProps(h, dsl), this.generateChildren(h, dsl));
},
generateProps(h, dsl) {
let self = this;
let result = {
}
result.props = {
...dsl.props
}
result.attrs = {
...dsl.attrs
}
result.style = { ...dsl.style }
if (self.model.selected) {
if (self.model.selected.wid == dsl.wid) {
// 获取所有的按钮元素
const allElements = document.getElementById('editor.div'服务器托管)
console.log(allElements)
}
}
if (dsl.events) {
result.on = {
click: function (e) {
// console.log(e, dsl.wid, this);
e.preventDefault();
self.$emit('select', { e, dsl });
},
};
}
return result;
},/**
* 该函数用于生成child节点
* @param {*} h
* @param {*} dsl
*/
generateChildren(h, dsl) {
let result = dsl.children &&
dsl.children.map((child) => this.generator(h, child))
|| [];
// (A&&B)||C
if (dsl.text) result.push(dsl.text)
// console.log(result)
return result;
}
},
mounted() {
服务器托管}
}
解释
本质上是对props属性递归处理后,使用vue的h函数将dsl全部渲染出来
让我们把重点放在这句上
return h(dsl.component, this.generateProps(h, dsl), this.generateChildren(h, dsl));
-
generator方法用于生成 Vue 元素，根据传入的dsl配置信息，设置元素的属性、样式、事件等，并返回生成的元素。 -
generateProps方法用于生成元素的属性，包括props、attrs和style，同时根据条件判断是否添加事件监听器。 -
generateChildren方法用于生成元素的子元素，遍历dsl中的children，对每个子元素调用generator方法生成对应的 Vue 元素，并返回所有子元素的数组。
最终效果如下:
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: 一个.NET开源的功能丰富、灵活易用的 Windows 窗口增强神器
前言 通常情况下 Windows 中的软件窗口界面一般只包含还原、移动、大小、最大化、最小化、关闭等几个基本的操作： 今天大姚给大家推荐一个.NET开源、免费（MIT License）、功能丰富、灵活易用、小巧（不到1M）的 Windows 窗口增强工具：Sm…
