Skip to content

Commit 85e6737

Browse files
kagolkagol
committed
fix(base-select): fix data display error when set disabled and hover-expand
1 parent 808af1f commit 85e6737

File tree

4 files changed

+106
-50
lines changed

4 files changed

+106
-50
lines changed

‎packages/renderless/src/base-select/index.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1971,6 +1971,23 @@ export const watchShowClose =
19711971
}
19721972

19731973
// 以下为tiny 新增功能
1974+
/**
1975+
* 兼容不同主题多选禁用的展示类型
1976+
* default 和 smb 主题，displayOnly 时显示为 tagText,否则为 tag
1977+
* aurora 主题 displayOnly||disabled 时显示为tagText,否则为 tag
1978+
*/
1979+
export const computedShowTagText =
1980+
({ state }) =>
1981+
() =>
1982+
state.isDisplayOnly
1983+
1984+
/**
1985+
* 兼容不同主题多选，tag 在disabled 和 required 时是否显示关闭按钮的区别
1986+
* default 主题 ，禁用显示关闭按钮，required目前和aurora保持一致不显示，待设计图补充时更新
1987+
* aurora 主题，禁用时无禁用效果，required 时不显示关闭按钮
1988+
*/
1989+
export const isTagClosable = () => (item) => !item.required
1990+
19741991
export const computedGetIcon =
19751992
({ designConfig, props }) =>
19761993
() => {

‎packages/renderless/src/base-select/vue.ts‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,9 @@ import {
9797
onClickCollapseTag,
9898
computedIsExpand,
9999
updateSelectedData,
100-
hidePanel
100+
hidePanel,
101+
computedShowTagText,
102+
isTagClosable
101103
} from './index'
102104
import debounce from '../common/deps/debounce'
103105
import { isNumber } from '../common/type'
@@ -154,7 +156,9 @@ export const api = [
154156
'clearSearchText',
155157
'onClickCollapseTag',
156158
'updateSelectedData',
157-
'hidePanel'
159+
'hidePanel',
160+
'computedShowTagText',
161+
'isTagClosable'
158162
]
159163

160164
const initState = ({ reactive, computed, props, api, emitter, parent, constants, useBreakpoint, vm, designConfig }) => {
@@ -271,6 +275,8 @@ const initStateAdd = ({ computed, props, api, parent }) => {
271275
formItemSize: computed(() => (parent.formItem || { state: {} }).state.formItemSize),
272276
selectDisabled: computed(() => api.computedSelectDisabled()),
273277
isDisplayOnly: computed(() => props.displayOnly || (parent.form || {}).displayOnly),
278+
isDisabled: computed(() => props.disabled || (parent.form || {}).disabled),
279+
isShowTagText: computed(() => api.computedShowTagText()),
274280
gridCheckedData: computed(() => api.getcheckedData()),
275281
searchSingleCopy: computed(() => props.allowCopy && !props.multiple && props.filterable),
276282
childrenName: computed(() => 'children'),
@@ -364,6 +370,8 @@ const initApi = ({
364370
computedGetTagType: computedGetTagType({ designConfig, props }),
365371
clearSearchText: clearSearchText({ state, api }),
366372
clearNoMatchValue: clearNoMatchValue({ props, emit }),
373+
computedShowTagText: computedShowTagText({ state }),
374+
isTagClosable: isTagClosable(),
367375
updateSelectedData: updateSelectedData({ state }),
368376
hidePanel: hidePanel({ state })
369377
})

‎packages/vue/src/base-select/src/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -344,6 +344,10 @@ export default defineComponent({
344344
allText: {
345345
type: String,
346346
default: ''
347+
},
348+
showAllTextTag: {
349+
type: Boolean,
350+
default: false
347351
}
348352
},
349353
setup(props, context) {

‎packages/vue/src/base-select/src/pc.vue‎

Lines changed: 75 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,15 @@
7070
</tiny-filter-box>
7171
<div
7272
ref="tags"
73-
:class="['tiny-base-select__tags', { 'is-showicon': slots.prefix, 'not-selected': !state.selected.length }]"
73+
:class="[
74+
'tiny-base-select__tags',
75+
{ 'is-showicon': slots.prefix, 'not-selected': !state.selected.length },
76+
{ 'is-show-tag': !state.isShowTagText }
77+
]"
7478
v-if="multiple && !state.isDisplayOnly && !shape"
7579
:style="state.tagsStyle"
7680
>
77-
<span v-if="!state.selectDisabled">
81+
<span v-if="!state.isShowTagText">
7882
<span v-if="collapseTags && state.selected.length">
7983
<tiny-tag
8084
:closable="!state.selectDisabled"
@@ -119,66 +123,88 @@
119123
<span class="tiny-base-select__tags-text">+ {{ state.selected.length - 1 }}</span>
120124
</tiny-tag>
121125
</span>
126+
<!-- 显示所有标签的循环 -->
122127
<span ref="tags-content" v-if="!collapseTags">
128+
<!-- 当 showAllTextTag 时， 用all-text属性做为tag。 xdesign规范 -->
123129
<tiny-tag
124-
v-if="hoverExpand || clickExpand"
125-
:class="['tiny-base-select__tags-collapse', { 'is-hidden': state.isHidden }]"
130+
v-if="showAllTextTag && state.selectCls === 'checked-sur'"
126131
:type="state.getTagType"
127-
key="tags-collapse"
128-
data-tag="tags-collapse"
129-
:closable="false"
132+
key="tags-all-text-tag"
133+
data-tag="tags-all-text-tag"
134+
:disabled="state.isDisabled"
135+
:closable="true"
130136
:size="state.collapseTagSize"
131-
@click="onClickCollapseTag($event)"
137+
@close="toggleCheckAll(false)"
132138
>
133-
<template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
134-
<icon-ellipsis v-else></icon-ellipsis>
139+
{{ allText || t('ui.base.all') }}
135140
</tiny-tag>
136-
<tiny-tag
137-
v-for="(item, index) in state.selected"
138-
:key="getValueKey(item)"
139-
:class="{ 'not-visible': state.toHideIndex <= index && !state.isExpand }"
140-
:closable="!item.disabled && !item.required"
141-
:size="state.collapseTagSize"
142-
:hit="item.state ? item.state.hitState : item.hitState"
143-
:type="state.getTagType"
144-
@close="deleteTag($event, item)"
145-
disable-transitions
146-
>
147-
<tiny-tooltip
148-
effect="light"
149-
placement="top"
150-
@mouseenter.native="handleEnterTag($event, getValueKey(item))"
141+
<!-- 当非 showAllTextTag 时，原来的模式渲染 -->
142+
<template v-else>
143+
<tiny-tag
144+
v-if="hoverExpand || clickExpand"
145+
:class="['tiny-base-select__tags-collapse', { 'is-hidden': state.isHidden || state.isDisabled }]"
146+
:type="state.getTagType"
147+
key="tags-collapse"
148+
data-tag="tags-collapse"
149+
only-icon
150+
:closable="false"
151+
:size="state.collapseTagSize"
152+
@click="onClickCollapseTag($event)"
151153
>
152-
<span v-if="!state.visible && state.overflow === index" class="tiny-base-select__tags-text">
153-
{{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
154-
</span>
155-
<span v-else class="tiny-base-select__tags-text">
156-
<slot name="label" :item="getLabelSlotValue(item)">
157-
{{ item.state ? item.state.currentLabel : item.currentLabel }}
158-
</slot>
159-
</span>
160-
<template v-if="state.tooltipContent[getValueKey(item)]" #content>
161-
<span v-if="!state.visible && state.overflow === index">
154+
<template v-if="hoverExpand"> + {{ state.collapseTagsLength }} </template>
155+
<icon-ellipsis v-else></icon-ellipsis>
156+
</tiny-tag>
157+
<tiny-tag
158+
v-for="(item, index) in state.selected"
159+
:key="getValueKey(item)"
160+
:class="{
161+
'not-visible': state.toHideIndex <= index && !state.isExpand,
162+
'is-required': item.required
163+
}"
164+
:closable="isTagClosable(item)"
165+
:disabled="state.isDisabled || item.disabled"
166+
:size="state.collapseTagSize"
167+
:hit="item.state ? item.state.hitState : item.hitState"
168+
:type="state.getTagType"
169+
@close="deleteTag($event, item)"
170+
disable-transitions
171+
>
172+
<tiny-tooltip
173+
effect="light"
174+
placement="top"
175+
@mouseenter.native="handleEnterTag($event, getValueKey(item))"
176+
>
177+
<span v-if="!state.visible && state.overflow === index" class="tiny-base-select__tags-text">
162178
{{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
163179
</span>
164-
<span v-else>
180+
<span v-else class="tiny-base-select__tags-text">
165181
<slot name="label" :item="getLabelSlotValue(item)">
166182
{{ item.state ? item.state.currentLabel : item.currentLabel }}
167183
</slot>
168184
</span>
169-
</template>
170-
</tiny-tooltip>
171-
</tiny-tag>
185+
<template v-if="state.tooltipContent[getValueKey(item)]" #content>
186+
<span v-if="!state.visible && state.overflow === index">
187+
{{ item.state ? item.state.currentLabel + '... ' : item.currentLabel + '... ' }}
188+
</span>
189+
<span v-else>
190+
<slot name="label" :item="getLabelSlotValue(item)">
191+
{{ item.state ? item.state.currentLabel : item.currentLabel }}
192+
</slot>
193+
</span>
194+
</template>
195+
</tiny-tooltip>
196+
</tiny-tag>
172197

173-
<!-- 收起按钮 -->
174-
<span
175-
v-if="clickExpand && state.showCollapseTag"
176-
class="tiny-base-select__collapse-text"
177-
@click="onClickCollapseTag($event)"
178-
>
179-
{{ t('ui.select.collapse') }}
180-
<icon-chevron-up></icon-chevron-up>
181-
</span>
198+
<!-- 收起按钮 -->
199+
<span
200+
v-if="clickExpand && state.showCollapseTag"
201+
class="tiny-base-select__collapse-text"
202+
@click="onClickCollapseTag($event)"
203+
>
204+
{{ t('ui.select.collapse') }}
205+
<icon-chevron-up></icon-chevron-up>
206+
</span>
207+
</template>
182208
</span>
183209
</span>
184210

@@ -694,6 +720,7 @@ export default defineComponent({
694720
'showProportion',
695721
'clickExpand',
696722
'maxVisibleRows',
723+
'showAllTextTag',
697724
'allText'
698725
],
699726
setup(props, context) {

0 commit comments

Comments
 (0)