style: 组件MsTreeSelect-未选择时hover不显示气泡
--bug=1049495 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001049495
This commit is contained in:
parent
8834835aa1
commit
1034c0ee9e
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue