update
parent
891e17a185
commit
0a35c612ee
|
@ -8,6 +8,7 @@
|
|||
<style lang="scss">
|
||||
:host {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -60,6 +60,8 @@ export default class Option {
|
|||
|
||||
__init__() {
|
||||
/* render */
|
||||
|
||||
this.__LABEL__ = this.root.children[1]
|
||||
}
|
||||
|
||||
get value() {
|
||||
|
@ -82,6 +84,7 @@ export default class Option {
|
|||
return
|
||||
}
|
||||
this.props.label = val
|
||||
this.__LABEL__.textContent = val
|
||||
}
|
||||
|
||||
get disabled() {
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<style lang="scss">
|
||||
:host {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
|
@ -228,9 +229,7 @@ export default class Radio {
|
|||
|
||||
this.checked = true
|
||||
|
||||
this.parentNode.dispatchEvent(
|
||||
new CustomEvent('child-picked', { detail: this.value })
|
||||
)
|
||||
this.parentNode.dispatchEvent(new CustomEvent('child-picked', { detail: this.value }))
|
||||
}
|
||||
|
||||
mounted() {
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
<div class="label">
|
||||
<input readonly />
|
||||
<wc-icon class="arrow" is="left"></wc-icon>
|
||||
<div class="opt-box">
|
||||
<wc-scroll>
|
||||
<dl class="list"></dl>
|
||||
</wc-scroll>
|
||||
</div>
|
||||
<wc-icon class="arrow" is="trigon-down"></wc-icon>
|
||||
|
||||
<wc-scroll class="opt-box">
|
||||
<div class="list"><slot /></div>
|
||||
</wc-scroll>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -28,6 +27,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
border: 1px solid var(--color-grey-2);
|
||||
border-radius: inherit;
|
||||
|
@ -40,7 +40,6 @@
|
|||
min-width: 36px;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
border: 0;
|
||||
border-radius: inherit;
|
||||
color: inherit;
|
||||
|
@ -85,10 +84,8 @@
|
|||
|
||||
/* ----- */
|
||||
.arrow {
|
||||
padding: 0 5px;
|
||||
--size: 14px;
|
||||
color: #ddd;
|
||||
transform: rotate(-90deg);
|
||||
color: var(--color-grey-2);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -108,9 +105,6 @@
|
|||
background: var(--color-plain-1);
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.list {
|
||||
width: 100%;
|
||||
}
|
||||
&.show {
|
||||
display: flex;
|
||||
}
|
||||
|
@ -233,18 +227,18 @@ function parseOptions(arr, props) {
|
|||
if (!_.disabled) {
|
||||
props.LIST.push(_)
|
||||
}
|
||||
html += `<dd sub ${
|
||||
_.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`
|
||||
} ${_.value === props.value ? 'focus' : ''}>${_.label}</dd>`
|
||||
html += `<dd sub ${_.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`} ${
|
||||
_.value === props.value ? 'focus' : ''
|
||||
}>${_.label}</dd>`
|
||||
}
|
||||
} else {
|
||||
if (!it.disabled) {
|
||||
props.LIST.push(it)
|
||||
}
|
||||
props.DICT[it.value] = it
|
||||
html += `<dd ${
|
||||
it.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`
|
||||
} ${it.value === props.value ? 'focus' : ''}>${it.label}</dd>`
|
||||
html += `<dd ${it.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`} ${
|
||||
it.value === props.value ? 'focus' : ''
|
||||
}>${it.label}</dd>`
|
||||
}
|
||||
}
|
||||
return html
|
||||
|
@ -256,7 +250,6 @@ export default class Select {
|
|||
placeholder: '',
|
||||
multi: '',
|
||||
value: '',
|
||||
options: '',
|
||||
mvidx: null, //下拉列表光标的索引ID
|
||||
readonly: false,
|
||||
disabled: false
|
||||
|
@ -475,14 +468,14 @@ export default class Select {
|
|||
this.__INPUT__.setAttribute('placeholder', val)
|
||||
break
|
||||
|
||||
case 'options':
|
||||
if (val) {
|
||||
try {
|
||||
this._renderOptions(JSON.parse(val))
|
||||
} catch (err) {}
|
||||
this.removeAttribute('options')
|
||||
}
|
||||
break
|
||||
// case 'options':
|
||||
// if (val) {
|
||||
// try {
|
||||
// this._renderOptions(JSON.parse(val))
|
||||
// } catch (err) {}
|
||||
// this.removeAttribute('options')
|
||||
// }
|
||||
// break
|
||||
|
||||
case 'value':
|
||||
this.value = val
|
||||
|
|
|
@ -9,13 +9,13 @@
|
|||
|
||||
<style lang="scss">
|
||||
:host {
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// vertical-align: middle;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
@ -162,21 +162,26 @@ export default class Switch {
|
|||
}
|
||||
}
|
||||
|
||||
_updateStat() {
|
||||
if (this.checked) {
|
||||
if (this.props['active-text'] !== null) {
|
||||
this.textContent = this.props['active-text']
|
||||
}
|
||||
} else {
|
||||
if (this.props['inactive-text'] !== null) {
|
||||
this.textContent = this.props['inactive-text']
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mounted() {
|
||||
this._handleClick = $.bind(this, 'click', ev => {
|
||||
if (this.disabled) {
|
||||
return
|
||||
}
|
||||
this.checked = !this.checked
|
||||
if (this.checked) {
|
||||
if (this.props['active-text'] !== null) {
|
||||
this.textContent = this.props['active-text']
|
||||
}
|
||||
} else {
|
||||
if (this.props['inactive-text'] !== null) {
|
||||
this.textContent = this.props['inactive-text']
|
||||
}
|
||||
}
|
||||
|
||||
this._updateStat()
|
||||
this.dispatchEvent(new CustomEvent('input'))
|
||||
})
|
||||
}
|
||||
|
@ -194,8 +199,8 @@ export default class Switch {
|
|||
|
||||
case 'active-text':
|
||||
case 'inactive-text':
|
||||
console.log('------------->>>')
|
||||
this.props[name] = val + ''
|
||||
this._updateStat()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
|
Reference in New Issue