优化样式及事件触发
parent
94e38eb83f
commit
c8f99088ff
|
@ -229,7 +229,7 @@ export default class Radio {
|
||||||
|
|
||||||
this.checked = true
|
this.checked = true
|
||||||
|
|
||||||
this.parentNode.dispatchEvent(new CustomEvent('child-picked', { detail: this.value }))
|
$.fire(this.parentNode, 'child-picked', { value: this.value })
|
||||||
}
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
|
@ -100,7 +100,8 @@ export default class RadioGroup {
|
||||||
mounted() {
|
mounted() {
|
||||||
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
this._pickedFn = $.bind(this, 'child-picked', ev => {
|
||||||
this.value = ev.detail
|
this.value = ev.detail
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
$.fire(this, 'input')
|
||||||
|
$.fire(this, 'change')
|
||||||
})
|
})
|
||||||
|
|
||||||
this.__observer = new MutationObserver(_ => {
|
this.__observer = new MutationObserver(_ => {
|
||||||
|
|
|
@ -193,7 +193,8 @@ export default class Star {
|
||||||
}
|
}
|
||||||
if (ev.target.tagName === 'WC-ICON') {
|
if (ev.target.tagName === 'WC-ICON') {
|
||||||
this.props.value = tmp.i + tmp.f
|
this.props.value = tmp.i + tmp.f
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
$.fire(this, 'input', { value: this.value })
|
||||||
|
$.fire(this, 'change', { value: this.value })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<label>
|
<label>
|
||||||
<span class="dot"></span>
|
<span class="dot"></span>
|
||||||
</label>
|
</label>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -11,13 +11,15 @@
|
||||||
:host {
|
:host {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
height: 32px;
|
||||||
|
color: var(--color-dark-1);
|
||||||
|
|
||||||
section {
|
section {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 1;
|
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
label {
|
label {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -28,6 +30,7 @@
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
border-radius: 21px;
|
border-radius: 21px;
|
||||||
background: var(--color-plain-3);
|
background: var(--color-plain-3);
|
||||||
|
transition: background 0.2s linear;
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
|
|
||||||
&.checked {
|
&.checked {
|
||||||
|
@ -182,7 +185,8 @@ export default class Switch {
|
||||||
this.checked = !this.checked
|
this.checked = !this.checked
|
||||||
|
|
||||||
this._updateStat()
|
this._updateStat()
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
$.fire(this, 'input')
|
||||||
|
$.fire(this, 'change')
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -234,7 +234,7 @@ export default class Textarea {
|
||||||
}
|
}
|
||||||
|
|
||||||
this.stamp = now
|
this.stamp = now
|
||||||
this.dispatchEvent(new CustomEvent('submit', { detail: this.value }))
|
$.fire(this, 'submit', { value: this.value })
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -244,6 +244,7 @@ export default class Textarea {
|
||||||
maxlength = maxlength || '∞'
|
maxlength = maxlength || '∞'
|
||||||
|
|
||||||
this.__STAT__.textContent = `${len}/${maxlength}`
|
this.__STAT__.textContent = `${len}/${maxlength}`
|
||||||
|
$.fire(this, ev.type, { value: this.value })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Reference in New Issue