优化表单组件的checked属性
parent
b1b0a210a7
commit
95d0395d34
|
@ -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;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;}
|
||||
|
|
Reference in New Issue