(window.webpackJsonp = window.webpackJsonp || []).push([ [23], { 389: function(t, s, a) { 'use strict'; a.r(s); var n = a(42), e = 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: '组件结构' } }, [ a('a', { staticClass: 'header-anchor', attrs: { href: '#组件结构' } }, [t._v('#')]), t._v(' 组件结构'), ]), t._v(' '), a('p', [t._v('dooring的组件设计包含以下3个部分组件：')]), t._v(' '), a('p', [t._v('1、component 组件主体')]), t._v(' '), a('p', [t._v('2、schema 组件的DSL，结构协议层')]), t._v(' '), a('p', [t._v('3、template 定义了组件的类型、外观、从属关系，后期考虑纳入schema')]), t._v(' '), a('p', [ t._v( '接下来我会介绍一个基本的组件主体设计，以为template设计，在下一章会具体介绍schema部分。', ), ]), t._v(' '), a('h2', { attrs: { id: '组件设计' } }, [ a('a', { staticClass: 'header-anchor', attrs: { href: '#组件设计' } }, [t._v('#')]), t._v(' 组件设计'), ]), t._v(' '), a('p', [t._v('我们这里拿基本的header组件来举例，如下是header组件的代码：')]), t._v(' '), a('div', { staticClass: 'language-jsx extra-class' }, [ a('pre', { pre: !0, attrs: { class: 'language-jsx' } }, [ a('code', [ a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('interface')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [ t._v('HeaderPropTypes'), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('extends')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [ t._v('IHeaderConfig'), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n isTpl'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' boolean'), 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\n'), 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(' '), a('span', { pre: !0, attrs: { class: 'token function' } }, [t._v('memo')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('(')]), a('span', { pre: !0, attrs: { class: 'token parameter' } }, [ t._v('props'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' HeaderPropTypes'), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(')')]), t._v(' '), 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 keyword' } }, [t._v('const')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v(' bgColor'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' logo'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' logoText'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' fontSize'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' color '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' props'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('return')]), t._v(' props'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('isTpl '), 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 tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]), t._v('div'), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v('\n < img style='), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('width'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [t._v("'100%'")]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v(' src=')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('logos'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v(' alt="" />\n '), ]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ 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(' '), 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 tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]), t._v('header'), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('className'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('styles'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('header'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('style')]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v(' backgroundColor'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' bgColor '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v('\n '), ]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]), t._v('div'), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('className'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('styles'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('logo'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v('\n < img src='), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('logo '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('&&')]), t._v(' logo'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('[')]), a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('0')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(']')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('url'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v(' alt=')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('logoText'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v(' />\n '), ]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v('\n '), ]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('<')]), t._v('div'), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [ t._v('className'), ]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('styles'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('.')]), t._v('title'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token attr-name' } }, [t._v('style')]), a('span', { pre: !0, attrs: { class: 'token script language-javascript' } }, [ a( 'span', { pre: !0, attrs: { class: 'token script-punctuation punctuation' } }, [t._v('=')], ), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v(' fontSize'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' color '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('>')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v('\n '), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('logoText'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [ t._v('\n '), ]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('')]), ]), a('span', { pre: !0, attrs: { class: 'token plain-text' } }, [t._v('\n ')]), a('span', { pre: !0, attrs: { class: 'token tag' } }, [ a('span', { pre: !0, attrs: { class: 'token tag' } }, [ 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(')')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n'), ]), ]), ]), a('p', [ t._v( '我们只需要按照上面的方式编写组件即可，props是DSL定义的数据层，用来控制组件的shape，也就是组件的表现。我们看看header对应的template。', ), ]), t._v(' '), a('h2', { attrs: { id: 'template设计' } }, [ a('a', { staticClass: 'header-anchor', attrs: { href: '#template设计' } }, [ t._v('#'), ]), t._v(' template设计'), ]), 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(' template '), 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 type'), 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 h'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token number' } }, [t._v('28')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n displayName'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v(':')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [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 keyword' } }, [t._v('export')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('default')]), t._v(' template'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n'), ]), ]), ]), a('p', [ t._v( '以上就是我们template的结构，type用来定义组件的类型，方便渲染器动态查找，h代表组件的初始化高度，我们可以自由设置。displayName是组件的中文名，用来在左侧组件面板中展示，方便用户理解，我们可以在template中自定义更多辅助信息，方便使用者更高效的使用我们的编辑器。', ), ]), t._v(' '), a('h2', { attrs: { id: 'schema设计' } }, [ a('a', { staticClass: 'header-anchor', attrs: { href: '#schema设计' } }, [ t._v('#'), ]), t._v(' schema设计'), ]), t._v(' '), a('p', [ t._v('开发一个自定义组件需要包含3部分, '), a('code', [t._v('Component')]), t._v(', '), a('code', [t._v('Schema')]), t._v(' 和 '), a('code', [t._v('Template')]), t._v('. 接下来我们看一下 '), a('code', [t._v('Header')]), t._v(' 组件的 '), a('code', [t._v('Schema')]), t._v('.'), ]), 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('import')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v('\n IColorConfigType'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n INumberConfigType'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n ITextConfigType'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n IUploadConfigType'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n TColorDefaultType'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n TNumberDefaultType'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n TTextDefaultType'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n TUploadDefaultType'), 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(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'@/components/FormComponents/types'"), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('import')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('{')]), t._v(' baseConfig'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' baseDefault'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v(' ICommonBaseType '), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v('}')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('from')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token string' } }, [ t._v("'../../common'"), ]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]), t._v(' type THeaderEditData '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('=')]), t._v(' Array'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('<')]), t._v('\n IColorConfigType '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('|')]), t._v(' INumberConfigType '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('|')]), t._v(' IUploadConfigType '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('|')]), t._v(' ITextConfigType\n'), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('>')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('interface')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [ t._v('IHeaderConfig'), ]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('extends')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [ t._v('ICommonBaseType'), ]), 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(' TColorDefaultType'), 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(' TUploadDefaultType'), 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(' TTextDefaultType'), 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(' TNumberDefaultType'), 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(' TColorDefaultType'), 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(' TNumberDefaultType'), 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\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('interface')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token class-name' } }, [ t._v('IHeaderSchema'), ]), 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(' THeaderEditData'), 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(' IHeaderConfig'), 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\n'), 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 operator' } }, [t._v('...')]), t._v('baseConfig'), 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('}')]), 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(0,0,0,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 string' } }, [ t._v("'http://49.234.61.19/uploads/3_1740be8a482.png'"), ]), 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(255,255,255,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')]), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(',')]), t._v('\n '), a('span', { pre: !0, attrs: { class: 'token operator' } }, [t._v('...')]), t._v('baseDefault'), 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\n'), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('export')]), t._v(' '), a('span', { pre: !0, attrs: { class: 'token keyword' } }, [t._v('default')]), t._v(' Header'), a('span', { pre: !0, attrs: { class: 'token punctuation' } }, [t._v(';')]), t._v('\n'), ]), ]), ]), a('p', [ a('code', [t._v('editData')]), t._v('表示组件的可编辑属性, 我们可以自定义哪些组件可编辑. '), a('code', [t._v('config')]), t._v('为组件接收的属性, 和'), a('code', [t._v('editData')]), t._v('数组项中的'), a('code', [t._v('key')]), t._v('一一对应.'), ]), t._v(' '), a('h3', { attrs: { id: '组件编辑区属性类型' } }, [ a('a', { staticClass: 'header-anchor', attrs: { href: '#组件编辑区属性类型' } }, [ t._v('#'), ]), t._v(' 组件编辑区属性类型'), ]), t._v(' '), a('p', [a('code', [t._v('Dooring')]), t._v('组件编辑面板有如下对应编辑类型:')]), t._v(' '), a('ul', [ a('li', [t._v('Upload 上传组件')]), t._v(' '), a('li', [t._v('Text 文本框')]), t._v(' '), a('li', [t._v('RichText 富文本')]), t._v(' '), a('li', [t._v('TextArea 多行文本')]), t._v(' '), a('li', [t._v('Number 数字输入框')]), t._v(' '), a('li', [t._v('DataList 列表编辑器')]), t._v(' '), a('li', [t._v('FileList 文件列表编辑器')]), t._v(' '), a('li', [t._v('InteractionData 交互设置')]), t._v(' '), a('li', [t._v('Color 颜色面板')]), t._v(' '), a('li', [t._v('MutiText 多文本')]), t._v(' '), a('li', [t._v('Select 选择下拉框')]), t._v(' '), a('li', [t._v('Radio 单选框')]), t._v(' '), a('li', [t._v('Switch 开关切换')]), t._v(' '), a('li', [t._v('CardPicker 卡片面板')]), t._v(' '), a('li', [t._v('Table 表格编辑器')]), t._v(' '), a('li', [t._v('Pos 坐标编辑器')]), t._v(' '), a('li', [t._v('FormItems 表单设计器')]), ]), ]); }, [], !1, null, null, null, ); s.default = e.exports; }, }, ]);