From ee660ca04e324a714e1a5dc32e4741a4172c2da4 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 25 Dec 2024 15:00:16 +0800 Subject: [PATCH 1/2] feat(TreeSelect): enrich external classes --- src/tree-select/README.en-US.md | 12 ++++++++++ src/tree-select/README.md | 12 ++++++++++ src/tree-select/tree-select.ts | 38 +++++++++++++++++++++++--------- src/tree-select/tree-select.wxml | 8 +++---- 4 files changed, 55 insertions(+), 15 deletions(-) diff --git a/src/tree-select/README.en-US.md b/src/tree-select/README.en-US.md index 209d797fc..bceb50cf4 100644 --- a/src/tree-select/README.en-US.md +++ b/src/tree-select/README.en-US.md @@ -21,6 +21,18 @@ name | params | description -- | -- | -- change | `(value: TreeSelectValue, level: TreeLevel) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。
`type TreeLevel = 0 \| 1 \| 2`
+### TreeSelect External Classes + +className | Description +-- | -- +t-class | \- +t-class-left-column | \- +t-class-left-item | \- +t-class-middle-item | \- +t-class-right-column | \- +t-class-right-item | \- +t-class-right-item-label | \- + ### CSS Variables The component provides the following CSS variables, which can be used to customize styles. diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 3564fbfc4..94e7af190 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -67,6 +67,18 @@ default-value | String / Number / Array | undefined | 选中值。非受控属 -- | -- | -- change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。
`type TreeLevel = 0 \| 1 \| 2`
+### TreeSelect External Classes + +类名 | 描述 +-- | -- +t-class | 根节点样式类 +t-class-left-column | 左侧第一列样式类 +t-class-left-item | 左侧第一列子项样式类 +t-class-middle-item | 中间列子项样式类 +t-class-right-column | 右侧第一列样式类 +t-class-right-item | 右侧第一列子项样式类 +t-class-right-item-label | 右侧第一列子项标签样式类 + ### CSS Variables 组件提供了下列 CSS 变量，可用于自定义样式。 diff --git a/src/tree-select/tree-select.ts b/src/tree-select/tree-select.ts index ec4a7543b..e50fee01c 100644 --- a/src/tree-select/tree-select.ts +++ b/src/tree-select/tree-select.ts @@ -9,7 +9,15 @@ const name = `${prefix}-tree-select`; @wxComponent() export default class TreeSelect extends SuperComponent { - externalClasses = [`${prefix}-class`]; + externalClasses = [ + `${prefix}-class`, + `${prefix}-class-left-column`, + `${prefix}-class-left-item`, + `${prefix}-class-middle-item`, + `${prefix}-class-right-column`, + `${prefix}-class-right-item`, + `${prefix}-class-right-item-label`, + ]; options = { multipleSlots: true, @@ -46,10 +54,12 @@ export default class TreeSelect extends SuperComponent { buildTreeOptions() { const { options, value, multiple, keys } = this.data; const treeOptions = []; + const innerValue = []; + let level = -1; let node = { children: options }; - if (options.length === 0 || (Array.isArray(value) && value.length === 0)) return; + if (options.length === 0) return; while (node && node.children) { level += 1; @@ -73,6 +83,11 @@ export default class TreeSelect extends SuperComponent { const leafLevel = Math.max(0, level); + treeOptions?.forEach((ele, idx) => { + const v = idx === treeOptions.length - 1 && multiple ? [ele[0].value] : ele[0].value; + innerValue.push(value?.[idx] || v); + }); + if (multiple) { const finalValue = this.data.value || this.data.defaultValue; if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) { @@ -81,6 +96,7 @@ export default class TreeSelect extends SuperComponent { } this.setData({ + innerValue, leafLevel, treeOptions, }); @@ -106,33 +122,33 @@ export default class TreeSelect extends SuperComponent { }, onRootChange(e) { - const { value } = this.data; + const { innerValue } = this.data; const { value: itemValue } = e.detail; this.getScrollIntoView('none'); - value[0] = itemValue; + innerValue[0] = itemValue; - this._trigger('change', { value, level: 0 }); + this._trigger('change', { value: innerValue, level: 0 }); }, handleTreeClick(e) { const { level, value: itemValue } = e.currentTarget.dataset; - const { value } = this.data; + const { innerValue } = this.data; - value[level] = itemValue; + innerValue[level] = itemValue; this.getScrollIntoView('none'); - this._trigger('change', { value, level: 1 }); + this._trigger('change', { value: innerValue, level: 1 }); }, handleRadioChange(e) { - const { value } = this.data; + const { innerValue } = this.data; const { value: itemValue } = e.detail; const { level } = e.target.dataset; - value[level] = itemValue; + innerValue[level] = itemValue; this.getScrollIntoView('none'); - this._trigger('change', { value, level }); + this._trigger('change', { value: innerValue, level }); }, }; } diff --git a/src/tree-select/tree-select.wxml b/src/tree-select/tree-select.wxml index 271835519..074ec7cda 100644 --- a/src/tree-select/tree-select.wxml +++ b/src/tree-select/tree-select.wxml @@ -11,7 +11,7 @@ > @@ -32,7 +32,7 @@ bind:tap="handleTreeClick" data-level="{{level}}" data-value="{{item.value}}" - class="{{_.cls(classPrefix + '__item', [['active', item.value === value[level]]])}} {{prefix}}-class-middle-item scroll-into-view " + class="{{_.cls(classPrefix + '__item', [['active', item.value === innerValue[level]]])}} {{prefix}}-class-middle-item scroll-into-view" > {{item.label}} @@ -41,7 +41,7 @@ wx:elif="{{!multiple}}" class="{{classPrefix}}__radio {{prefix}}-class-right-column" data-level="{{level}}" - value="{{value[level]}}" + value="{{innerValue[level]}}" bind:change="handleRadioChange" > From 25c84bba24d3e746609e2d27f1a556d5e79fe85c Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 25 Dec 2024 15:00:54 +0800 Subject: [PATCH 2/2] chore(SideBar): hide scroll bar style --- src/side-bar/side-bar.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/side-bar/side-bar.less b/src/side-bar/side-bar.less index b050b002c..6e5c091bd 100644 --- a/src/side-bar/side-bar.less +++ b/src/side-bar/side-bar.less @@ -11,6 +11,10 @@ height: @side-bar-height; overflow-y: auto; + &::-webkit-scrollbar { + display: none; + } + &__padding { flex: 1; background-color: @side-bar-bg-color;