优化单选/复选框的样式及交互
parent
e7db91d727
commit
9ca9aa55ea
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<label tabindex="0">
|
<label tabindex="0">
|
||||||
<wc-icon class="dot" is="checkbox-off"></wc-icon>
|
<span class="dot"><wc-icon is="get"></wc-icon></span>
|
||||||
<slot />
|
<slot />
|
||||||
</label>
|
</label>
|
||||||
</template>
|
</template>
|
||||||
|
@ -24,16 +24,113 @@
|
||||||
user-select: none;
|
user-select: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
cursor: inherit;
|
cursor: inherit;
|
||||||
|
outline: none;
|
||||||
color: var(--color-dark-1);
|
color: var(--color-dark-1);
|
||||||
|
|
||||||
|
&.checked .dot {
|
||||||
|
background: var(--color-dark-1);
|
||||||
|
|
||||||
|
wc-icon {
|
||||||
|
--size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot {
|
.dot {
|
||||||
--size: 20px;
|
display: flex;
|
||||||
padding: 2px;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
margin-right: 4px;
|
margin-right: 4px;
|
||||||
|
border: 1px solid var(--color-dark-1);
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #fff;
|
||||||
|
color: #fff;
|
||||||
|
transition: box-shadow 0.15s linear, background 0.15s linear;
|
||||||
|
|
||||||
|
wc-icon {
|
||||||
|
--size: 0px;
|
||||||
|
transition: width 0.15s linear;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:host(:focus-within) .dot {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-plain-a);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([type='danger']) label {
|
||||||
|
color: var(--color-red-1);
|
||||||
|
.dot {
|
||||||
|
border-color: var(--color-red-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checked .dot {
|
||||||
|
background: var(--color-red-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='danger']:focus-within) .dot {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-red-a);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([type='info']) label {
|
||||||
|
color: var(--color-blue-1);
|
||||||
|
.dot {
|
||||||
|
border-color: var(--color-bule-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checked .dot {
|
||||||
|
background: var(--color-bule-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='info']:focus-within) .dot {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-blue-a);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([type='success']) label {
|
||||||
|
color: var(--color-green-1);
|
||||||
|
.dot {
|
||||||
|
border-color: var(--color-green-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checked .dot {
|
||||||
|
background: var(--color-green-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='success']:focus-within) .dot {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-green-a);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([type='primary']) label {
|
||||||
|
color: var(--color-teal-1);
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
border-color: var(--color-teal-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checked .dot {
|
||||||
|
background: var(--color-teal-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='primary']:focus-within) .dot {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-teal-a);
|
||||||
|
}
|
||||||
|
|
||||||
|
:host([type='warning']) label {
|
||||||
|
color: var(--color-orange-1);
|
||||||
|
.dot {
|
||||||
|
border-color: var(--color-orange-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.checked .dot {
|
||||||
|
background: var(--color-orange-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:host([type='warning']:focus-within) .dot {
|
||||||
|
box-shadow: 0 0 0 2px var(--color-orange-a);
|
||||||
|
}
|
||||||
|
|
||||||
:host([readonly]) {
|
:host([readonly]) {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
@ -47,26 +144,6 @@
|
||||||
color: var(--color-grey-2);
|
color: var(--color-grey-2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([type='danger']) label {
|
|
||||||
color: var(--color-red-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([type='info']) label {
|
|
||||||
color: var(--color-blue-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([type='success']) label {
|
|
||||||
color: var(--color-green-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([type='primary']) label {
|
|
||||||
color: var(--color-teal-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
:host([type='warning']) label {
|
|
||||||
color: var(--color-orange-1);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -163,32 +240,43 @@ export default class Checkbox {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_toggleCheck() {
|
||||||
|
if (this.disabled || this.readOnly) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.checked = !this.checked
|
||||||
|
|
||||||
|
if (this._isInGroup) {
|
||||||
|
this.parentNode.dispatchEvent(
|
||||||
|
new CustomEvent('child-picked', {
|
||||||
|
detail: { value: this.value, checked: this.checked }
|
||||||
|
})
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
this.dispatchEvent(new CustomEvent('input'))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this._checkGroup()
|
this._checkGroup()
|
||||||
|
|
||||||
this._handlClick = $.bind(this, 'click', ev => {
|
this._handlClick = $.bind(this, 'click', ev => {
|
||||||
ev.preventDefault()
|
ev.preventDefault()
|
||||||
|
this._toggleCheck()
|
||||||
|
})
|
||||||
|
|
||||||
if (this.disabled || this.readOnly) {
|
this._handlKeydown = $.bind(this, 'keydown', ev => {
|
||||||
return
|
// 空格交互
|
||||||
}
|
if (ev.keyCode === 32) {
|
||||||
|
this._toggleCheck()
|
||||||
this.checked = !this.checked
|
|
||||||
|
|
||||||
if (this._isInGroup) {
|
|
||||||
this.parentNode.dispatchEvent(
|
|
||||||
new CustomEvent('child-picked', {
|
|
||||||
detail: { value: this.value, checked: this.checked }
|
|
||||||
})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
this.dispatchEvent(new CustomEvent('input'))
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
$.unbind(this, 'click', this._handlClick)
|
$.unbind(this, 'click', this._handlClick)
|
||||||
|
$.unbind(this, 'keydown', this._handlKeydown)
|
||||||
}
|
}
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
|
|
|
@ -14,7 +14,9 @@ import './checkbox-item'
|
||||||
|
|
||||||
export default class CheckboxGroup {
|
export default class CheckboxGroup {
|
||||||
props = {
|
props = {
|
||||||
value: []
|
value: '',
|
||||||
|
disabled: false,
|
||||||
|
readonly: false
|
||||||
}
|
}
|
||||||
|
|
||||||
__init__() {
|
__init__() {
|
||||||
|
@ -71,9 +73,22 @@ export default class CheckboxGroup {
|
||||||
switch (name) {
|
switch (name) {
|
||||||
case 'value':
|
case 'value':
|
||||||
if (val) {
|
if (val) {
|
||||||
this.value = val.split(/,\s*?/)
|
this.value = val.split(',').map(it => it.trim())
|
||||||
}
|
}
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'readonly':
|
||||||
|
case 'disabled':
|
||||||
|
Array.from(this.children).forEach(it => {
|
||||||
|
if (it.tagName === 'WC-CHECKBOX' && it.root) {
|
||||||
|
if (val === null) {
|
||||||
|
it.removeAttribute(name)
|
||||||
|
} else {
|
||||||
|
it.setAttribute(name, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
|
|
||||||
&.checked .dot::after {
|
&.checked .dot::after {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -51,6 +52,8 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--color-dark-1);
|
background: var(--color-dark-1);
|
||||||
content: '';
|
content: '';
|
||||||
|
transform: scale(0);
|
||||||
|
transition: transform 0.15s linear;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -218,26 +221,39 @@ export default class Radio {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_toggleCheck() {
|
||||||
|
if (this.disabled || this.readOnly || this.checked) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.checked = true
|
||||||
|
|
||||||
|
this.parentNode.dispatchEvent(
|
||||||
|
new CustomEvent('child-picked', { detail: this.value })
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.value === this.parentNode.value) {
|
if (this.value === this.parentNode.value) {
|
||||||
this.checked = true
|
this.checked = true
|
||||||
}
|
}
|
||||||
|
|
||||||
this._handleClick = $.catch(this, 'click', ev => {
|
this._handleClick = $.catch(this, 'click', ev => {
|
||||||
if (this.disabled || this.readOnly || this.checked) {
|
ev.preventDefault()
|
||||||
return
|
this._toggleCheck()
|
||||||
|
})
|
||||||
|
|
||||||
|
this._handlKeydown = $.bind(this, 'keydown', ev => {
|
||||||
|
// 空格交互
|
||||||
|
if (ev.keyCode === 32) {
|
||||||
|
this._toggleCheck()
|
||||||
}
|
}
|
||||||
|
|
||||||
this.checked = true
|
|
||||||
|
|
||||||
this.parentNode.dispatchEvent(
|
|
||||||
new CustomEvent('child-picked', { detail: this.value })
|
|
||||||
)
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
unmount() {
|
unmount() {
|
||||||
$.unbind(this, 'click', this._handleClick)
|
$.unbind(this, 'click', this._handleClick)
|
||||||
|
$.unbind(this, 'keydown', this._handlKeydown)
|
||||||
}
|
}
|
||||||
|
|
||||||
watch() {
|
watch() {
|
||||||
|
|
|
@ -14,7 +14,9 @@ import './radio-item'
|
||||||
|
|
||||||
export default class RadioGroup {
|
export default class RadioGroup {
|
||||||
props = {
|
props = {
|
||||||
value: null
|
value: null,
|
||||||
|
disabled: false,
|
||||||
|
readonly: false
|
||||||
}
|
}
|
||||||
|
|
||||||
__init__() {
|
__init__() {
|
||||||
|
@ -61,6 +63,19 @@ export default class RadioGroup {
|
||||||
case 'value':
|
case 'value':
|
||||||
this.value = val
|
this.value = val
|
||||||
break
|
break
|
||||||
|
|
||||||
|
case 'readonly':
|
||||||
|
case 'disabled':
|
||||||
|
Array.from(this.children).forEach(it => {
|
||||||
|
if (it.tagName === 'WC-RADIO' && it.root) {
|
||||||
|
if (val === null) {
|
||||||
|
it.removeAttribute(name)
|
||||||
|
} else {
|
||||||
|
it.setAttribute(name, '')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
break
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -345,7 +345,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:host([readonly]) {
|
:host([readonly]) {
|
||||||
opacity: 0.6;
|
opacity: 0.8;
|
||||||
|
|
||||||
.toolbar {
|
.toolbar {
|
||||||
span:hover {
|
span:hover {
|
||||||
|
|
Reference in New Issue