徐烜 / 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 1 <script>
2 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 6 const PluginList = [
273 7 {
... ...