Search / Copy / Pagination

搜索与复制用原生 el-input（#prefix / :suffix-icon）；分页用 RdPagination。

搜索与复制

列表顶栏关键词搜索用 #prefix；详情编号只读展示用 :suffix-icon。

<script setup lang="ts">
import { ref } from 'vue'
import { Copy, Search } from '@lucide/vue'

const q = ref('')
const copyText = 'RD-2026-001'
</script>

<template>
  <div class="flex max-w-sm flex-col gap-3">
    <el-input v-model="q" placeholder="搜索客户…" clearable>
      <template #prefix>
        <Search :size="14" />
      </template>
    </el-input>
    <el-input :model-value="copyText" readonly :suffix-icon="Copy" />
  </div>
</template>

分页

列表底部分页：页码、每页条数、跳转。

共 128 条，显示 1–10

每页10 条50 条100 条500 条1000 条

1 / 13

跳转至

<script setup lang="ts">
import { ref } from 'vue'
import { RdPagination } from '@rd-element/ui'
const page = ref(1)
const pageSize = ref(10)
</script>

<template>
  <RdPagination
    :current-page="page"
    :page-size="pageSize"
    :total="128"
    @update:current-page="page = $event"
    @update:page-size="pageSize = $event"
  />
</template>

API

RdPagination Attributes

属性名	说明	类型	默认值
currentPage	当前页（配合 update:currentPage）	number	—
pageSize	每页条数	number	—
total	总条数	number	—

RdPagination Events

事件名	说明	类型
update:currentPage	页码变更	(page: number) => void
update:pageSize	每页条数变更	(size: number) => void