github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2026-01-05 19:28:10 +00:00
Code Issues Packages Projects Releases Wiki Activity
h5-Dooring/doc-dist/assets/js/22.eb3fcb45.js
xujiang 9fde4bcf8b 🆕 doc update
2021-05-18 21:49:30 +08:00

312 lines
18 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

(window.webpackJsonp = window.webpackJsonp || []).push([
[22],
{
385: function(t, s, a) {
'use strict';
a.r(s);
var n = a(42),
r = Object(n.a)(
{},
function() {
var t = this,
s = t.$createElement,
a = t._self._c || s;
return a('ContentSlotsDistributor', { attrs: { 'slot-key': t.$parent.slotKey } }, [
a('h1', { attrs: { id: 'dsl设计' } }, [
a('a', { staticClass: 'header-anchor', attrs: { href: '#dsl设计' } }, [t._v('#')]),
t._v(' DSL设计'),
]),
t._v(' '),
a('p', [
t._v(
'DSL层主要约定了Dooring组件的数据协议，包括组件的可编辑属性、编辑类型、初始值等，之所以定义一致的协议层，主要是方便后期的组件扩展，配置后移，有助于不同后端语言开发和数据存储，接下来我们看看header组件的schema。',
),
]),
t._v(' '),
a('p', [t._v('1.editData 可编辑的属性类型DSL')]),
t._v(' '),
a('p', [t._v('2.config 可编辑组件的默认属性')]),
t._v(' '),
a('div', { staticClass: 'language-js extra-class' }, [
a('pre', { pre: !0, attrs: { class: 'language-js' } }, [
a('code', [
a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('const')]),
t._v(' Header'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' IHeaderSchema '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n editData'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'bgColor'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'背景色'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'height'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'高度'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Number'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Upload'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n isCrop'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token boolean' } }, [t._v('true')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n cropRate'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('1000')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('/')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('618')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logoText'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'logo文字'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Text'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'文字颜色'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Color'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n key'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'fontSize'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'文字大小'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n type'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'Number'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n config'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n bgColor'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'rgba(245,245,245,1)'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n logo'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]),
t._v('\n uid'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'001'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n name'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'image.png'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n status'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'done'")]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n url'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token template-string' } }, [
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
a('span', { pre: !0, attrs: { class: 'token interpolation' } }, [
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('${')],
),
t._v('serverUrl'),
a(
'span',
{
pre: !0,
attrs: { class: 'token interpolation-punctuation punctuation' },
},
[t._v('}')],
),
]),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v('/uploads/3_1740be8a482.png'),
]),
a(
'span',
{ pre: !0, attrs: { class: 'token template-punctuation string' } },
[t._v('`')],
),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n logoText'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'页头Header'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n fontSize'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('20')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n color'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token string' } }, [
t._v("'rgba(47,84,235,1)'"),
]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n height'),
a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]),
t._v(' '),
a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('50')]),
t._v('\n '),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]),
t._v('\n'),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]),
a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]),
t._v('\n'),
]),
]),
]),
a('p', [
t._v(
'由以上代码可知，我们可以在editData属性中给组件添加可编辑的属性，比如背景图，然后再component中接受属性从而设置样式。',
),
]),
t._v(' '),
a('p', [
t._v(
'在config属性中，我们可以设置组件默认属性值，和editData中每一项的key一一对应。',
),
]),
]);
},
[],
!1,
null,
null,
null,
);
s.default = r.exports;
},
},
]);
Reference in New Issue View Git Blame Copy Permalink