This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
old
yutent 2022-01-18 18:50:01 +08:00
parent 891e17a185
commit 0a35c612ee
5 changed files with 44 additions and 43 deletions

View File

@ -8,6 +8,7 @@
<style lang="scss"> <style lang="scss">
:host { :host {
display: inline-flex; display: inline-flex;
align-items: center;
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;

View File

@ -60,6 +60,8 @@ export default class Option {
__init__() { __init__() {
/* render */ /* render */
this.__LABEL__ = this.root.children[1]
} }
get value() { get value() {
@ -82,6 +84,7 @@ export default class Option {
return return
} }
this.props.label = val this.props.label = val
this.__LABEL__.textContent = val
} }
get disabled() { get disabled() {

View File

@ -8,6 +8,7 @@
<style lang="scss"> <style lang="scss">
:host { :host {
display: inline-flex; display: inline-flex;
align-items: center;
line-height: 1; line-height: 1;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
@ -228,9 +229,7 @@ export default class Radio {
this.checked = true this.checked = true
this.parentNode.dispatchEvent( this.parentNode.dispatchEvent(new CustomEvent('child-picked', { detail: this.value }))
new CustomEvent('child-picked', { detail: this.value })
)
} }
mounted() { mounted() {

View File

@ -1,12 +1,11 @@
<template> <template>
<div class="label"> <div class="label">
<input readonly /> <input readonly />
<wc-icon class="arrow" is="left"></wc-icon> <wc-icon class="arrow" is="trigon-down"></wc-icon>
<div class="opt-box">
<wc-scroll> <wc-scroll class="opt-box">
<dl class="list"></dl> <div class="list"><slot /></div>
</wc-scroll> </wc-scroll>
</div>
</div> </div>
</template> </template>
@ -28,6 +27,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 36px; height: 36px;
padding: 0 8px;
font-size: 14px; font-size: 14px;
border: 1px solid var(--color-grey-2); border: 1px solid var(--color-grey-2);
border-radius: inherit; border-radius: inherit;
@ -40,7 +40,6 @@
min-width: 36px; min-width: 36px;
width: 0; width: 0;
height: 100%; height: 100%;
padding: 0 8px;
border: 0; border: 0;
border-radius: inherit; border-radius: inherit;
color: inherit; color: inherit;
@ -85,10 +84,8 @@
/* ----- */ /* ----- */
.arrow { .arrow {
padding: 0 5px;
--size: 14px; --size: 14px;
color: #ddd; color: var(--color-grey-2);
transform: rotate(-90deg);
} }
} }
@ -108,9 +105,6 @@
background: var(--color-plain-1); background: var(--color-plain-1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
.list {
width: 100%;
}
&.show { &.show {
display: flex; display: flex;
} }
@ -233,18 +227,18 @@ function parseOptions(arr, props) {
if (!_.disabled) { if (!_.disabled) {
props.LIST.push(_) props.LIST.push(_)
} }
html += `<dd sub ${ html += `<dd sub ${_.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`} ${
_.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"` _.value === props.value ? 'focus' : ''
} ${_.value === props.value ? 'focus' : ''}>${_.label}</dd>` }>${_.label}</dd>`
} }
} else { } else {
if (!it.disabled) { if (!it.disabled) {
props.LIST.push(it) props.LIST.push(it)
} }
props.DICT[it.value] = it props.DICT[it.value] = it
html += `<dd ${ html += `<dd ${it.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"`} ${
it.disabled ? 'disabled' : `data-idx="${props.LIST.length - 1}"` it.value === props.value ? 'focus' : ''
} ${it.value === props.value ? 'focus' : ''}>${it.label}</dd>` }>${it.label}</dd>`
} }
} }
return html return html
@ -256,7 +250,6 @@ export default class Select {
placeholder: '', placeholder: '',
multi: '', multi: '',
value: '', value: '',
options: '',
mvidx: null, //下拉列表光标的索引ID mvidx: null, //下拉列表光标的索引ID
readonly: false, readonly: false,
disabled: false disabled: false
@ -475,14 +468,14 @@ export default class Select {
this.__INPUT__.setAttribute('placeholder', val) this.__INPUT__.setAttribute('placeholder', val)
break break
case 'options': // case 'options':
if (val) { // if (val) {
try { // try {
this._renderOptions(JSON.parse(val)) // this._renderOptions(JSON.parse(val))
} catch (err) {} // } catch (err) {}
this.removeAttribute('options') // this.removeAttribute('options')
} // }
break // break
case 'value': case 'value':
this.value = val this.value = val

View File

@ -9,13 +9,13 @@
<style lang="scss"> <style lang="scss">
:host { :host {
display: inline-block; display: inline-flex;
align-items: center;
section { section {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
// vertical-align: middle;
line-height: 1; line-height: 1;
white-space: nowrap; 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() { mounted() {
this._handleClick = $.bind(this, 'click', ev => { this._handleClick = $.bind(this, 'click', ev => {
if (this.disabled) { if (this.disabled) {
return return
} }
this.checked = !this.checked this.checked = !this.checked
if (this.checked) {
if (this.props['active-text'] !== null) { this._updateStat()
this.textContent = this.props['active-text']
}
} else {
if (this.props['inactive-text'] !== null) {
this.textContent = this.props['inactive-text']
}
}
this.dispatchEvent(new CustomEvent('input')) this.dispatchEvent(new CustomEvent('input'))
}) })
} }
@ -194,8 +199,8 @@ export default class Switch {
case 'active-text': case 'active-text':
case 'inactive-text': case 'inactive-text':
console.log('------------->>>')
this.props[name] = val + '' this.props[name] = val + ''
this._updateStat()
break break
} }
} }