Commit 2185b47be2efde32f3eced3f07c506bc55ca6b07

Authored by ly525
1 parent f9342b5e

chore: import lbs-text-align to align the content of component

front-end/h5/package.json
... ... @@ -13,6 +13,7 @@
13 13 "engine:build": "PAGE=ENGINE vue-cli-service build --target lib --name engine ./src/engine-entry.js"
14 14 },
15 15 "dependencies": {
  16 + "@luban-h5/lbs-text-align": "^0.0.3",
16 17 "animate.css": "^3.7.2",
17 18 "ant-design-vue": "^1.3.14",
18 19 "core-js": "^2.6.5",
... ...
front-end/h5/src/components/plugins/lbp-button.js
  1 +import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +
1 3 export default {
2 4 render () {
3 5 const {
... ... @@ -193,51 +195,7 @@ export default {
193 195 }
194 196 },
195 197 components: {
196   - 'lbs-text-align': {
197   - template: `
198   - <div class="wrap">
199   - <a-radio-group v-model="value_" size="small">
200   - <a-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
201   - <a-radio-button :label="item.value">
202   - <!-- issue #8 -->
203   - <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
204   - </a-radio-button>
205   - </a-tooltip>
206   - </a-radio-group>
207   - </div>`,
208   - props: {
209   - value: {
210   - type: [String, Number]
211   - }
212   - },
213   - data: () => ({
214   - textAlignTabs: [{
215   - label: '左对齐',
216   - value: 'left'
217   - },
218   - {
219   - label: '居中对齐',
220   - value: 'center'
221   - },
222   - {
223   - label: '右对齐',
224   - value: 'right'
225   - }]
226   - }),
227   - computed: {
228   - value_: {
229   - // TODO 关于箭头函数中的this:这里不能写成箭头函数,否则 this 为 undefined,为何?
230   - // http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/
231   - // 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/
232   - get () {
233   - return this.value
234   - },
235   - set (val) {
236   - this.$emit('input', val)
237   - }
238   - }
239   - }
240   - },
  198 + 'lbs-text-align': LbpTextAlign,
241 199 'lbs-select-input-type': {
242 200 props: ['value'],
243 201 computed: {
... ...
front-end/h5/src/components/plugins/lbp-form-button.js
  1 +import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +
1 3 export default {
2 4 render () {
3 5 const {
... ... @@ -225,51 +227,7 @@ export default {
225 227 }
226 228 },
227 229 components: {
228   - 'lbs-text-align': {
229   - template: `
230   - <div class="wrap">
231   - <a-radio-group v-model="value_" size="small">
232   - <a-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
233   - <a-radio-button :label="item.value">
234   - <!-- issue #8 -->
235   - <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
236   - </a-radio-button>
237   - </a-tooltip>
238   - </a-radio-group>
239   - </div>`,
240   - props: {
241   - value: {
242   - type: [String, Number]
243   - }
244   - },
245   - data: () => ({
246   - textAlignTabs: [{
247   - label: '左对齐',
248   - value: 'left'
249   - },
250   - {
251   - label: '居中对齐',
252   - value: 'center'
253   - },
254   - {
255   - label: '右对齐',
256   - value: 'right'
257   - }]
258   - }),
259   - computed: {
260   - value_: {
261   - // TODO 关于箭头函数中的this:这里不能写成箭头函数,否则 this 为 undefined,为何?
262   - // http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/
263   - // 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/
264   - get () {
265   - return this.value
266   - },
267   - set (val) {
268   - this.$emit('input', val)
269   - }
270   - }
271   - }
272   - },
  230 + 'lbs-text-align': LbpTextAlign,
273 231 'lbs-select-input-type': {
274 232 props: ['value'],
275 233 computed: {
... ...
front-end/h5/src/components/plugins/lbp-form-input.js
  1 +import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +
1 3 export default {
2 4 name: 'lbp-form-input',
3 5 render (h) {
... ... @@ -171,48 +173,7 @@ export default {
171 173 }
172 174 },
173 175 components: {
174   - 'lbs-text-align': {
175   - render (h) {
176   - return (
177   - <div class="wrap">
178   - <a-radio-group value={this.value} onChange={value => {
179   - this.$emit('change', value)
180   - this.$emit('input', value)
181   - }} size="small">
182   - {
183   - this.textAlignTabs.map(item => (
184   - // <a-radio-button value={item.value} key={item.value}><i class={['fa', 'fa-align-' + item.value]} aria-hidden="true"></i></a-radio-button>
185   - <a-tooltip effect="dark" placement="top" key={item.value} title={item.label}>
186   - <a-radio-button value={item.value}>
187   - <i class={['fa', 'fa-align-' + item.value]} aria-hidden="true"></i>
188   - </a-radio-button>
189   - </a-tooltip>
190   - ))
191   - }
192   - </a-radio-group>
193   - </div>
194   - )
195   - },
196   - props: {
197   - value: {
198   - type: [String, Number]
199   - }
200   - },
201   - data: () => ({
202   - textAlignTabs: [{
203   - label: '左对齐',
204   - value: 'left'
205   - },
206   - {
207   - label: '居中对齐',
208   - value: 'center'
209   - },
210   - {
211   - label: '右对齐',
212   - value: 'right'
213   - }]
214   - })
215   - },
  176 + 'lbs-text-align': LbpTextAlign,
216 177 'lbs-select-input-type': {
217 178 props: ['value'],
218 179 computed: {
... ...
front-end/h5/src/components/plugins/lbp-text.js
  1 +import LbpTextAlign from '@luban-h5/lbs-text-align'
  2 +
1 3 export default {
2 4 render (h) {
3 5 const self = this
... ... @@ -209,51 +211,7 @@ export default {
209 211 }
210 212 },
211 213 components: {
212   - 'lbs-text-align': {
213   - template: `
214   - <div class="wrap">
215   - <a-radio-group v-model="value_" size="small">
216   - <a-tooltip effect="dark" :content="item.label" placement="top" :key="index" v-for="(item, index) in textAlignTabs">
217   - <a-radio-button :label="item.value">
218   - <!-- issue #8 -->
219   - <i :class="['fa', 'fa-align-'+item.value]" aria-hidden="true"></i>
220   - </a-radio-button>
221   - </a-tooltip>
222   - </a-radio-group>
223   - </div>`,
224   - props: {
225   - value: {
226   - type: [String, Number]
227   - }
228   - },
229   - data: () => ({
230   - textAlignTabs: [{
231   - label: '左对齐',
232   - value: 'left'
233   - },
234   - {
235   - label: '居中对齐',
236   - value: 'center'
237   - },
238   - {
239   - label: '右对齐',
240   - value: 'right'
241   - }]
242   - }),
243   - computed: {
244   - value_: {
245   - // TODO 关于箭头函数中的this:这里不能写成箭头函数,否则 this 为 undefined,为何?
246   - // http://davidshariff.com/blog/what-is-the-execution-context-in-javascript/
247   - // 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/
248   - get () {
249   - return this.value
250   - },
251   - set (val) {
252   - this.$emit('input', val)
253   - }
254   - }
255   - }
256   - },
  214 + 'lbs-text-align': LbpTextAlign,
257 215 'lbs-select-input-type': {
258 216 props: ['value'],
259 217 computed: {
... ...
front-end/h5/yarn.lock
... ... @@ -740,6 +740,14 @@
740 740 cssnano-preset-default "^4.0.0"
741 741 postcss "^7.0.0"
742 742  
  743 +"@luban-h5/lbs-text-align@^0.0.3":
  744 + version "0.0.3"
  745 + resolved "https://registry.npmjs.org/@luban-h5/lbs-text-align/-/lbs-text-align-0.0.3.tgz#b25a66ad846ee2530e7519c691f74d3c51c352fd"
  746 + integrity sha512-wVjHHtkXAWl0idDHSI/1IOc7kjAtug8Zw9QBcMavMrZd5u/Jb/KR37k5eG/wFxtimUh9quPlqQ9uQhfi/VlsCg==
  747 + dependencies:
  748 + core-js "^3.3.2"
  749 + vue "^2.6.10"
  750 +
743 751 "@mrmlnc/readdir-enhanced@^2.2.1":
744 752 version "2.2.1"
745 753 resolved "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
... ... @@ -2939,6 +2947,11 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
2939 2947 resolved "https://registry.npm.taobao.org/core-js/download/core-js-2.6.9.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.9.tgz#6b4b214620c834152e179323727fc19741b084f2"
2940 2948 integrity sha1-a0shRiDINBUuF5Mjcn/Bl0GwhPI=
2941 2949  
  2950 +core-js@^3.3.2:
  2951 + version "3.3.4"
  2952 + resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.3.4.tgz?cache=0&sync_timestamp=1572001770461&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-3.3.4.tgz#6b0a23392958317bfb46e40b090529a923add669"
  2953 + integrity sha1-awojOSlYMXv7RuQLCQUpqSOt1mk=
  2954 +
2942 2955 core-util-is@1.0.2, core-util-is@~1.0.0:
2943 2956 version "1.0.2"
2944 2957 resolved "https://registry.npm.taobao.org/core-util-is/download/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
... ...