View description language
「VDL」是用来进行 GUI 界面描述的 DSL，可以按命名空间注册标签集，并提供解析模板为节点树等功能。
概念
元素
像 HTML 一样，每个元素都有自己的语义及作用。
命名空间
用来限制元素语义表达的标识符，即同名的元素在不同的命名空间中所表达的语义可能不同。
标签集
同一个命名空间中的元素集合。
用法
注册元素
使用 registerElement() 函数向指定命名空间中添加元素。
import { registerElement } from '@ntks/vdl';
// 注册视图元素
registerElement('admin', {
name: 'view',
props: {
widget: { type: 'string', required: true },
},
});
// 注册字段元素
registerElement('admin', {
name: 'field',
props: {
widget: { type: 'string', required: false },
name: { type: 'string', required: true },
label: { type: ['string', 'boolean'], required: false },
hint: { type: 'string', required: false },
required: { type: ['boolean', 'string'], required: false },
readonly: { type: ['boolean', 'string'], required: false },
maxLength: { type: 'number', required: false },
minLength: { type: 'number', required: false },
pattern: { type: 'regexp', required: false },
max: { type: 'number', required: false },
min: { type: 'number', required: false },
},
});解析模板
将模板解析为节点树，方便动态操作。
import { DslResolver } from '@ntks/vdl';
const tpl = `<view widget="form">
<field name="name" label="姓名" />
<field name="gender" label="性别" />
<field name="age" label="年龄" />
<field name="birthday" label="生日" />
<field name="dogs" label="🐶" />
<field name="cats" label="🐱" />
</view>`;
const dsl = new DslResolver(tpl, 'admin');