优化表单组件的checked属性
parent
b1b0a210a7
commit
95d0395d34
|
@ -2,7 +2,7 @@ $ct: #19b491 #3fc2a7 #16967a;
|
||||||
$cg: #2ecc71 #58d68d #27ae60;
|
$cg: #2ecc71 #58d68d #27ae60;
|
||||||
$cpp: #9b59b6 #ac61ce #8e44ad;
|
$cpp: #9b59b6 #ac61ce #8e44ad;
|
||||||
$cb: #2d8dd6 #52a3de #2776b1;
|
$cb: #2d8dd6 #52a3de #2776b1;
|
||||||
$cr: #e34235 #e96458 #be382d;
|
$cr: #eb3b48 #ff5061 #ce3742;
|
||||||
$co: #f39c12 #ffb618 #e67e22;
|
$co: #f39c12 #ffb618 #e67e22;
|
||||||
$cp: #e7e8eb #f3f5fb #bdc3c7;
|
$cp: #e7e8eb #f3f5fb #bdc3c7;
|
||||||
$cgr: #8a9b9c #98acae #748182;
|
$cgr: #8a9b9c #98acae #748182;
|
||||||
|
|
|
@ -66,11 +66,18 @@ Anot.component('button', {
|
||||||
// 单选按钮
|
// 单选按钮
|
||||||
Anot.component('radio', {
|
Anot.component('radio', {
|
||||||
__init__(props, state, next) {
|
__init__(props, state, next) {
|
||||||
state.text = this.textContent
|
|
||||||
state.checked = state.value === props.label
|
|
||||||
if (props.hasOwnProperty('disabled')) {
|
if (props.hasOwnProperty('disabled')) {
|
||||||
state.disabled = true
|
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-radio')
|
||||||
this.classList.add('do-fn-noselect')
|
this.classList.add('do-fn-noselect')
|
||||||
this.classList.add(props.color || 'grey')
|
this.classList.add(props.color || 'grey')
|
||||||
|
@ -94,6 +101,9 @@ Anot.component('radio', {
|
||||||
checked: false,
|
checked: false,
|
||||||
disabled: false
|
disabled: false
|
||||||
},
|
},
|
||||||
|
props: {
|
||||||
|
label: ''
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
value(val) {
|
value(val) {
|
||||||
this.checked = this.props.label === val
|
this.checked = this.props.label === val
|
||||||
|
@ -155,11 +165,15 @@ Anot.component('checkbox', {
|
||||||
this.parentNode.removeChild(this)
|
this.parentNode.removeChild(this)
|
||||||
Anot.error('多选框的传入值必须一个数组', TypeError)
|
Anot.error('多选框的传入值必须一个数组', TypeError)
|
||||||
}
|
}
|
||||||
state.text = this.textContent
|
|
||||||
state.checked = state.value.indexOf(props.label) > -1
|
|
||||||
if (props.hasOwnProperty('disabled')) {
|
if (props.hasOwnProperty('disabled')) {
|
||||||
state.disabled = true
|
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-checkbox')
|
||||||
this.classList.add('do-fn-noselect')
|
this.classList.add('do-fn-noselect')
|
||||||
|
@ -185,6 +199,9 @@ Anot.component('checkbox', {
|
||||||
checked: false,
|
checked: false,
|
||||||
disabled: false
|
disabled: false
|
||||||
},
|
},
|
||||||
|
props: {
|
||||||
|
label: ''
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onClick() {
|
onClick() {
|
||||||
if (this.disabled) {
|
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;
|
.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;}
|
&.checked &__box {color:#fff;font-weight:bold;}
|
||||||
|
|
Reference in New Issue