Commit 509ba6e98977d0e44fe0562279c968f477e8e2bd
1 parent
2de2fc0a
refactor: update lbp-text
Showing
3 changed files
with
32 additions
and
118 deletions
front-end/h5/src/components/plugins/lbp-button.js
| ... | ... | @@ -33,7 +33,6 @@ export default { |
| 33 | 33 | }, |
| 34 | 34 | name: 'lbp-button', |
| 35 | 35 | props: { |
| 36 | - ...commonProps, | |
| 37 | 36 | text: { |
| 38 | 37 | type: String, |
| 39 | 38 | default: '按钮', |
| ... | ... | @@ -43,18 +42,16 @@ export default { |
| 43 | 42 | require: true |
| 44 | 43 | } |
| 45 | 44 | }, |
| 46 | - type: { | |
| 47 | - type: String, | |
| 48 | - default: 'text' | |
| 49 | - }, | |
| 50 | - required: { | |
| 51 | - type: Boolean, | |
| 52 | - default: false | |
| 53 | - }, | |
| 54 | - disabled: { | |
| 55 | - type: Boolean, | |
| 56 | - default: false | |
| 57 | - } | |
| 45 | + vertical: commonProps.vertical, | |
| 46 | + backgroundColor: commonProps.backgroundColor, | |
| 47 | + color: commonProps.color, | |
| 48 | + fontSize: commonProps.fontSize, | |
| 49 | + lineHeight: commonProps.lineHeight, | |
| 50 | + borderWidth: commonProps.borderWidth, | |
| 51 | + borderRadius: commonProps.borderRadius, | |
| 52 | + borderColor: commonProps.borderColor, | |
| 53 | + textAlign: commonProps.textAlign | |
| 54 | + | |
| 58 | 55 | }, |
| 59 | 56 | editorConfig: { |
| 60 | 57 | components: { | ... | ... |
front-end/h5/src/components/plugins/lbp-text.js
| ... | ... | @@ -3,27 +3,18 @@ import { quillEditor } from 'vue-quill-editor' |
| 3 | 3 | import 'quill/dist/quill.core.css' |
| 4 | 4 | import 'quill/dist/quill.snow.css' |
| 5 | 5 | import './styles/text-overwrite-quil-snow-theme.scss' |
| 6 | +import commonProps from './common/props.js' | |
| 6 | 7 | |
| 7 | 8 | export default { |
| 8 | 9 | render (h) { |
| 9 | - const { | |
| 10 | - color, | |
| 11 | - textAlign, | |
| 12 | - fontSize, | |
| 13 | - lineHeight, | |
| 14 | - borderColor, | |
| 15 | - borderWidth | |
| 16 | - } = this | |
| 17 | - | |
| 18 | 10 | const style = { |
| 19 | 11 | position: 'relative', |
| 20 | - textAlign, | |
| 21 | - fontSize, | |
| 22 | - color: `${color} !important`, | |
| 12 | + color: `${this.color} !important`, | |
| 23 | 13 | textDecoration: 'none', |
| 24 | - backgroundColor: 'transparent', | |
| 25 | - lineHeight: lineHeight + 'em', | |
| 26 | - border: `${borderWidth}px solid ${borderColor}` | |
| 14 | + backgroundColor: this.backgroundColor || 'transparent', | |
| 15 | + lineHeight: `${this.lineHeight}em`, | |
| 16 | + border: `${this.borderWidth}px solid ${this.borderColor}`, | |
| 17 | + borderRadius: `${this.borderRadius}px` | |
| 27 | 18 | } |
| 28 | 19 | const pureText = <div domPropsInnerHTML={this.text} class="ql-editor ql-container"></div> |
| 29 | 20 | return ( |
| ... | ... | @@ -79,89 +70,15 @@ export default { |
| 79 | 70 | } |
| 80 | 71 | }, |
| 81 | 72 | props: { |
| 73 | + backgroundColor: commonProps.backgroundColor, | |
| 74 | + borderWidth: commonProps.borderWidth, | |
| 75 | + borderRadius: commonProps.borderRadius, | |
| 76 | + borderColor: commonProps.borderColor, | |
| 82 | 77 | text: { |
| 83 | 78 | type: String, |
| 84 | 79 | default: '双击修改文字' |
| 85 | - }, | |
| 86 | - disabled: { | |
| 87 | - type: Boolean, | |
| 88 | - default: false | |
| 89 | - }, | |
| 90 | - backgroundColor: { | |
| 91 | - type: String, | |
| 92 | - default: 'transparent' | |
| 93 | - }, | |
| 94 | - lineHeight: { | |
| 95 | - type: Number, | |
| 96 | - default: 1 | |
| 97 | - }, | |
| 98 | - borderWidth: { | |
| 99 | - type: Number, | |
| 100 | - default: 0 | |
| 101 | - }, | |
| 102 | - borderRadius: { | |
| 103 | - type: Number, | |
| 104 | - default: 0 | |
| 105 | - }, | |
| 106 | - borderColor: { | |
| 107 | - type: String, | |
| 108 | - default: '#ced4da' | |
| 109 | - }, | |
| 110 | - borderStyle: { | |
| 111 | - type: String, | |
| 112 | - default: 'solid' | |
| 113 | 80 | } |
| 114 | 81 | }, |
| 115 | 82 | editorConfig: { |
| 116 | - propsConfig: { | |
| 117 | - borderColor: { | |
| 118 | - type: 'a-input', // lbs-color-picker | |
| 119 | - label: '边框颜色', | |
| 120 | - prop: { | |
| 121 | - type: 'color' | |
| 122 | - }, | |
| 123 | - require: true, | |
| 124 | - defaultPropValue: '#333333' | |
| 125 | - }, | |
| 126 | - borderWidth: { | |
| 127 | - type: 'a-input-number', | |
| 128 | - label: '边框宽度(px)', | |
| 129 | - require: true, | |
| 130 | - prop: { | |
| 131 | - step: 1, | |
| 132 | - min: 0, | |
| 133 | - max: 10 | |
| 134 | - }, | |
| 135 | - defaultPropValue: 0 | |
| 136 | - }, | |
| 137 | - borderRadius: { | |
| 138 | - type: 'a-input-number', | |
| 139 | - label: '圆角(px)', | |
| 140 | - require: true, | |
| 141 | - prop: { | |
| 142 | - step: 0.1, | |
| 143 | - min: 0, | |
| 144 | - max: 10 | |
| 145 | - }, | |
| 146 | - defaultPropValue: 0 | |
| 147 | - }, | |
| 148 | - borderStyle: { | |
| 149 | - type: 'a-input', | |
| 150 | - label: '边框形式', | |
| 151 | - require: true, | |
| 152 | - defaultPropValue: 'solid' | |
| 153 | - }, | |
| 154 | - lineHeight: { | |
| 155 | - type: 'a-input-number', | |
| 156 | - label: '行高', | |
| 157 | - require: true, | |
| 158 | - prop: { | |
| 159 | - step: 0.1, | |
| 160 | - min: 0.1, | |
| 161 | - max: 10 | |
| 162 | - }, | |
| 163 | - defaultPropValue: 1 | |
| 164 | - } | |
| 165 | - } | |
| 166 | 83 | } |
| 167 | 84 | } | ... | ... |
front-end/h5/src/mixins/load-plugins.js
| ... | ... | @@ -3,7 +3,7 @@ import Vue from 'vue' |
| 3 | 3 | import LbpButton from '../components/plugins/lbp-button' |
| 4 | 4 | // import LbpPicture from '../components/plugins/lbp-picture' |
| 5 | 5 | // import LbpVideo from '../components/plugins/lbp-video' |
| 6 | -// import LbpText from '../components/plugins/lbp-text' | |
| 6 | +import LbpText from '../components/plugins/lbp-text' | |
| 7 | 7 | // import LbpFormInput from '../components/plugins/lbp-form-input' |
| 8 | 8 | // import LbpFormButton from '../components/plugins/lbp-form-button' |
| 9 | 9 | // import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group' |
| ... | ... | @@ -23,17 +23,17 @@ export const pluginsList = [ |
| 23 | 23 | // visible: true, |
| 24 | 24 | // name: LbpPicture.name |
| 25 | 25 | // }, |
| 26 | - // { | |
| 27 | - // i18nTitle: { | |
| 28 | - // 'en-US': 'Text', | |
| 29 | - // 'zh-CN': '文字' | |
| 30 | - // }, | |
| 31 | - // title: '文字', | |
| 32 | - // icon: 'text-width', | |
| 33 | - // component: LbpText, | |
| 34 | - // visible: true, | |
| 35 | - // name: LbpText.name | |
| 36 | - // }, | |
| 26 | + { | |
| 27 | + i18nTitle: { | |
| 28 | + 'en-US': 'Text', | |
| 29 | + 'zh-CN': '文字' | |
| 30 | + }, | |
| 31 | + title: '文字', | |
| 32 | + icon: 'text-width', | |
| 33 | + component: LbpText, | |
| 34 | + visible: true, | |
| 35 | + name: LbpText.name | |
| 36 | + }, | |
| 37 | 37 | { |
| 38 | 38 | i18nTitle: { |
| 39 | 39 | 'en-US': 'Button', | ... | ... |