From 48c9b0d9bdecd93a39191df1a168ca63fbf46cec Mon Sep 17 00:00:00 2001 From: yutent Date: Thu, 30 Mar 2023 19:04:30 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=AF=84=E5=88=86=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Readme.md | 2 +- src/form/button.js | 5 -- src/form/star.js | 204 +++++++++++++++++++++++++++++++++++++++++++++ src/icon/index.js | 3 +- 开发规范.md | 5 +- 5 files changed, 208 insertions(+), 11 deletions(-) create mode 100644 src/form/star.js diff --git a/Readme.md b/Readme.md index 67c5b45..bc23dcd 100644 --- a/Readme.md +++ b/Readme.md @@ -30,7 +30,7 @@ - [x] `wc-passwd`表单组件-文本输入框 - [x] `wc-textarea`表单组件-多行文本输入框 - [x] `wc-number`表单组件-步进数字输入 -- [ ] `wc-star`表单组件-评分 +- [x] `wc-star`表单组件-评分 - [x] `wc-radio`表单组件-单选框 - [ ] `wc-select`表单组件-下拉选择 - [ ] `wc-cascadar`表单组件-多级联动 diff --git a/src/form/button.js b/src/form/button.js index e2dd437..89f5b2d 100644 --- a/src/form/button.js +++ b/src/form/button.js @@ -111,11 +111,6 @@ class Button extends Component { w: 192px, h: 52px, f: 16px - ), - xxxxl: ( - w: 212px, - h: 64px, - f: 18px ) ); diff --git a/src/form/star.js b/src/form/star.js new file mode 100644 index 0000000..e5c3372 --- /dev/null +++ b/src/form/star.js @@ -0,0 +1,204 @@ +/** + * {} + * @author yutent + * @date 2023/03/21 16:14:10 + */ + +import { nextTick, css, html, Component, classMap } from '@bd/core' +import '../icon/index.js' + +class Star extends Component { + static props = { + value: 0, + text: [], + size: 'l', + colors: [], + 'allow-half': false, + 'show-value': false, + disabled: false, + clearable: false + } + + static styles = [ + css` + :host { + display: flex; + font-size: 14px; + --size: 32px; + cursor: pointer; + user-select: none; + } + label { + display: flex; + align-items: center; + line-height: 1; + color: let(--color-grey-1); + cursor: inherit; + + wc-icon { + margin: 0 3px; + transition: transform 0.15s linear, color 0.15s linear; + + &[name='star'] { + color: let(--color-plain-3); + } + + &[name='star-full'], + &[name='star-half'] { + color: let(--color-teal-1); + } + + &:hover { + transform: scale(1.05); + } + } + + span { + padding: 2px 8px 0; + margin: 0 6px; + } + } + `, + // 尺寸 + css` + @use 'sass:map'; + $sizes: ( + s: ( + w: 52px, + h: 20px, + f: 12px + ), + m: ( + w: 72px, + h: 24px, + f: 12px + ), + l: ( + w: 108px, + h: 32px, + f: 14px + ) + ); + + @loop $s, $v in $sizes { + :host([size='#{$s}']) { + --size: #{map.get($v, 'h')}; + font-size: map.get($v, 'f'); + } + } + ` + ] + + #width = 32 + #value = { i: 0, f: 0 } + #stars = [] + + /** + * 更新图标渲染 + * i: int + * f: float + */ + #updateDraw(i, f = 0) { + let _last = 'star-half' + + let value = this.value + let tmp = this.#value + + if (i === -1) { + i = Math.floor(value) + f = +(value % 1).toFixed(1) + if (i > 0 && i === value) { + i-- + f = 1 + } + } else { + f = f < 0.5 ? 0.5 : 1 + } + + if (!this['allow-half']) { + f = f > 0 ? 1 : 0 + } + // 减少DOM操作 + if (i === tmp.i && f === tmp.f) { + return + } + + if (f > 0.5) { + _last = 'star-full' + } + + this.#stars.forEach((it, k) => { + it.name = k < i ? 'star-full' : 'star' + it.style.color = k < i ? this.color || 'var(--color-teal-1)' : '' + }) + + if (f > 0) { + this.#stars[i].name = _last + this.#stars[i].style.color = this.color || 'var(--color-teal-1)' + } + + // 缓存结果 + this.#value = { i, f } + } + + handleMove(ev) { + if (this.disabled) { + return + } + + if (ev.target.tagName === 'WC-ICON') { + let idx = +ev.target.dataset.idx + this.#updateDraw(idx, +(ev.offsetX / this.#width).toFixed(1)) + } + } + + handleLeave() { + if (this.disabled) { + return + } + this.#updateDraw(-1) + } + + handleClick(ev) { + let tmp = this.#value + if (this.disabled) { + return + } + if (ev.target.tagName === 'WC-ICON') { + if (this.clearable && this.value === tmp.i + tmp.f) { + tmp.i = 0 + tmp.f = 0 + this.value = 0 + this.#stars.forEach(it => ((it.name = 'star'), (it.style.color = ''))) + } else { + this.value = tmp.i + tmp.f + } + this.$emit('change', { value: this.value }) + } + } + + mounted() { + this.#stars = [...this.$refs.box.children] + this.#width = this.#stars[0].clientWidth + } + + render() { + return html` + + ` + } +} + +Star.reg('star') diff --git a/src/icon/index.js b/src/icon/index.js index c7df197..f4d5e52 100644 --- a/src/icon/index.js +++ b/src/icon/index.js @@ -57,8 +57,7 @@ class Icon extends Component { 'l': 32px, 'xl': 36px, 'xxl': 44px, - 'xxxl': 52px, - 'xxxxl': 64px + 'xxxl': 52px ); @loop $k, $v in $gaps { diff --git a/开发规范.md b/开发规范.md index 963c1a2..6f543ca 100644 --- a/开发规范.md +++ b/开发规范.md @@ -13,15 +13,14 @@ - `type=help` 灰色 3. 尺寸, 主要指 高度 - > 需要注意的是, 这里的高度, 仅为组件本身应该占的高度, 而非"可视内容"的真实高度, 比如 开头按钮, 实际上就可以不需要那么大。 + > 需要注意的是, 这里的高度, 仅为组件本身应该占的高度, 而非"可视内容"的真实高度, 比如 开关按钮, 实际上就可以不需要那么大。 - `size=s` 小号, 20px - `size=m` 中号, 24px - `size=l` 大号, 32px (默认值) - `size=xl` 加大号, 36px - `size=xxl` 加加大号, 44px - - `size=xxxl` 加加加加大号, 52px - - `size=xxxxl` 特大号, 64px + - `size=xxxl` 加加加大号, 52px 4. 自带点击事件的组件, 统一增加"节流/防抖"逻辑 > 统一为增加 `lazy="1000"` 属性实现 \ No newline at end of file