优化表单组件的checked属性

src/css/var.scss

@@ -2,7 +2,7 @@ $ct: #19b491 #3fc2a7 #16967a;
 $cg: #2ecc71 #58d68d #27ae60;
 $cpp: #9b59b6 #ac61ce #8e44ad;
 $cb: #2d8dd6 #52a3de #2776b1;
-$cr: #e34235 #e96458 #be382d;
+$cr: #eb3b48 #ff5061 #ce3742;
 $co: #f39c12 #ffb618 #e67e22;
 $cp: #e7e8eb #f3f5fb #bdc3c7;
 $cgr: #8a9b9c #98acae #748182;

src/js/form/index.js

@@ -66,11 +66,18 @@ Anot.component('button', {
 // 单选按钮
 Anot.component('radio', {
   __init__(props, state, next) {
-    state.text = this.textContent
-    state.checked = state.value === props.label
     if (props.hasOwnProperty('disabled')) {
       state.disabled = true
     }
+    if (props.hasOwnProperty('checked')) {
+      if (state.value === null) {
+        state.value = props.label
+      }
+    }
+
+    state.text = this.textContent
+    state.checked = state.value === props.label
+
     this.classList.add('do-radio')
     this.classList.add('do-fn-noselect')
     this.classList.add(props.color || 'grey')
@@ -94,6 +101,9 @@ Anot.component('radio', {
     checked: false,
     disabled: false
   },
+  props: {
+    label: ''
+  },
   watch: {
     value(val) {
       this.checked = this.props.label === val
@@ -155,11 +165,15 @@ Anot.component('checkbox', {
       this.parentNode.removeChild(this)
       Anot.error('多选框的传入值必须一个数组', TypeError)
     }
-    state.text = this.textContent
-    state.checked = state.value.indexOf(props.label) > -1
     if (props.hasOwnProperty('disabled')) {
       state.disabled = true
     }
+    if (props.hasOwnProperty('checked')) {
+      Anot.Array.ensure(state.value, props.label)
+    }
+
+    state.text = this.textContent
+    state.checked = state.value.indexOf(props.label) > -1
 
     this.classList.add('do-checkbox')
     this.classList.add('do-fn-noselect')
@@ -185,6 +199,9 @@ Anot.component('checkbox', {
     checked: false,
     disabled: false
   },
+  props: {
+    label: ''
+  },
   methods: {
     onClick() {
       if (this.disabled) {

src/js/form/style.scss

@@ -167,7 +167,7 @@
 .do-checkbox {position:relative;display:inline-block;width:auto;height:30px;padding-right:10px;line-height:30px;text-align:center;cursor:default;font-size:14px;
 
 
-  &__box {float:left;width:20px;height:20px;margin:5px;margin-right:0;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px;font-size:18px;text-align:center;
+  &__box {float:left;width:20px;height:20px;margin:5px;margin-left:0;line-height:18px;border:1px solid nth($cgr, 1);border-radius:3px;font-size:18px;text-align:center;
     
   }
   &.checked &__box {color:#fff;font-weight:bold;}