github/h5-Dooring
1
0
Fork 0
mirror of https://github.com/MrXujiang/h5-Dooring.git synced 2025-12-15 20:52:49 +00:00
Code Issues Packages Projects Releases Wiki Activity
h5-Dooring/doc-dist/assets/js/22.be7d4cd5.js
xujiang 4f9dbad52e 🆕 添加dooring数据说明文档
2021-05-15 20:32:35 +08:00

825 lines
50 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],
{
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('div'),
]),
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('</')]),
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 '),
]),
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('</')]),
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 ')]),
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'),
]),
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;
},
},
]);
Reference in New Issue View Git Blame Copy Permalink