(window.webpackJsonp = window.webpackJsonp || []).push([ [22], { 384: 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; }, }, ]);