style: 组件MsTreeSelect-未选择时hover不显示气泡

--bug=1049495 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001049495
This commit is contained in:
teukkk 2024-11-26 10:58:44 +08:00 committed by 刘瑞斌
parent 8834835aa1
commit 1034c0ee9e
1 changed files with 92 additions and 90 deletions

View File

@ -1,100 +1,102 @@
<template> <template>
<a-tooltip <div class="w-full">
:content="getTreeSelectTooltip()" <a-tooltip
:disabled="!(checkedKeys ?? []).length" :content="getTreeSelectTooltip()"
position="top" :disabled="!(checkedKeys ?? []).length"
content-class="tree-select-content" position="top"
:mouse-enter-delay="300" content-class="tree-select-content"
> :mouse-enter-delay="300"
<a-trigger
v-model:popup-visible="viewSelectOptionVisible"
:trigger="['click']"
:click-to-close="false"
:popup-translate="[0, 4]"
content-class="arco-trigger-menu tree-select-trigger-content"
:content-style="{ width: `${triggerWidth}px` }"
> >
<a-tree-select <a-trigger
ref="treeSelectRef" v-model:popup-visible="viewSelectOptionVisible"
v-model:model-value="checkedKeys" :trigger="['click']"
v-model:input-value="inputValue" :click-to-close="false"
:data="treeData" :popup-translate="[0, 4]"
:max-tag-count="maxTagCount" content-class="arco-trigger-menu tree-select-trigger-content"
:multiple="props.multiple" :content-style="{ width: `${triggerWidth}px` }"
allow-search
disable-filter
allow-clear
:tree-props="{
virtualListProps: virtualListProps,
}"
:field-names="props.fieldNames"
:placeholder="t('common.pleaseSelect')"
:trigger-props="{ contentClass: 'view-select-trigger' }"
@popup-visible-change="handlePopupVisibleChange"
@input-value-change="handleInputValueChange"
@change="handleChange"
@keyup="handleKeyup"
@clear="handleClear"
> >
<template #label="{ data: slotData }"> <a-tree-select
<div class="one-line-text">{{ slotData.label }}</div> ref="treeSelectRef"
</template> v-model:model-value="checkedKeys"
</a-tree-select> v-model:input-value="inputValue"
<template #content>
<MsTree
v-model:checked-keys="checkedKeys"
v-model:halfCheckedKeys="halfCheckedKeys"
v-model:focus-node-key="focusNodeKey"
:data="treeData" :data="treeData"
:selectable="false" :max-tag-count="maxTagCount"
:keyword="inputValue"
:empty-text="t('common.noData')"
:virtual-list-props="virtualListProps"
:field-names="props.fieldNames as MsTreeFieldNames"
:node-disabled-tip="t('project.environmental.http.nodeDisabledTip')"
default-expand-all
block-node
title-tooltip-position="tr"
:multiple="props.multiple" :multiple="props.multiple"
:checkable="props.treeCheckable" allow-search
:check-strictly="props.treeCheckStrictly" disable-filter
v-bind="$attrs" allow-clear
@check="handleCheck" :tree-props="{
virtualListProps: virtualListProps,
}"
:field-names="props.fieldNames"
:placeholder="t('common.pleaseSelect')"
:trigger-props="{ contentClass: 'view-select-trigger' }"
@popup-visible-change="handlePopupVisibleChange"
@input-value-change="handleInputValueChange"
@change="handleChange"
@keyup="handleKeyup"
@clear="handleClear"
> >
<template #title="nodeData"> <template #label="{ data: slotData }">
<div <div class="one-line-text">{{ slotData.label }}</div>
class="one-line-text w-full cursor-pointer text-[var(--color-text-1)]"
@click="handleCheck(checkedKeys, { checked: !checkedKeys.includes(nodeData.id), node: nodeData })"
>
{{ nodeData.name }}
</div>
</template> </template>
<template #extra="nodeData"> </a-tree-select>
<MsButton <template #content>
v-if="nodeData.children && nodeData.children.length && !nodeData.disabled" <MsTree
class="!mr-[8px]" v-model:checked-keys="checkedKeys"
@click="handleSelectCurrent(nodeData)" v-model:halfCheckedKeys="halfCheckedKeys"
> v-model:focus-node-key="focusNodeKey"
{{ :data="treeData"
checkedKeys.includes(nodeData.id) :selectable="false"
? t('ms.case.associate.cancelCurrent') :keyword="inputValue"
: t('ms.case.associate.selectCurrent') :empty-text="t('common.noData')"
}} :virtual-list-props="virtualListProps"
</MsButton> :field-names="props.fieldNames as MsTreeFieldNames"
<MoreMenuDropdown :node-disabled-tip="t('project.environmental.http.nodeDisabledTip')"
v-if="props.showContainChildModule && !nodeData.disabled && nodeData.id !== 'root'" default-expand-all
v-model:contain-child-module="nodeData.containChildModule" block-node
@handle-contain-child-module=" title-tooltip-position="tr"
(containChildModule) => handleContainChildModule(nodeData, containChildModule) :multiple="props.multiple"
" :checkable="props.treeCheckable"
@close="resetFocusNodeKey" :check-strictly="props.treeCheckStrictly"
@open="setFocusKey(nodeData)" v-bind="$attrs"
/> @check="handleCheck"
</template> >
</MsTree> <template #title="nodeData">
</template> <div
</a-trigger> class="one-line-text w-full cursor-pointer text-[var(--color-text-1)]"
</a-tooltip> @click="handleCheck(checkedKeys, { checked: !checkedKeys.includes(nodeData.id), node: nodeData })"
>
{{ nodeData.name }}
</div>
</template>
<template #extra="nodeData">
<MsButton
v-if="nodeData.children && nodeData.children.length && !nodeData.disabled"
class="!mr-[8px]"
@click="handleSelectCurrent(nodeData)"
>
{{
checkedKeys.includes(nodeData.id)
? t('ms.case.associate.cancelCurrent')
: t('ms.case.associate.selectCurrent')
}}
</MsButton>
<MoreMenuDropdown
v-if="props.showContainChildModule && !nodeData.disabled && nodeData.id !== 'root'"
v-model:contain-child-module="nodeData.containChildModule"
@handle-contain-child-module="
(containChildModule) => handleContainChildModule(nodeData, containChildModule)
"
@close="resetFocusNodeKey"
@open="setFocusKey(nodeData)"
/>
</template>
</MsTree>
</template>
</a-trigger>
</a-tooltip>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>