徐烜 / bsth-ebus-h5_editor · Commits

Commit 4f77ec3c53fef1de2175e6924fadd28f021d8d89

Authored by ly525
1 parent bb36cb48

chore: move plugin LbpButton to plugins folder

Inline Side-by-side
Showing 2 changed files with 267 additions and 267 deletions
front-end/h5/src/components/plugins/lbp-button.js 0 → 100644
  View file @4f77ec3
  1 +export default {
  2 + render () {
  3 + const {
  4 + color,
  5 + textAlign,
  6 + backgroundColor,
  7 + fontSize,
  8 + lineHeight,
  9 + borderColor,
  10 + borderRadius,
  11 + borderWidth,
  12 + text
  13 + } = this
  14 + return (
  15 + <button
  16 + style={{
  17 + color,
  18 + textAlign,
  19 + backgroundColor,
  20 + fontSize: fontSize + 'px',
  21 + lineHeight: lineHeight + 'em',
  22 + borderColor,
  23 + borderRadius: borderRadius + 'px',
  24 + borderWidth: borderWidth + 'px',
  25 + textDecoration: 'none'
  26 + }}
  27 + >{text}</button>)
  28 + },
  29 + name: 'lbp-button',
  30 + props: {
  31 + text: {
  32 + type: String,
  33 + default: '按钮'
  34 + },
  35 + type: {
  36 + type: String,
  37 + default: 'text'
  38 + },
  39 + placeholder: {
  40 + type: String,
  41 + default: '请填写提示文字'
  42 + },
  43 + required: {
  44 + type: Boolean,
  45 + default: false
  46 + },
  47 + disabled: {
  48 + type: Boolean,
  49 + default: false
  50 + },
  51 + backgroundColor: {
  52 + type: String,
  53 + default: 'transparent'
  54 + },
  55 + color: {
  56 + type: String,
  57 + default: 'black'
  58 + },
  59 + fontSize: {
  60 + type: Number,
  61 + default: 14
  62 + },
  63 + lineHeight: {
  64 + type: Number,
  65 + default: 1
  66 + },
  67 + borderWidth: {
  68 + type: Number,
  69 + default: 1
  70 + },
  71 + borderRadius: {
  72 + type: Number,
  73 + default: 0
  74 + },
  75 + borderColor: {
  76 + type: String,
  77 + default: '#ced4da'
  78 + },
  79 + textAlign: {
  80 + type: String,
  81 + default: 'center'
  82 + }
  83 + },
  84 + editorConfig: {
  85 + propsConfig: {
  86 + text: {
  87 + type: 'el-input',
  88 + label: '按钮文字',
  89 + require: true,
  90 + defaultPropValue: '按钮'
  91 + },
  92 + fontSize: {
  93 + type: 'el-input-number',
  94 + label: '字号(px)',
  95 + require: true,
  96 + prop: {
  97 + step: 1,
  98 + min: 12,
  99 + max: 144
  100 + },
  101 + defaultPropValue: 14
  102 + },
  103 + color: {
  104 + type: 'el-input',
  105 + label: '文字颜色',
  106 + // !#zh 为编辑组件指定 prop
  107 + prop: {
  108 + type: 'color'
  109 + },
  110 + require: true,
  111 + defaultPropValue: 'black'
  112 + },
  113 + backgroundColor: {
  114 + type: 'el-input', // lbs-color-picker
  115 + label: '背景颜色',
  116 + prop: {
  117 + type: 'color'
  118 + },
  119 + require: true,
  120 + defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
  121 + },
  122 + borderColor: {
  123 + type: 'el-input', // lbs-color-picker
  124 + label: '边框颜色',
  125 + prop: {
  126 + type: 'color'
  127 + },
  128 + require: true,
  129 + defaultPropValue: '#eeeeee'
  130 + },
  131 + borderWidth: {
  132 + type: 'el-input-number',
  133 + label: '边框宽度(px)',
  134 + require: true,
  135 + prop: {
  136 + step: 1,
  137 + min: 1,
  138 + max: 10
  139 + },
  140 + defaultPropValue: 1
  141 + },
  142 + borderRadius: {
  143 + type: 'el-input-number',
  144 + label: '圆角(px)',
  145 + require: true,
  146 + prop: {
  147 + step: 0.1,
  148 + min: 0,
  149 + max: 10
  150 + },
  151 + defaultPropValue: 0
  152 + },
  153 + lineHeight: {
  154 + type: 'el-input-number',
  155 + label: '行高',
  156 + require: true,
  157 + prop: {
  158 + step: 0.1,
  159 + min: 0.1,
  160 + max: 10
  161 + },
  162 + defaultPropValue: 1
  163 + },
  164 + textAlign: {
  165 + type: 'lbs-text-align',
  166 + label: '文字对齐',
  167 + require: true,
  168 + defaultPropValue: 'center'
  169 + }
  170 + },
  171 + components: {
  172 + 'lbs-text-align': {
  173 + template: `
  174 + <div class="wrap">
  175 + <el-radio-group v-model="value_" size="small">
  176 + <el-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
  177 + <el-radio-button :label="item.value">
  178 + <!-- issue #8 -->
  179 + <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
  180 + </el-radio-button>
  181 + </el-tooltip>
  182 + </el-radio-group>
  183 + </div>`,
  184 + props: {
  185 + value: {
  186 + type: [String, Number]
  187 + }
  188 + },
  189 + data: () => ({
  190 + textAlignTabs: [{
  191 + label: '左对齐',
  192 + value: 'left'
  193 + },
  194 + {
  195 + label: '居中对齐',
  196 + value: 'center'
  197 + },
  198 + {
  199 + label: '右对齐',
  200 + value: 'right'
  201 + }]
  202 + }),
  203 + computed: {
  204 + value_: {
  205 + // TODO 关于箭头函数中的this：这里不能写成箭头函数，否则 this 为 undefined，为何？
  206 + // http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/
  207 + // https://tangxiaolang101.github.io/2016/08/01/%E6%B7%B1%E5%85%A5%E6%8E%A2%E8%AE%A8JavaScript%E7%9A%84%E6%89%A7%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%92%8C%E6%A0%88%EF%BC%88What%20is%20the%20Execution%20Context%20&%20Stack%20in%20JavaScript%EF%BC%89/
  208 + get () {
  209 + return this.value
  210 + },
  211 + set (val) {
  212 + this.$emit('input', val)
  213 + }
  214 + }
  215 + }
  216 + },
  217 + 'lbs-select-input-type': {
  218 + props: ['value'],
  219 + computed: {
  220 + value_: {
  221 + get () {
  222 + return this.value
  223 + },
  224 + set (val) {
  225 + this.$emit('input', val)
  226 + }
  227 + }
  228 + },
  229 + template: `
  230 + <el-select v-model="value_" placeholder="类型">
  231 + <el-option
  232 + v-for="item in options"
  233 + :key="item.value"
  234 + :label="item.label"
  235 + :value="item.value">
  236 + </el-option>
  237 + </el-select>
  238 + `,
  239 + data: () => ({
  240 + options: [
  241 + {
  242 + label: '文字',
  243 + value: 'text'
  244 + },
  245 + {
  246 + label: '密码',
  247 + value: 'password'
  248 + },
  249 + {
  250 + label: '日期',
  251 + value: 'date'
  252 + },
  253 + {
  254 + label: '邮箱',
  255 + value: 'email'
  256 + },
  257 + {
  258 + label: '手机号',
  259 + value: 'tel'
  260 + }
  261 + ]
  262 + })
  263 + }
  264 + }
  265 + }
  266 +}
front-end/h5/src/views/Editor.vue
  View file @4f77ec3
1 <script> 1 <script>
2 import Vue from 'vue' 2 import Vue from 'vue'
3 3
4 -// LuBanPlugin -> Lbp  
5 -const LbpButton = {  
6 - render () {  
7 - const {  
8 - color,  
9 - textAlign,  
10 - backgroundColor,  
11 - fontSize,  
12 - lineHeight,  
13 - borderColor,  
14 - borderRadius,  
15 - borderWidth,  
16 - text  
17 - } = this  
18 - return (  
19 - <button  
20 - style={{  
21 - color,  
22 - textAlign,  
23 - backgroundColor,  
24 - fontSize: fontSize + 'px',  
25 - lineHeight: lineHeight + 'em',  
26 - borderColor,  
27 - borderRadius: borderRadius + 'px',  
28 - borderWidth: borderWidth + 'px',  
29 - textDecoration: 'none'  
30 - }}  
31 - >{text}</button>)  
32 - },  
33 - name: 'lbp-button',  
34 - props: {  
35 - text: {  
36 - type: String,  
37 - default: '按钮'  
38 - },  
39 - type: {  
40 - type: String,  
41 - default: 'text'  
42 - },  
43 - placeholder: {  
44 - type: String,  
45 - default: '请填写提示文字'  
46 - },  
47 - required: {  
48 - type: Boolean,  
49 - default: false  
50 - },  
51 - disabled: {  
52 - type: Boolean,  
53 - default: false  
54 - },  
55 - backgroundColor: {  
56 - type: String,  
57 - default: 'transparent'  
58 - },  
59 - color: {  
60 - type: String,  
61 - default: 'black'  
62 - },  
63 - fontSize: {  
64 - type: Number,  
65 - default: 14  
66 - },  
67 - lineHeight: {  
68 - type: Number,  
69 - default: 1  
70 - },  
71 - borderWidth: {  
72 - type: Number,  
73 - default: 1  
74 - },  
75 - borderRadius: {  
76 - type: Number,  
77 - default: 0  
78 - },  
79 - borderColor: {  
80 - type: String,  
81 - default: '#ced4da'  
82 - },  
83 - textAlign: {  
84 - type: String,  
85 - default: 'center'  
86 - }  
87 - },  
88 - editorConfig: {  
89 - propsConfig: {  
90 - text: {  
91 - type: 'el-input',  
92 - label: '按钮文字',  
93 - require: true,  
94 - defaultPropValue: '按钮'  
95 - },  
96 - fontSize: {  
97 - type: 'el-input-number',  
98 - label: '字号(px)',  
99 - require: true,  
100 - prop: {  
101 - step: 1,  
102 - min: 12,  
103 - max: 144  
104 - },  
105 - defaultPropValue: 14  
106 - },  
107 - color: {  
108 - type: 'el-input',  
109 - label: '文字颜色',  
110 - // !#zh 为编辑组件指定 prop  
111 - prop: {  
112 - type: 'color'  
113 - },  
114 - require: true,  
115 - defaultPropValue: 'black'  
116 - },  
117 - backgroundColor: {  
118 - type: 'el-input', // lbs-color-picker  
119 - label: '背景颜色',  
120 - prop: {  
121 - type: 'color'  
122 - },  
123 - require: true,  
124 - defaultPropValue: '#ffffff' // TODO why logogram for color does't work?  
125 - },  
126 - borderColor: {  
127 - type: 'el-input', // lbs-color-picker  
128 - label: '边框颜色',  
129 - prop: {  
130 - type: 'color'  
131 - },  
132 - require: true,  
133 - defaultPropValue: '#eeeeee'  
134 - },  
135 - borderWidth: {  
136 - type: 'el-input-number',  
137 - label: '边框宽度(px)',  
138 - require: true,  
139 - prop: {  
140 - step: 1,  
141 - min: 1,  
142 - max: 10  
143 - },  
144 - defaultPropValue: 1  
145 - },  
146 - borderRadius: {  
147 - type: 'el-input-number',  
148 - label: '圆角(px)',  
149 - require: true,  
150 - prop: {  
151 - step: 0.1,  
152 - min: 0,  
153 - max: 10  
154 - },  
155 - defaultPropValue: 0  
156 - },  
157 - lineHeight: {  
158 - type: 'el-input-number',  
159 - label: '行高',  
160 - require: true,  
161 - prop: {  
162 - step: 0.1,  
163 - min: 0.1,  
164 - max: 10  
165 - },  
166 - defaultPropValue: 1  
167 - },  
168 - textAlign: {  
169 - type: 'lbs-text-align',  
170 - label: '文字对齐',  
171 - require: true,  
172 - defaultPropValue: 'center'  
173 - }  
174 - },  
175 - components: {  
176 - 'lbs-text-align': {  
177 - template: `  
178 - <div class="wrap">  
179 - <el-radio-group v-model="value_" size="small">  
180 - <el-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">  
181 - <el-radio-button :label="item.value">  
182 - <!-- issue #8 -->  
183 - <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>  
184 - </el-radio-button>  
185 - </el-tooltip>  
186 - </el-radio-group>  
187 - </div>`,  
188 - props: {  
189 - value: {  
190 - type: [String, Number]  
191 - }  
192 - },  
193 - data: () => ({  
194 - textAlignTabs: [{  
195 - label: '左对齐',  
196 - value: 'left'  
197 - },  
198 - {  
199 - label: '居中对齐',  
200 - value: 'center'  
201 - },  
202 - {  
203 - label: '右对齐',  
204 - value: 'right'  
205 - }]  
206 - }),  
207 - computed: {  
208 - value_: {  
209 - // TODO 关于箭头函数中的this：这里不能写成箭头函数，否则 this 为 undefined，为何？  
210 - // http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/  
211 - // https://tangxiaolang101.github.io/2016/08/01/%E6%B7%B1%E5%85%A5%E6%8E%A2%E8%AE%A8JavaScript%E7%9A%84%E6%89%A7%E8%A1%8C%E7%8E%AF%E5%A2%83%E5%92%8C%E6%A0%88%EF%BC%88What%20is%20the%20Execution%20Context%20&%20Stack%20in%20JavaScript%EF%BC%89/  
212 - get () {  
213 - return this.value  
214 - },  
215 - set (val) {  
216 - this.$emit('input', val)  
217 - }  
218 - }  
219 - }  
220 - },  
221 - 'lbs-select-input-type': {  
222 - props: ['value'],  
223 - computed: {  
224 - value_: {  
225 - get () {  
226 - return this.value  
227 - },  
228 - set (val) {  
229 - this.$emit('input', val)  
230 - }  
231 - }  
232 - },  
233 - template: `  
234 - <el-select v-model="value_" placeholder="类型">  
235 - <el-option  
236 - v-for="item in options"  
237 - :key="item.value"  
238 - :label="item.label"  
239 - :value="item.value">  
240 - </el-option>  
241 - </el-select>  
242 - `,  
243 - data: () => ({  
244 - options: [  
245 - {  
246 - label: '文字',  
247 - value: 'text'  
248 - },  
249 - {  
250 - label: '密码',  
251 - value: 'password'  
252 - },  
253 - {  
254 - label: '日期',  
255 - value: 'date'  
256 - },  
257 - {  
258 - label: '邮箱',  
259 - value: 'email'  
260 - },  
261 - {  
262 - label: '手机号',  
263 - value: 'tel'  
264 - }  
265 - ]  
266 - })  
267 - }  
268 - }  
269 - }  
270 -} 4 +import LbpButton from '../components/plugins/lbp-button'
271 5
272 const PluginList = [ 6 const PluginList = [
273 { 7 {