update checkbox&radio style

ly525
1 parent df14dc74
Showing 5 changed files with 197 additions and 134 deletions
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js
front-end/h5/src/components/plugins/lbp-form-radio-group.js
front-end/h5/src/components/plugins/lbp-form-radio.js
front-end/h5/src/components/plugins/styles/radio.scss
front-end/h5/src/utils/element.js
 import LbpFormRadio from './lbp-form-radio.js'
+import { genUUID } from '../../utils/element.js'
 const defaultItems = [
   {
-    value: '选项A-value'
+    value: '选项A'
   },
   {
-    value: '选项B-value'
+    value: '选项B'
   },
   {
-    value: '选项C-value'
+    value: '选项C'
   }
 ]
@@ -20,7 +21,7 @@ export default {
   props: {
     aliasName: {
       type: String,
-      default: '标题演示'
+      default: `标题演示-${genUUID().slice(0, 6)}`
     },
     items: {
       type: Array,
@@ -64,7 +65,7 @@ export default {
         type: 'a-input',
         label: '填写标题',
         require: true,
-        defaultPropValue: '标题演示'
+        defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`
       },
       type: {
         type: 'a-radio-group',
@@ -117,7 +118,7 @@ export default {
             this.$emit('change', [
               ...this.value_,
               {
-                value: `选项${this.value_.length + 1}-value`,
+                value: `选项${this.value_.length + 1}`,
                 label: `选项${this.value_.length + 1}-label`
               }
             ])
@@ -172,7 +173,7 @@ export default {
             <lbp-form-radio
               vertical
               value={item.value}
-              checked={this.value === item.value}
+              checked={this.type === 'radio' ? this.value === item.value : this.value.includes(item.value)}
               aliasName={this.aliasName}
               type={this.type}
               onChange={this.onChange}
 import LbpFormRadio from './lbp-form-radio.js'
+import { genUUID } from '../../utils/element.js'
 const defaultItems = [
   {
-    value: '选项A-value'
+    value: '选项A'
   },
   {
-    value: '选项B-value'
+    value: '选项B'
   },
   {
-    value: '选项C-value'
+    value: '选项C'
   }
 ]
 export default {
   name: 'lbp-form-radio-group',
-  components: {
-    LbpFormRadio
-  },
   props: {
     aliasName: {
       type: String,
-      default: '标题演示'
+      default: `标题演示-${genUUID().slice(0, 6)}`
     },
     items: {
       type: Array,
@@ -64,7 +62,7 @@ export default {
         type: 'a-input',
         label: '填写标题',
         require: true,
-        defaultPropValue: '标题演示'
+        defaultPropValue: `标题演示-${genUUID().slice(0, 6)}`
       },
       type: {
         type: 'a-radio-group',
@@ -117,7 +115,7 @@ export default {
             this.$emit('change', [
               ...this.value_,
               {
-                value: `选项${this.value_.length + 1}-value`,
+                value: `选项${this.value_.length + 1}`,
                 label: `选项${this.value_.length + 1}-label`
               }
             ])
@@ -169,14 +167,15 @@ export default {
         <input type="text" hidden value={this.value_} data-type="lbp-form-input" data-uuid={this.uuid} />
         {
           this.items.map(item => (
-            <lbp-form-radio
+            <LbpFormRadio
               vertical
               value={item.value}
               checked={this.value === item.value}
               aliasName={this.aliasName}
               type={this.type}
               onChange={this.onChange}
-            >{item.value}</lbp-form-radio>
+            >{item.value}
+            </LbpFormRadio>
           ))
         }
       </div>
 import './styles/radio.scss'
 import commonProps from './common/props.js'
 import editorConfigForProps from './common/editor-config-for-configurable-props.js'
+import { genUUID } from '../../utils/element.js'
 export default {
   name: 'lbp-form-radio',
@@ -8,7 +9,7 @@ export default {
     ...commonProps,
     value: {
       type: [String, Number],
-      default: '标题演示'
+      default: '选项值'
     },
     aliasName: {
       type: String,
@@ -29,6 +30,10 @@ export default {
     onBlur: {
       type: Function,
       default: () => {}
+    },
+    doChange: {
+      type: Function,
+      default: () => {}
     }
   },
   editorConfig: {
@@ -44,68 +49,99 @@ export default {
   },
   render () {
     const {
-      color,
-      textAlign,
-      backgroundColor,
-      fontSize,
-      lineHeight,
-      borderColor,
-      borderRadius,
-      borderWidth,
+      // color,
+      // textAlign,
+      // backgroundColor,
+      // fontSize,
+      // lineHeight,
+      // borderColor,
+      // borderRadius,
+      // borderWidth,
       aliasName,
-      id,
+      // id,
       type,
       // readOnly, // ?
       disabled,
       // tabIndex, // ?
       checked,
       // autoFocus,
-      value,
-      vertical
+      value
+      // vertical
     } = this
-    const style = {
-      color,
-      textAlign,
-      backgroundColor,
-      fontSize: fontSize,
-      lineHeight: lineHeight + 'em',
-      borderColor,
-      borderRadius: borderRadius + 'px',
-      borderWidth: borderWidth + 'px',
-      textDecoration: 'none',
-      display: vertical ? 'block' : 'inline-block'
-    }
+    const uuid = +new Date() + genUUID()
+
+    // const style = {
+    //   color,
+    //   textAlign,
+    //   backgroundColor,
+    //   fontSize: fontSize,
+    //   lineHeight: lineHeight + 'em',
+    //   borderColor,
+    //   borderRadius: borderRadius + 'px',
+    //   borderWidth: borderWidth + 'px',
+    //   textDecoration: 'none',
+    //   display: vertical ? 'block' : 'inline-block'
+    // }
-    const checkedClass = checked && 'is-checked'
+    // const checkedClass = checked && 'is-checked'
     return (
-      <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
-        <span class={'lbp-radio__input' + checkedClass}>
-          <span class="lbp-radio__inner"></span>
-          <input
-            class="lbp-radio__original"
-            name={aliasName}
-            id={id}
-            type={type}
-            ref="input"
-            value={value}
-            disabled={disabled}
-            checked={!!checked}
-            onChange={this.handleChange}
-          // readOnly={readOnly}
-          // tabIndex={tabIndex}
-          // className={`${prefixCls}-input`}
-          // onClick={this.onClick}
-          // onFocus={this.onFocus}
-          // onBlur={this.onBlur}
-          // onInput={this.onInput}
-          // autoFocus={autoFocus}
-          // data-type="lbp-form-input"
-          // {...globalProps}
-          />
-          <span class="lbp-radio__label"><slot>{value}</slot></span>
-        </span>
-      </label>
+      <div class={['lbp-' + this.type + '-wrapper', 'lbp-rc-wrapper']}>
+        <span class="tag">{value}</span>
+        <input
+          class={['lbp-' + this.type, 'lbp-rc-input']}
+          name={aliasName}
+          id={uuid}
+          // id={id}
+          type={type}
+          ref="input"
+          value={value}
+          disabled={disabled}
+          checked={!!checked}
+          onChange={this.handleChange}
+        // readOnly={readOnly}
+        // tabIndex={tabIndex}
+        // className={`${prefixCls}-input`}
+        // onClick={this.onClick}
+        // onFocus={this.onFocus}
+        // onBlur={this.onBlur}
+        // onInput={this.onInput}
+        // autoFocus={autoFocus}
+        // data-type="lbp-form-input"
+        // {...globalProps}
+        />
+        {/* <input type="checkbox" id="checkbox-1-1" class="lbp-checkbox" /> */}
+        {/* <label for="checkbox-1-1"></label> */}
+        <label for={uuid}></label>
+      </div>
+      // <label role="radio" tabindex="0" class="lbp-radio" style={style} aria-checked="true">
+      //   <span class={'lbp-radio__input ' + checkedClass}>
+      //     <span class="lbp-radio__inner"></span>
+      //     {checked + ''}
+      //     <input
+      //       class="lbp-radio__original"
+      //       name={aliasName}
+      //       id={id}
+      //       type={type}
+      //       ref="input"
+      //       value={value}
+      //       disabled={disabled}
+      //       checked={!!checked}
+      //       onChange={this.handleChange}
+      //     // readOnly={readOnly}
+      //     // tabIndex={tabIndex}
+      //     // className={`${prefixCls}-input`}
+      //     // onClick={this.onClick}
+      //     // onFocus={this.onFocus}
+      //     // onBlur={this.onBlur}
+      //     // onInput={this.onInput}
+      //     // autoFocus={autoFocus}
+      //     // data-type="lbp-form-input"
+      //     // {...globalProps}
+      //     />
+      //     <span class="lbp-radio__label"><slot>{value}</slot></span>
+      //   </span>
+      // </label>
     )
   }
 }
-// thanks for element-ui
-.lbp-radio {
-  color: #606266;
-  font-weight: 500;
-  line-height: 1;
-  position: relative;
-  cursor: pointer;
-  display: inline-block;
-  white-space: nowrap;
-  outline: none;
-  font-size: 14px;
-  margin-right: 30px;
+// rc -> radio & checkbox
+// https://www.inserthtml.com/2012/06/custom-form-radio-checkbox/
+$radio-size: 6px;
+$radio-label-size: $radio-size ;
+$radio-offset: $radio-size / 2;
-  .lbp-radio__label {
-    padding-left: 10px;
-  }
+$checkbox-size: 6px;
+$checkbox-check-width: $checkbox-size / 4 * 3;
+$checkbox-check-height: $checkbox-size / 4 * 5;
+
+.lbp-rc-wrapper {
+	position: relative;
+	height: 20px;
+	clear: both;
-  .lbp-radio__input {
+	.lbp-rc-input {
+		display: none;
+	}
+
+  .tag {
+		float: left;
+		margin-left: 20px;
+		overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    display: inline-block;
-    line-height: 1;
-    position: relative;
-    vertical-align: middle;
+    // position: absolute;
+    // left: 24px;
+  }
+
+  .lbp-rc-input + label {
+    position: absolute;
+		left: 0;
+		top: 2px;
-    .lbp-radio__inner {
-      border: 1px solid #dcdfe6;
-      border-radius: 100%;
-      width: 14px;
-      height: 14px;
-      background-color: #fff;
-      position: relative;
-      cursor: pointer;
-      display: inline-block;
-      box-sizing: border-box;
+		appearance: none;
+		background-color: #fafafa;
+		border: 1px solid #cacece;
+  }
+}
-      &:after {
-        width: 6px;
-        height: 6px;
-        border-radius: 100%;
-        background-color: #fff;
-        content: "";
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%) scale(0);
-        transition: transform .15s ease-in;
-      }
-    }
-    &.is-checked .lbp-radio__inner {
-      border-color: #409eff;
-      background: #409eff;
-    }
+.lbp-checkbox {
+	& + label {
+		top: 2px;
+		padding: $checkbox-size; // 控制 checkbox 的大小
+		border-radius: 2px;
+	}
-    &.is-checked .lbp-radio__inner:after {
-      transform: translate(-50%,-50%) scale(1);
-    }
+	&:checked + label:after {
+		content: " ";
-    .lbp-radio__original {
-      opacity: 0;
-      outline: none;
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      margin: 0;
-    }
-  }
+		position: absolute;
+		top: $checkbox-size / 4 - 1px ;
+		left: $checkbox-size / 4 * 3 - 1px;
+		z-index: 999;
+		width: $checkbox-check-width;
+		height: $checkbox-check-height;
+		// width: 5px;
+		// height: 11px;
+		border-style: solid;
+		border-width: 0 1px 1px 0;
+		transform: rotate(45deg);
+		// color: #3396fb;
+	}
+}
+
+.lbp-radio {
+	& + label {
+		padding: $radio-size;
+		border-radius: 50px;
+		display: inline-block;
+	}
+	// &:checked + label {
+	// 	background-color: #e9ecee;
+	// 	color: #99a1a7;
+	// 	border: 1px solid #adb8c0;
+	// 	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);
+	// }
+
+	// // thanks for https://mobile.ant.design/components/checkbox-cn/
+	&:checked + label:after {
+		content: ' ';
+		position: absolute;
+		top: $radio-offset;
+		left: $radio-offset;
+
+		width: $radio-label-size;
+		height: $radio-label-size;
+		border-radius: 50px;
+		background: #99a1a7;
+		box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
+		text-shadow: 0px;
+		font-size: 32px;
+	}
 }
 \ No newline at end of file
@@ -35,3 +35,8 @@ export function parsePx (px, isRem = false) {
   if (isRem) return px2Rem(px)
   return `${px}px`
 }
+
+export const genUUID = () => {
+  // http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript
+  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+}