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
宇天 2021-03-11 20:02:35 +08:00
parent 2f95f4f8b3
commit 2616885a97
2 changed files with 52 additions and 73 deletions

View File

@ -1,35 +1,41 @@
<template> <template>
<label> <label>
<wc-icon data-idx="0" is="star" color="grey"></wc-icon> <wc-icon data-idx="0" is="star"></wc-icon>
<wc-icon data-idx="1" is="star" color="grey"></wc-icon> <wc-icon data-idx="1" is="star"></wc-icon>
<wc-icon data-idx="2" is="star" color="grey"></wc-icon> <wc-icon data-idx="2" is="star"></wc-icon>
<wc-icon data-idx="3" is="star" color="grey"></wc-icon> <wc-icon data-idx="3" is="star"></wc-icon>
<wc-icon data-idx="4" is="star" color="grey"></wc-icon> <wc-icon data-idx="4" is="star"></wc-icon>
<span class="text"></span> <span class="text">5分</span>
</label> </label>
</template> </template>
<style lang="scss"> <style lang="scss">
:host { :host {
display: flex; display: flex;
-webkit-touch-callout: none; font-size: 18px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
cursor: pointer; cursor: pointer;
font-size: 14px; --size: 36px;
--size: 24px;
} }
label { label {
display: flex; display: flex;
align-items: center; align-items: center;
line-height: 1; line-height: 1;
color: var(--color-grey-1);
cursor: inherit; cursor: inherit;
wc-icon { wc-icon {
margin: 0 3px; margin: 0 3px;
transition: transform 0.1s easein-out; transition: transform 0.15s linear, color 0.15s linear;
&[is='star'] {
color: var(--default-color, inherit);
}
&[is='star-full'],
&[is='star-half'] {
color: var(--color-teal-1);
}
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
@ -37,43 +43,26 @@ label {
} }
span { span {
padding: 0 8px; padding: 2px 8px 0;
margin: 0 3px; margin: 0 6px;
} }
} }
:host([size='large']) { :host([size='large']) {
font-size: 16px; font-size: 26px;
--size: 36px; --size: 52px;
} }
:host([size='medium']) { :host([size='medium']) {
--size: 30px; font-size: 22px;
--size: 44px;
}
:host([size='small']) {
font-size: 16px;
--size: 32px;
} }
:host([size='mini']) { :host([size='mini']) {
font-size: 12px; font-size: 14px;
--size: 20px; --size: 26px;
}
:host([type='danger']) label span {
color: var(--color-red-1);
}
:host([type='primary']) label span {
color: var(--color-teal-1);
}
:host([type='success']) label span {
color: var(--color-green-1);
}
:host([type='default']) label span {
color: var(--color-grey-1);
}
:host([type='info']) label span {
color: var(--color-blue-1);
}
:host([color='purple']) label span {
color: var(--color-purple-1);
}
:host([type='warning']) label span {
color: var(--color-orange-1);
} }
:host([disabled]) { :host([disabled]) {
@ -94,7 +83,8 @@ export default class Star {
value: 0, value: 0,
text: [], text: [],
size: '', size: '',
color: '', 'default-color': null,
colors: '',
'allow-half': false, 'allow-half': false,
'show-value': false, 'show-value': false,
starSize: 32, // 星星的宽度, 用于实现半星 starSize: 32, // 星星的宽度, 用于实现半星
@ -227,9 +217,18 @@ export default class Star {
this.props[name] = true this.props[name] = true
break break
case 'color': case 'default-color':
if (val) { if (val) {
this.props.color = val this.__BOX__.style.cssText += `--default-color:${val}`
} else {
this.__BOX__.style = ''
}
break
case 'colors':
if (val === null) {
this.props.colors = ['#48c9b0']
} else {
this.props.colors = val.split(',').map(s => s.trim())
} }
break break

View File

@ -5,8 +5,8 @@
<style lang="scss"> <style lang="scss">
:host { :host {
display: inline-flex; display: inline-flex;
width: var(--size, 32px); width: var(--size, 36px);
height: var(--size, 32px); height: var(--size, 36px);
color: inherit; color: inherit;
} }
:host(:not([is])) { :host(:not([is])) {
@ -31,38 +31,18 @@
height: 52px; height: 52px;
} }
:host([size='medium']) { :host([size='medium']) {
width: 36px; width: 44px;
height: 36px; height: 44px;
}
:host([size='small']) {
width: 32px;
height: 32px;
} }
:host([size='mini']) { :host([size='mini']) {
width: 26px; width: 26px;
height: 26px; height: 26px;
} }
:host([red]) {
color: var(--color-red-1);
}
:host([blue]) {
color: var(--color-blue-1);
}
:host([green]) {
color: var(--color-green-1);
}
:host([orange]) {
color: var(--color-orange-1);
}
:host([grey]) {
color: var(--color-grey-1);
}
:host([dark]) {
color: var(--color-dark-1);
}
@keyframes circle { @keyframes circle {
0% { 0% {
stroke-dasharray: 0, 3812px; stroke-dasharray: 0, 3812px;