Commit 2185b47be2efde32f3eced3f07c506bc55ca6b07
1 parent
f9342b5e
chore: import lbs-text-align to align the content of component
Showing
6 changed files
with
26 additions
and
177 deletions
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" | ... | ... |