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">
:host {
display: inline-flex;
align-items: center;
line-height: 1;
font-size: 14px;
cursor: pointer;

View File

@ -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() {

View File

@ -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() {

View File

@ -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

View File

@ -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
}
}