开发预览更新于 2026-05-10

VariableAwareInput 变量感知输入

Input 增强版，自动识别 `{{var}}` 模板变量并高亮；未知变量标红波浪线。

基础用法

实现：底层是透明文字的原生 input + 同尺寸 overlay 渲染高亮文本，光标位置完全对齐。 variables 数组里的名字算”已知”用 accent 高亮，其他算”未知”用红色波浪线。

背景

已知变量：base_url · user_id · auth_token（其余高亮为红色波浪线）

<script setup lang="ts">
import { ref } from 'vue';
import { CfVariableAwareInput } from '@chufix-design/vue';
const value = ref('{{base_url}}/users/{{user_id}}/orders?token={{trace_id}}');
const known = ['base_url', 'user_id', 'auth_token'];
</script>

<template>
  <div style="max-width: 720px;">
    <CfVariableAwareInput v-model="value" :variables="known" placeholder="试试输入 {{base_url}}…" />
    <div style="margin-top: 8px; font-size: 12px; color: var(--fg-3);">
      已知变量：{{ known.join(' · ') }}（其余高亮为红色波浪线）
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfVariableAwareInput } from '@chufix-design/vue';
const value = ref('{{base_url}}/users/{{user_id}}/orders?token={{trace_id}}');
const known = ['base_url', 'user_id', 'auth_token'];
</script>

<template>
  <div style="max-width: 720px;">
    <CfVariableAwareInput v-model="value" :variables="known" placeholder="试试输入 {{base_url}}…" />
    <div style="margin-top: 8px; font-size: 12px; color: var(--fg-3);">
      已知变量：{{ known.join(' · ') }}（其余高亮为红色波浪线）
    </div>
  </div>
</template>

<CfVariableAwareInput value={url} onChange={setUrl} variables={['base_url', 'user_id']} />

<CfVariableAwareInput value={url} onChange={setUrl} variables={['base_url', 'user_id']} />

混合状态

已知（accent 高亮）+ 未知（红色波浪线）的组合实例。

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfVariableAwareInput } from '@chufix-design/vue';
const v1 = ref('valid only: {{base_url}} / {{user_id}}');
const v2 = ref('mixed: {{base_url}}/v1/{{token}}/users/{{user_id}}');
const v3 = ref('all unknown: {{a}} {{b}} {{c}}');
const known = ['base_url', 'user_id'];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 720px;">
    <CfVariableAwareInput v-model="v1" :variables="known" />
    <CfVariableAwareInput v-model="v2" :variables="known" />
    <CfVariableAwareInput v-model="v3" :variables="known" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfVariableAwareInput } from '@chufix-design/vue';
const v1 = ref('valid only: {{base_url}} / {{user_id}}');
const v2 = ref('mixed: {{base_url}}/v1/{{token}}/users/{{user_id}}');
const v3 = ref('all unknown: {{a}} {{b}} {{c}}');
const known = ['base_url', 'user_id'];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 720px;">
    <CfVariableAwareInput v-model="v1" :variables="known" />
    <CfVariableAwareInput v-model="v2" :variables="known" />
    <CfVariableAwareInput v-model="v3" :variables="known" />
  </div>
</template>

<CfVariableAwareInput value={v} onChange={setV} variables={known} />

<CfVariableAwareInput value={v} onChange={setV} variables={known} />

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	`''`	输入值
`variables`	`string[]`	`[]`	已知变量名清单
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`variant`	`'outline' \| 'filled'`	`'outline'`
`placeholder` / `disabled` / `error`

自动补全浮层（输入 {{ 触发候选列表）在 v2 加入。