BaseAnchor 裂缝弹出层

基于 GSAP 驱动渐变遮罩动画的弹出层 — 内容从 placement 方向通过柔和的渐变边缘滑入，带有加速→减速→回弹的物理效果。无透明度变化，纯空间遮罩揭示。

默认面板容器使用 TxCard 渲染，可通过 panelBackground / panelShadow / panelRadius / panelPadding 控制外观；也可以用 useCard=false 退回为纯内容包装层。

基础用法

BaseAnchor

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <TxBaseAnchor v-model="open" placement="bottom-start">
    <template #reference>
      <TxButton>点击</TxButton>
    </template>

    <div style="width: 220px; padding: 4px;">
      渐变遮罩动画弹出内容
    </div>
  </TxBaseAnchor>
</template>

渐变边缘

BaseAnchor 内置柔和遮罩边缘，并支持 show-arrow 让三角箭头跟随最终浮层方向与位置。

柔和边缘

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <TxBaseAnchor
    v-model="open"
    placement="bottom-start"
    :show-arrow="true"
  >
    <template #reference>
      <TxButton>柔和边缘</TxButton>
    </template>

    <div style="width: 240px; padding: 4px;">
      内容从柔和渐变边缘中浮现
    </div>
  </TxBaseAnchor>
</template>

方向

内容从 placement 方向进入和退出。例如 top 时，内容从上方下来，关闭时原路返回上方。

不同方向

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const open1 = ref(false)
const open2 = ref(false)
const open3 = ref(false)
const open4 = ref(false)
</script>

<template>
  <div style="display: flex; gap: 12px; flex-wrap: wrap; padding: 48px 0; justify-content: center;">
    <TxBaseAnchor v-model="open1" placement="bottom" :show-arrow="true">
      <template #reference>
        <TxButton>下方</TxButton>
      </template>
      <div style="width: 180px; padding: 4px;">bottom</div>
    </TxBaseAnchor>

    <TxBaseAnchor v-model="open2" placement="top" :show-arrow="true">
      <template #reference>
        <TxButton>上方</TxButton>
      </template>
      <div style="width: 180px; padding: 4px;">top</div>
    </TxBaseAnchor>

    <TxBaseAnchor v-model="open3" placement="left" :show-arrow="true">
      <template #reference>
        <TxButton>左侧</TxButton>
      </template>
      <div style="width: 180px; padding: 4px;">left</div>
    </TxBaseAnchor>

    <TxBaseAnchor v-model="open4" placement="right" :show-arrow="true">
      <template #reference>
        <TxButton>右侧</TxButton>
      </template>
      <div style="width: 180px; padding: 4px;">right</div>
    </TxBaseAnchor>
  </div>
</template>

自定义动画

通过 duration 和 ease 控制动画时长和 GSAP 缓动函数。

弹性缓动

示例即将加载...

<script setup lang="ts">
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <TxBaseAnchor
    v-model="open"
    placement="bottom-start"
    :duration="600"
    ease="elastic.out(1, 0.4)"
  >
    <template #reference>
      <TxButton>弹性</TxButton>
    </template>

    <div style="width: 240px; padding: 4px;">
      弹性缓动，时长 600ms
    </div>
  </TxBaseAnchor>
</template>

交互式 Playground

在一个面板里自由调整关键属性，重点观察 pure / mask / blur / glass / refraction 不同 surface 的材质表现，以及 auto / manual / off 三种运动适配策略。

Surface Playground

示例即将加载...

<template>
  <BaseAnchorSurfacePlaygroundDemo />
</template>

API

TxBaseAnchor Props

属性名	类型	默认值	说明
`modelValue`	`boolean`	`false`	是否打开（v-model）
`disabled`	`boolean`	`false`	禁用
`placement`	`BaseAnchorPlacement`	`'bottom-start'`	浮动定位方向
`offset`	`number`	`8`	与触发元素的间距 (px)
`width`	`number`	`0`	面板宽度（0 = 由内容宽度决定）
`minWidth`	`number`	`0`	最小宽度
`maxWidth`	`number`	`360`	最大宽度
`matchReferenceWidth`	`boolean`	`false`	`width=0` 时是否跟随 reference 宽度
`duration`	`number`	`432`	动画时长 (ms)
`ease`	`string`	`'back.out(2)'`	GSAP 缓动函数（打开动画）
`useCard`	`boolean`	`true`	是否使用内置 `TxCard` 包裹浮层内容
`panelBackground`	`'pure' \| 'mask' \| 'blur' \| 'glass' \| 'refraction'`	`'refraction'`	面板背景（TxCard background）
`panelShadow`	`'none' \| 'soft' \| 'medium'`	`'soft'`	面板阴影（TxCard shadow）
`panelRadius`	`number`	`18`	面板圆角（TxCard radius）
`panelPadding`	`number`	`10`	面板 padding（TxCard padding）
`panelCard`	`Partial<TxCardProps>`	`undefined`	透传 `TxCard` 高级参数（如 `maskOpacity`、`fallbackMaskOpacity`、`surfaceMoving`、`refraction*`）
`surfaceMotionAdaptation`	`'auto' \| 'manual' \| 'off'`	`'auto'`	浮层运动降级策略：`auto` 自动跟随 Anchor 动画，`manual` 使用 `panelCard.surfaceMoving`，`off` 关闭降级适配
`showArrow`	`boolean`	`false`	是否启用跟随浮层定位的三角箭头
`arrowSize`	`number`	`10`	箭头尺寸（px）
`closeOnClickOutside`	`boolean`	`true`	点击外部关闭
`closeOnEsc`	`boolean`	`true`	ESC 关闭
`toggleOnReferenceClick`	`boolean`	`true`	点击 reference 是否自动切换开关

Events

事件名	参数	说明
`open`	-	打开时触发
`close`	-	关闭时触发
`update:modelValue`	`boolean`	v-model 更新

Slots

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

暴露方法

方法名	参数	说明
`close`	-	编程式关闭
`toggle`	-	编程式切换

交互契约

modelValue 支持受控与非受控用法。点击 reference 会触发 update:modelValue，状态变化时同步触发 open 或 close。
disabled 会阻断打开；已打开的非受控 Anchor 在切换为 disabled 后会关闭。
closeOnClickOutside 与 closeOnEsc 分别控制外部指针事件和 Escape 关闭。
toggleOnReferenceClick=false 会阻断 reference 点击切换，适合输入框等自行处理点击行为的 reference。
class、style 与非 class attrs 会透传到浮层面板；reference 包装层样式使用 referenceClass。
surfaceMotionAdaptation 是真实策略：auto 使用 Anchor 内部运动态，manual 读取 panelCard.surfaceMoving，off 强制 surfaceMoving=false。