徐烜 / bsth-ebus-h5_editor · Commits

Commit 40bc3c81aab07726f70b2b6788ba756603c59f66

Authored by ly525
1 parent df14dc74

update checkbox&radio style

Inline Side-by-side
Showing 5 changed files with 197 additions and 134 deletions
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js
  View file @40bc3c8
1 1 import LbpFormRadio from './lbp-form-radio.js'
  2 +import { genUUID } from '../../utils/element.js'
2 3  
3 4 const defaultItems = [
4 5 {
5   - value: '选项A-value'
  6 + value: '选项A'
6 7 },
7 8 {
8   - value: '选项B-value'
  9 + value: '选项B'
9 10 },
10 11 {
11   - value: '选项C-value'
  12 + value: '选项C'
12 13 }
13 14 ]
14 15  
... ... @@ -20,7 +21,7 @@ export default {
20 21 props: {
21 22 aliasName: {
22 23 type: String,
23   - default: '标题演示'
  24 + default: `标题演示-${genUUID().slice(0, 6)}`
24 25 },
25 26 items: {
26 27 type: Array,
... ... @@ -64,7 +65,7 @@ export default {
64 65 type: 'a-input',
65 66 label: '填写标题',
66 67 require: true,
67   - defaultPropValue: '标题演示'
  68 + defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`
68 69 },
69 70 type: {
70 71 type: 'a-radio-group',
... ... @@ -117,7 +118,7 @@ export default {
117 118 this.$emit('change', [
118 119 ...this.value_,
119 120 {
120   - value: `选项${this.value_.length + 1}-value`,
  121 + value: `选项${this.value_.length + 1}`,
121 122 label: `选项${this.value_.length + 1}-label`
122 123 }
123 124 ])
... ... @@ -172,7 +173,7 @@ export default {
172 173 <lbp-form-radio
173 174 vertical
174 175 value={item.value}
175   - checked={this.value === item.value}
  176 + checked={this.type === 'radio' ? this.value === item.value : this.value.includes(item.value)}
176 177 aliasName={this.aliasName}
177 178 type={this.type}
178 179 onChange={this.onChange}
... ...
front-end/h5/src/components/plugins/lbp-form-radio-group.js
  View file @40bc3c8
1 1 import LbpFormRadio from './lbp-form-radio.js'
  2 +import { genUUID } from '../../utils/element.js'
2 3  
3 4 const defaultItems = [
4 5 {
5   - value: '选项A-value'
  6 + value: '选项A'
6 7 },
7 8 {
8   - value: '选项B-value'
  9 + value: '选项B'
9 10 },
10 11 {
11   - value: '选项C-value'
  12 + value: '选项C'
12 13 }
13 14 ]
14 15  
15 16 export default {
16 17 name: 'lbp-form-radio-group',
17   - components: {
18   - LbpFormRadio
19   - },
20 18 props: {
21 19 aliasName: {
22 20 type: String,
23   - default: '标题演示'
  21 + default: `标题演示-${genUUID().slice(0, 6)}`
24 22 },
25 23 items: {
26 24 type: Array,
... ... @@ -64,7 +62,7 @@ export default {
64 62 type: 'a-input',
65 63 label: '填写标题',
66 64 require: true,
67   - defaultPropValue: '标题演示'
  65 + defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`
68 66 },
69 67 type: {
70 68 type: 'a-radio-group',
... ... @@ -117,7 +115,7 @@ export default {
117 115 this.$emit('change', [
118 116 ...this.value_,
119 117 {
120   - value: `选项${this.value_.length + 1}-value`,
  118 + value: `选项${this.value_.length + 1}`,
121 119 label: `选项${this.value_.length + 1}-label`
122 120 }
123 121 ])
... ... @@ -169,14 +167,15 @@ export default {
169 167 <input type="text" hidden value={this.value_} data-type="lbp-form-input" data-uuid={this.uuid} />
170 168 {
171 169 this.items.map(item => (
172   - <lbp-form-radio
  170 + <LbpFormRadio
173 171 vertical
174 172 value={item.value}
175 173 checked={this.value === item.value}
176 174 aliasName={this.aliasName}
177 175 type={this.type}
178 176 onChange={this.onChange}
179   - >{item.value}</lbp-form-radio>
  177 + >{item.value}
  178 + </LbpFormRadio>
180 179 ))
181 180 }
182 181 </div>
... ...
front-end/h5/src/components/plugins/lbp-form-radio.js
  View file @40bc3c8
1 1 import './styles/radio.scss'
2 2 import commonProps from './common/props.js'
3 3 import editorConfigForProps from './common/editor-config-for-configurable-props.js'
  4 +import { genUUID } from '../../utils/element.js'
4 5  
5 6 export default {
6 7 name: 'lbp-form-radio',
... ... @@ -8,7 +9,7 @@ export default {
8 9 ...commonProps,
9 10 value: {
10 11 type: [String, Number],
11   - default: '标题演示'
  12 + default: '选项值'
12 13 },
13 14 aliasName: {
14 15 type: String,
... ... @@ -29,6 +30,10 @@ export default {
29 30 onBlur: {
30 31 type: Function,
31 32 default: () => {}
  33 + },
  34 + doChange: {
  35 + type: Function,
  36 + default: () => {}
32 37 }
33 38 },
34 39 editorConfig: {
... ... @@ -44,68 +49,99 @@ export default {
44 49 },
45 50 render () {
46 51 const {
47   - color,
48   - textAlign,
49   - backgroundColor,
50   - fontSize,
51   - lineHeight,
52   - borderColor,
53   - borderRadius,
54   - borderWidth,
  52 + // color,
  53 + // textAlign,
  54 + // backgroundColor,
  55 + // fontSize,
  56 + // lineHeight,
  57 + // borderColor,
  58 + // borderRadius,
  59 + // borderWidth,
55 60 aliasName,
56   - id,
  61 + // id,
57 62 type,
58 63 // readOnly, // ?
59 64 disabled,
60 65 // tabIndex, // ?
61 66 checked,
62 67 // autoFocus,
63   - value,
64   - vertical
  68 + value
  69 + // vertical
65 70 } = this
66 71  
67   - const style = {
68   - color,
69   - textAlign,
70   - backgroundColor,
71   - fontSize: fontSize,
72   - lineHeight: lineHeight + 'em',
73   - borderColor,
74   - borderRadius: borderRadius + 'px',
75   - borderWidth: borderWidth + 'px',
76   - textDecoration: 'none',
77   - display: vertical ? 'block' : 'inline-block'
78   - }
  72 + const uuid = +new Date() + genUUID()
  73 +
  74 + // const style = {
  75 + // color,
  76 + // textAlign,
  77 + // backgroundColor,
  78 + // fontSize: fontSize,
  79 + // lineHeight: lineHeight + 'em',
  80 + // borderColor,
  81 + // borderRadius: borderRadius + 'px',
  82 + // borderWidth: borderWidth + 'px',
  83 + // textDecoration: 'none',
  84 + // display: vertical ? 'block' : 'inline-block'
  85 + // }
79 86  
80   - const checkedClass = checked && 'is-checked'
  87 + // const checkedClass = checked && 'is-checked'
81 88 return (
82   - <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
83   - <span class={'lbp-radio__input' + checkedClass}>
84   - <span class="lbp-radio__inner"></span>
85   - <input
86   - class="lbp-radio__original"
87   - name={aliasName}
88   - id={id}
89   - type={type}
90   - ref="input"
91   - value={value}
92   - disabled={disabled}
93   - checked={!!checked}
94   - onChange={this.handleChange}
95   - // readOnly={readOnly}
96   - // tabIndex={tabIndex}
97   - // className={`${prefixCls}-input`}
98   - // onClick={this.onClick}
99   - // onFocus={this.onFocus}
100   - // onBlur={this.onBlur}
101   - // onInput={this.onInput}
102   - // autoFocus={autoFocus}
103   - // data-type="lbp-form-input"
104   - // {...globalProps}
105   - />
106   - <span class="lbp-radio__label"><slot>{value}</slot></span>
107   - </span>
108   - </label>
  89 + <div class={['lbp-' + this.type + '-wrapper', 'lbp-rc-wrapper']}>
  90 + <span class="tag">{value}</span>
  91 + <input
  92 + class={['lbp-' + this.type, 'lbp-rc-input']}
  93 + name={aliasName}
  94 + id={uuid}
  95 + // id={id}
  96 + type={type}
  97 + ref="input"
  98 + value={value}
  99 + disabled={disabled}
  100 + checked={!!checked}
  101 + onChange={this.handleChange}
  102 + // readOnly={readOnly}
  103 + // tabIndex={tabIndex}
  104 + // className={`${prefixCls}-input`}
  105 + // onClick={this.onClick}
  106 + // onFocus={this.onFocus}
  107 + // onBlur={this.onBlur}
  108 + // onInput={this.onInput}
  109 + // autoFocus={autoFocus}
  110 + // data-type="lbp-form-input"
  111 + // {...globalProps}
  112 + />
  113 + {/* <input type="checkbox" id="checkbox-1-1" class="lbp-checkbox" /> */}
  114 + {/* <label for="checkbox-1-1"></label> */}
  115 + <label for={uuid}></label>
  116 + </div>
  117 + // <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
  118 + // <span class={'lbp-radio__input ' + checkedClass}>
  119 + // <span class="lbp-radio__inner"></span>
  120 + // {checked + ''}
  121 + // <input
  122 + // class="lbp-radio__original"
  123 + // name={aliasName}
  124 + // id={id}
  125 + // type={type}
  126 + // ref="input"
  127 + // value={value}
  128 + // disabled={disabled}
  129 + // checked={!!checked}
  130 + // onChange={this.handleChange}
  131 + // // readOnly={readOnly}
  132 + // // tabIndex={tabIndex}
  133 + // // className={`${prefixCls}-input`}
  134 + // // onClick={this.onClick}
  135 + // // onFocus={this.onFocus}
  136 + // // onBlur={this.onBlur}
  137 + // // onInput={this.onInput}
  138 + // // autoFocus={autoFocus}
  139 + // // data-type="lbp-form-input"
  140 + // // {...globalProps}
  141 + // />
  142 + // <span class="lbp-radio__label"><slot>{value}</slot></span>
  143 + // </span>
  144 + // </label>
109 145 )
110 146 }
111 147 }
... ...
front-end/h5/src/components/plugins/styles/radio.scss
  View file @40bc3c8
1   -// thanks for element-ui
2   -.lbp-radio {
3   - color: #606266;
4   - font-weight: 500;
5   - line-height: 1;
6   - position: relative;
7   - cursor: pointer;
8   - display: inline-block;
9   - white-space: nowrap;
10   - outline: none;
11   - font-size: 14px;
12   - margin-right: 30px;
  1 +// rc -> radio & checkbox
  2 +// https://www.inserthtml.com/2012/06/custom-form-radio-checkbox/
  3 +$radio-size: 6px;
  4 +$radio-label-size: $radio-size ;
  5 +$radio-offset: $radio-size / 2;
13 6  
14   - .lbp-radio__label {
15   - padding-left: 10px;
16   - }
  7 +$checkbox-size: 6px;
  8 +$checkbox-check-width: $checkbox-size / 4 * 3;
  9 +$checkbox-check-height: $checkbox-size / 4 * 5;
  10 +
  11 +.lbp-rc-wrapper {
  12 + position: relative;
  13 + height: 20px;
  14 + clear: both;
17 15  
18   - .lbp-radio__input {
  16 + .lbp-rc-input {
  17 + display: none;
  18 + }
  19 +
  20 + .tag {
  21 + float: left;
  22 + margin-left: 20px;
  23 + overflow: hidden;
  24 + text-overflow: ellipsis;
19 25 white-space: nowrap;
20   - cursor: pointer;
21   - outline: none;
22   - display: inline-block;
23   - line-height: 1;
24   - position: relative;
25   - vertical-align: middle;
  26 + // position: absolute;
  27 + // left: 24px;
  28 + }
  29 +
  30 + .lbp-rc-input + label {
  31 + position: absolute;
  32 + left: 0;
  33 + top: 2px;
26 34  
27   - .lbp-radio__inner {
28   - border: 1px solid #dcdfe6;
29   - border-radius: 100%;
30   - width: 14px;
31   - height: 14px;
32   - background-color: #fff;
33   - position: relative;
34   - cursor: pointer;
35   - display: inline-block;
36   - box-sizing: border-box;
  35 + appearance: none;
  36 + background-color: #fafafa;
  37 + border: 1px solid #cacece;
  38 + }
  39 +}
37 40  
38   - &:after {
39   - width: 6px;
40   - height: 6px;
41   - border-radius: 100%;
42   - background-color: #fff;
43   - content: "";
44   - position: absolute;
45   - left: 50%;
46   - top: 50%;
47   - transform: translate(-50%,-50%) scale(0);
48   - transition: transform .15s ease-in;
49   - }
50   - }
51 41  
52   - &.is-checked .lbp-radio__inner {
53   - border-color: #409eff;
54   - background: #409eff;
55   - }
  42 +.lbp-checkbox {
  43 + & + label {
  44 + top: 2px;
  45 + padding: $checkbox-size; // 控制 checkbox 的大小
  46 + border-radius: 2px;
  47 + }
56 48  
57   - &.is-checked .lbp-radio__inner:after {
58   - transform: translate(-50%,-50%) scale(1);
59   - }
  49 + &:checked + label:after {
  50 + content: " ";
60 51  
61   - .lbp-radio__original {
62   - opacity: 0;
63   - outline: none;
64   - position: absolute;
65   - z-index: -1;
66   - top: 0;
67   - left: 0;
68   - right: 0;
69   - bottom: 0;
70   - margin: 0;
71   - }
72   - }
  52 + position: absolute;
  53 + top: $checkbox-size / 4 - 1px ;
  54 + left: $checkbox-size / 4 * 3 - 1px;
  55 + z-index: 999;
  56 + width: $checkbox-check-width;
  57 + height: $checkbox-check-height;
  58 + // width: 5px;
  59 + // height: 11px;
  60 + border-style: solid;
  61 + border-width: 0 1px 1px 0;
  62 + transform: rotate(45deg);
  63 + // color: #3396fb;
  64 + }
  65 +}
  66 +
  67 +.lbp-radio {
  68 + & + label {
  69 + padding: $radio-size;
  70 + border-radius: 50px;
  71 + display: inline-block;
  72 + }
  73 + // &:checked + label {
  74 + // background-color: #e9ecee;
  75 + // color: #99a1a7;
  76 + // border: 1px solid #adb8c0;
  77 + // box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
  78 + // }
  79 +
  80 + // // thanks for https://mobile.ant.design/components/checkbox-cn/
  81 + &:checked + label:after {
  82 + content: ' ';
  83 + position: absolute;
  84 + top: $radio-offset;
  85 + left: $radio-offset;
  86 +
  87 + width: $radio-label-size;
  88 + height: $radio-label-size;
  89 + border-radius: 50px;
  90 + background: #99a1a7;
  91 + box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
  92 + text-shadow: 0px;
  93 + font-size: 32px;
  94 + }
73 95 }
74 96 \ No newline at end of file
... ...
front-end/h5/src/utils/element.js
  View file @40bc3c8
... ... @@ -35,3 +35,8 @@ export function parsePx (px, isRem = false) {
35 35 if (isRem) return px2Rem(px)
36 36 return `${px}px`
37 37 }
  38 +
  39 +export const genUUID = () => {
  40 + // http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
  41 + return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
  42 +}
... ...