InputGroup 输入组合
把多个 Input / Button / Select / 静态标签拼到一起，共用一组外圆角和边框。
基础用法
InputGroup 是一个纯样式包裹层。把表单控件按顺序放入，相邻的内圆角会被自动去掉，第一个 / 最后一个元素继承外圆角。静态标签用 <span class="cf-input-group__addon"> 渲染。
背景
@
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';
const search = ref('');
</script>
<template>
<CfInputGroup>
<span class="cf-input-group__addon">@</span>
<CfInput v-model="search" placeholder="username" />
</CfInputGroup>
</template><script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';
const search = ref('');
</script>
<template>
<CfInputGroup>
<span class="cf-input-group__addon">@</span>
<CfInput v-model="search" placeholder="username" />
</CfInputGroup>
</template><CfInputGroup>
<span className="cf-input-group__addon">@</span>
<CfInput value={search} onChange={(e) => setSearch(e.target.value)} placeholder="username" />
</CfInputGroup><CfInputGroup>
<span className="cf-input-group__addon">@</span>
<CfInput value={search} onChange={(e) => setSearch(e.target.value)} placeholder="username" />
</CfInputGroup>与 Select / Button 组合
最常见的「URL 输入框 + 协议选择 + 提交按钮」组合 — 三段拼到一起共享一组边框。
背景
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton, CfSelect } from '@chufix-design/vue';
const protocol = ref('https');
const host = ref('chufix.com');
const protocols = [
{ label: 'https://', value: 'https' },
{ label: 'http://', value: 'http' },
];
</script>
<template>
<CfInputGroup>
<CfSelect v-model="protocol" :options="protocols" />
<CfInput v-model="host" placeholder="example.com" />
<CfButton>访问</CfButton>
</CfInputGroup>
</template><script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton, CfSelect } from '@chufix-design/vue';
const protocol = ref('https');
const host = ref('chufix.com');
const protocols = [
{ label: 'https://', value: 'https' },
{ label: 'http://', value: 'http' },
];
</script>
<template>
<CfInputGroup>
<CfSelect v-model="protocol" :options="protocols" />
<CfInput v-model="host" placeholder="example.com" />
<CfButton>访问</CfButton>
</CfInputGroup>
</template><CfInputGroup>
<CfSelect value={protocol} onChange={setProtocol} options={protocols} />
<CfInput value={host} onChange={(e) => setHost(e.target.value)} placeholder="example.com" />
<CfButton>访问</CfButton>
</CfInputGroup><CfInputGroup>
<CfSelect value={protocol} onChange={setProtocol} options={protocols} />
<CfInput value={host} onChange={(e) => setHost(e.target.value)} placeholder="example.com" />
<CfButton>访问</CfButton>
</CfInputGroup>前后静态标签
<span class="cf-input-group__addon"> 可以放在输入框两侧，常见于货币 / URL 路径前缀后缀。
背景
¥RMB
https:///path
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';
const price = ref('');
const url = ref('');
</script>
<template>
<div class="demo-stack">
<CfInputGroup>
<span class="cf-input-group__addon">¥</span>
<CfInput v-model="price" placeholder="价格" />
<span class="cf-input-group__addon">RMB</span>
</CfInputGroup>
<CfInputGroup>
<span class="cf-input-group__addon">https://</span>
<CfInput v-model="url" placeholder="example.com" />
<span class="cf-input-group__addon">/path</span>
</CfInputGroup>
</div>
</template><script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput } from '@chufix-design/vue';
const price = ref('');
const url = ref('');
</script>
<template>
<div class="demo-stack">
<CfInputGroup>
<span class="cf-input-group__addon">¥</span>
<CfInput v-model="price" placeholder="价格" />
<span class="cf-input-group__addon">RMB</span>
</CfInputGroup>
<CfInputGroup>
<span class="cf-input-group__addon">https://</span>
<CfInput v-model="url" placeholder="example.com" />
<span class="cf-input-group__addon">/path</span>
</CfInputGroup>
</div>
</template><CfInputGroup>
<span className="cf-input-group__addon">¥</span>
<CfInput value={price} onChange={(e) => setPrice(e.target.value)} placeholder="价格" />
<span className="cf-input-group__addon">RMB</span>
</CfInputGroup>
<CfInputGroup>
<span className="cf-input-group__addon">https://</span>
<CfInput value={url} onChange={(e) => setUrl(e.target.value)} placeholder="example.com" />
<span className="cf-input-group__addon">/path</span>
</CfInputGroup><CfInputGroup>
<span className="cf-input-group__addon">¥</span>
<CfInput value={price} onChange={(e) => setPrice(e.target.value)} placeholder="价格" />
<span className="cf-input-group__addon">RMB</span>
</CfInputGroup>
<CfInputGroup>
<span className="cf-input-group__addon">https://</span>
<CfInput value={url} onChange={(e) => setUrl(e.target.value)} placeholder="example.com" />
<span className="cf-input-group__addon">/path</span>
</CfInputGroup>等宽撑满
stretch 让子元素等宽撑满父容器 — 适合占满表单整行的搜索框 + 提交按钮组合。
背景
<script setup lang="ts">
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton } from '@chufix-design/vue';
const q = ref('');
</script>
<template>
<div style="max-width: 24rem;">
<CfInputGroup stretch>
<CfInput v-model="q" placeholder="搜索…" />
<CfButton variant="primary">搜索</CfButton>
</CfInputGroup>
</div>
</template><script setup>
import { ref } from 'vue';
import { CfInputGroup, CfInput, CfButton } from '@chufix-design/vue';
const q = ref('');
</script>
<template>
<div style="max-width: 24rem;">
<CfInputGroup stretch>
<CfInput v-model="q" placeholder="搜索…" />
<CfButton variant="primary">搜索</CfButton>
</CfInputGroup>
</div>
</template><CfInputGroup stretch>
<CfInput value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜索…" />
<CfButton variant="primary">搜索</CfButton>
</CfInputGroup><CfInputGroup stretch>
<CfInput value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜索…" />
<CfButton variant="primary">搜索</CfButton>
</CfInputGroup>API · Props
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | 排列方向 |
size | 'sm' | 'md' | 'lg' | 'md' | 静态标签的尺寸（控件本身用各自的 size 即可） |
stretch | boolean | false | 子项等宽撑满父容器 |
反馈与讨论
InputGroup 输入组合 的讨论