X-Next

Appearance

Trigger 触发器 ​

Trigger 是底层浮层 primitive，主要给 x-next 内部组件和高级封装使用。普通业务展示浮动卡片时，请优先使用 Popover 气泡卡片。

Trigger 负责处理触发事件、显隐状态、浮层定位、Teleport、箭头、滚动更新和外部点击关闭。它不提供业务语义，也不提供卡片视觉规范。

何时使用 ​

  • 你正在封装新的浮层组件，例如 Tooltip、Dropdown、Popover、Popconfirm、SelectDropdown。
  • 你需要完全接管浮层内容结构和样式，不希望使用 Popover 的卡片语义。
  • 你需要直接控制底层定位行为，例如 alignPoint、popupContainer、updateAtScroll、scrollToClose。

不推荐使用 ​

  • 展示普通说明卡片：使用 Popover。
  • 展示纯文字提示：使用 Tooltip。
  • 展示操作菜单：使用 Dropdown。
  • 展示二次确认：使用 Popconfirm。

与 Popover 的区别 ​

维度PopoverTrigger
用户心智气泡卡片组件底层触发定位 primitive
是否主推给业务用户是否
是否有默认卡片样式有无
是否提供 title / content 语义有无
主要用途展示富内容浮层封装 Tooltip、Dropdown、Popover 等组件

基础封装示例 ​

下面示例展示 Trigger 作为底层能力的使用方式。业务代码通常不需要直接这样写。

vue
<template>
  <x-trigger trigger="click" show-arrow>
    <x-button>底层触发器</x-button>
    <template #content>
      <div class="custom-popup">完全自定义的浮层内容</div>
    </template>
  </x-trigger>
</template>

按需导入 ​

ts
import { Trigger } from 'x-next';

Props ​

参数说明类型默认值
popupVisible弹出框是否可见，支持 v-model:popup-visiblebooleanundefined
defaultPopupVisible默认是否可见，非受控模式booleanfalse
trigger触发方式'hover' | 'click' | 'focus' | 'contextMenu' | array'hover'
position弹出位置'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb''bottom'
disabled是否禁用booleanfalse
popupOffset弹出框偏移number0
popupTranslate弹出框移动距离[number, number] | object-
showArrow是否显示箭头booleanfalse
alignPoint是否跟随鼠标位置，常用于右键菜单booleanfalse
popupHoverStayhover 触发时移入浮层是否保持显示booleantrue
blurToClosefocus 触发时失焦是否关闭booleantrue
clickToClose点击触发器时是否允许关闭booleantrue
clickOutsideToClose点击外部是否关闭booleantrue
unmountOnClose关闭时是否卸载弹出框booleantrue
contentClass弹出内容类名string | array | object-
contentStyle弹出内容样式CSSProperties-
arrowClass箭头类名string | array | object-
arrowStyle箭头样式CSSProperties-
popupStyle弹出框定位节点样式CSSProperties-
animationName弹出动画名称string'x-fade-in'
duration动画持续时间number | { enter: number; leave: number }-
mouseEnterDelaymouseenter 延迟，单位毫秒number100
mouseLeaveDelaymouseleave 延迟，单位毫秒number100
focusDelayfocus 延迟，单位毫秒number0
autoFitPopupWidth是否将弹出框宽度设为触发器宽度booleanfalse
autoFitPopupMinWidth是否将弹出框最小宽度设为触发器宽度booleanfalse
autoFixPosition触发器尺寸变化时是否重新定位booleantrue
popupContainer弹出框挂载容器string | HTMLElement-
updateAtScroll容器滚动时是否更新浮层位置booleanfalse
autoFitTransformOrigin是否自动调整 transform-originbooleanfalse
hideEmpty内容为空时是否隐藏booleanfalse
openedClass打开时给触发元素添加的类名string | array | object-
autoFitPosition是否自动调整位置适配视口booleantrue
renderToBody是否挂载到 bodybooleantrue
preventFocus点击弹出层元素时是否阻止获取焦点booleanfalse
scrollToClose滚动时是否关闭booleanfalse
scrollToCloseDistance滚动关闭阈值number0

Events ​

事件名说明回调参数
update:popupVisible弹出框显隐变化时触发visible: boolean
popup-visible-change弹出框显隐变化时触发visible: boolean
show显示动画结束后触发-
hide隐藏动画结束后触发-
resize内部尺寸变化时触发-

Slots ​

插槽名说明
default触发元素
content弹出内容