InputGroup 输入组合

三区布局：#left | 默认内容 | #right。中间用 Element Plus 控件；左右可显示竖线分隔。

示例

常见组合：左图标/标签、中输入、右文案或按钮；多行备注；以及 EP 原生 prepend/append 对照。

图标 + 结果文案

12 条

支持关键词搜索客户、联系人或邮箱

协议头 + 复制

https://

金额单位 + 操作

¥

.00

搜索按钮

EP 原生 prepend / append

<script setup lang="ts">
import { ref } from 'vue'
import { Copy, Search, AtSign, Mail } from '@lucide/vue'
import { RdInputGroup, toast } from '@rd-element/ui'

const demoInputGroupSearch = ref('')
const demoInputGroupUrl = ref('acme.rd.com')
const demoInputGroupAmount = ref('12800')
const demoInputGroupEmail = ref('ops')
const demoInputGroupNative = ref('')
const demoInputGroupComment = ref('')
</script>

<template>
  <div class="input-group-demo-grid">
    <div class="input-group-demo-item">
      <span class="input-group-demo-label">图标 + 结果文案</span>
      <RdInputGroup hint="支持关键词搜索客户、联系人或邮箱">
        <template #left><Search :size="14" /></template>
        <el-input v-model="demoInputGroupSearch" placeholder="搜索客户…" clearable />
        <template #right><span class="rd-input-group__text">12 条</span></template>
      </RdInputGroup>
    </div>
    <div class="input-group-demo-item">
      <span class="input-group-demo-label">协议头 + 复制</span>
      <RdInputGroup>
        <template #left><span class="rd-input-group__text">https://</span></template>
        <el-input v-model="demoInputGroupUrl" placeholder="域名" />
        <template #right>
          <el-button class="rd-input-group__button" text aria-label="复制链接" @click="toast.success('已复制')">
            <Copy :size="14" />
          </el-button>
        </template>
      </RdInputGroup>
    </div>
    <!-- …更多示例见文档页 -->
  </div>
</template>

API

RdInputGroup

属性名	说明	类型	默认值
hint	底部提示文案	string	—
disabled	整组禁用态	boolean	false
leftDivider	有 #left 时是否显示右侧竖线分隔	boolean	true
rightDivider	有 #right 时是否显示左侧竖线分隔	boolean	true

Slots

插槽名	说明
left	左侧区域（标签 / 图标），可配 leftDivider
default	中间内容：el-input / RdOrgHierarchySearch 等
right	右侧区域（按钮 / 文案），可配 rightDivider
hint	底部提示（覆盖 hint prop）

工具类

类名	说明
.rd-input-group__text	左右槽文案（标签感）
.rd-input-group__control / 直接放 el-input	中间输入融入组合
.rd-input-group__control--textarea	多行输入
.rd-input-group__button	挂在 el-button 上的紧凑样式