bd
/
ui
2
0
Fork 0
Code Issues Pull Requests Wiki Activity

优化star组件

master
yutent 2023-03-31 10:20:53 +08:00
parent 48c9b0d9bd
commit 9d013c9762
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/form/star.js
View File

@ -11,8 +11,6 @@ class Star extends Component {
static props = { static props = {
value: 0, value: 0,
text: [], text: [],
size: 'l',
colors: [],
'allow-half': false, 'allow-half': false,
'show-value': false, 'show-value': false,
disabled: false, disabled: false,
@ -32,7 +30,6 @@ class Star extends Component {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1; line-height: 1;
color: let(--color-grey-1);
cursor: inherit; cursor: inherit;
wc-icon { wc-icon {
@ -40,14 +37,17 @@ class Star extends Component {
transition: transform 0.15s linear, color 0.15s linear; transition: transform 0.15s linear, color 0.15s linear;
&[name='star'] { &[name='star'] {
color: let(--color-plain-3); color: var(--color-plain-3);
} }
@for $i from 1 through 5 {
&:nth-child(#{$i}) {
&[name='star-full'], &[name='star-full'],
&[name='star-half'] { &[name='star-half'] {
color: let(--color-teal-1); color: var(--star-active-#{$i}, var(--color-teal-1));
}
}
} }
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
} }
@ -56,6 +56,7 @@ class Star extends Component {
span { span {
padding: 2px 8px 0; padding: 2px 8px 0;
margin: 0 6px; margin: 0 6px;
color: var(--color-dark-1);
} }
} }
`, `,
@ -99,8 +100,7 @@ class Star extends Component {
* f: float * f: float
*/ */
#updateDraw(i, f = 0) { #updateDraw(i, f = 0) {
let _last = 'star-half' let lastOne = 'star-half'
let value = this.value let value = this.value
let tmp = this.#value let tmp = this.#value
@ -118,23 +118,21 @@ class Star extends Component {
if (!this['allow-half']) { if (!this['allow-half']) {
f = f > 0 ? 1 : 0 f = f > 0 ? 1 : 0
} }
// 减少DOM操作 // 数值没变化, 直接终止
if (i === tmp.i && f === tmp.f) { if (i === tmp.i && f === tmp.f) {
return return
} }
if (f > 0.5) { if (f > 0.5) {
_last = 'star-full' lastOne = 'star-full'
} }
this.#stars.forEach((it, k) => { this.#stars.forEach((it, k) => {
it.name = k < i ? 'star-full' : 'star' it.name = k < i ? 'star-full' : 'star'
it.style.color = k < i ? this.color || 'var(--color-teal-1)' : ''
}) })
if (f > 0) { if (f > 0) {
this.#stars[i].name = _last this.#stars[i].name = lastOne
this.#stars[i].style.color = this.color || 'var(--color-teal-1)'
} }
// 缓存结果 // 缓存结果
@ -183,6 +181,12 @@ class Star extends Component {
} }
render() { render() {
let val = this.value
if (this.text.length === 5) {
val = this.text[Math.ceil(val) - 1]
} else {
val = val || ''
}
return html` return html`
<label <label
ref="box" ref="box"
@ -195,7 +199,7 @@ class Star extends Component {
<wc-icon data-idx="2" name="star"></wc-icon> <wc-icon data-idx="2" name="star"></wc-icon>
<wc-icon data-idx="3" name="star"></wc-icon> <wc-icon data-idx="3" name="star"></wc-icon>
<wc-icon data-idx="4" name="star"></wc-icon> <wc-icon data-idx="4" name="star"></wc-icon>
<span class="text">${this['show-value'] ? this.value : ''}</span> <span class="text">${this['show-value'] ? val : ''}</span>
</label> </label>
` `
} }