SnapInput

受控输入框，仅在 blur 时触发 change 事件，Enter / Escape 键触发 blur，并阻止点击冒泡。适合表格内联编辑、可编辑标题等场景——避免用户在输入过程中触发频繁的网络请求或父级点击。

基本用法

blur 时提交

在下方输入框中修改文字,点击空白处或按 Enter 后,上方文本才会更新。

当前值:Untitled task

<script setup lang="ts">
import { SnapInput } from '@tripo3d/design';
import { ref } from 'vue';

const value = ref('Untitled task');

function onChange(next: string) {
  value.value = next;
}
</script>

<template>
  <SnapInput :value="value" @change="onChange" />
</template>

适用场景：表格内联编辑

SnapInput 阻止了点击事件冒泡，并在 Enter / Escape 时自动 blur，因此放在可点击行内不会触发行级交互：

<script setup lang="ts">
import { SnapInput } from '@tripo3d/design';

function updateName(id: string, value: string) {
  // 只在 blur 时调用一次
  api.updateRow(id, { name: value });
}
</script>

<template>
  <tr @click="selectRow(row.id)">
    <td>
      <SnapInput
        class="w-full bg-transparent"
        :value="row.name"
        @change="(val) => updateName(row.id, val)"
      />
    </td>
  </tr>
</template>

API

Props

名称	类型	默认值	说明
value	string	—	受控值（必填）

透传所有原生 <input> 的 attribute（type、disabled、placeholder、class 等）。

Events

事件	Payload	说明
change	(value: string)	仅在 blur 时触发一次，参数为当前输入值

可访问性

• Enter / Escape 键触发原生 blur，无需额外鼠标操作即可提交
• 点击事件已被阻止冒泡，适合嵌入在可点击的行 / 卡片中
• 渲染为原生 <input>，焦点顺序、屏幕阅读器行为保持一致