Preview Updated 2026-05-10

BulkSelectionBar 批量操作条

选中项时浮出的浮条，显示"已选 N 项" + 自定义 action 按钮 + 清空按钮。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

count 是当前选中项数；hideWhenEmpty=true（默认）时 count=0 自动隐藏。slot/children 放 action 按钮。position 有 sticky-top / sticky-bottom / inline 三档。

src/App.vue

<script setup lang="ts">
import { computed, ref } from 'vue';
import { CfBulkSelectionBar, CfButton } from '@chufix-design/vue';

const total = 12;
const selected = ref<number[]>([1, 3, 5]);

function toggle(id: number) {
  selected.value = selected.value.includes(id)
    ? selected.value.filter((x) => x !== id)
    : [...selected.value, id];
}

const allOn = computed(() => selected.value.length === total);
function selectAll() {
  selected.value = allOn.value ? [] : Array.from({ length: total }, (_, i) => i);
}
function onDelete() {
  selected.value = [];
}
</script>
<template>
  <div class="demo-scope">
    <CfBulkSelectionBar
      :count="selected.length"
      :total="total"
      position="inline"
      @clear="selected = []"
    >
      <CfButton size="sm" variant="tertiary" @click="selectAll">{{ allOn ? '取消全选' : '全选' }}</CfButton>
      <CfButton size="sm" variant="tertiary">归档</CfButton>
      <CfButton size="sm" variant="tertiary" @click="onDelete">删除</CfButton>
    </CfBulkSelectionBar>
    <ul class="demo-list">
      <li v-for="i in total" :key="i" :class="selected.includes(i - 1) && 'is-selected'">
        <input type="checkbox" :checked="selected.includes(i - 1)" @change="toggle(i - 1)" />
        条目 #{{ i }}
      </li>
    </ul>
  </div>
</template>
<style scoped>
.demo-scope { display: flex; flex-direction: column; gap: 12px; }
.demo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.demo-list li { padding: 8px; background: var(--bg-2); border-radius: var(--r-4); display: flex; align-items: center; gap: 8px; }
.demo-list li.is-selected { background: var(--accent-soft); color: var(--accent-1); }
</style>

<script setup>
import { computed, ref } from 'vue';
import { CfBulkSelectionBar, CfButton } from '@chufix-design/vue';

const total = 12;
const selected = ref<number[]>([1, 3, 5]);

function toggle(id) {
  selected.value = selected.value.includes(id)
    ? selected.value.filter((x) => x !== id)
    : [...selected.value, id];
}

const allOn = computed(() => selected.value.length === total);
function selectAll() {
  selected.value = allOn.value ? [] : Array.from({ length: total }, (_, i) => i);
}
function onDelete() {
  selected.value = [];
}
</script>
<template>
  <div class="demo-scope">
    <CfBulkSelectionBar
      :count="selected.length"
      :total="total"
      position="inline"
      @clear="selected = []"
    >
      <CfButton size="sm" variant="tertiary" @click="selectAll">{{ allOn ? '取消全选' : '全选' }}</CfButton>
      <CfButton size="sm" variant="tertiary">归档</CfButton>
      <CfButton size="sm" variant="tertiary" @click="onDelete">删除</CfButton>
    </CfBulkSelectionBar>
    <ul class="demo-list">
      <li v-for="i in total" :key="i" :class="selected.includes(i - 1) && 'is-selected'">
        <input type="checkbox" :checked="selected.includes(i - 1)" @change="toggle(i - 1)" />
        条目 #{{ i }}
      </li>
    </ul>
  </div>
</template>
<style scoped>
.demo-scope { display: flex; flex-direction: column; gap: 12px; }
.demo-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.demo-list li { padding: 8px; background: var(--bg-2); border-radius: var(--r-4); display: flex; align-items: center; gap: 8px; }
.demo-list li.is-selected { background: var(--accent-soft); color: var(--accent-1); }
</style>

import { useState } from 'react';
import { CfBulkSelectionBar, CfButton } from '@chufix-design/react';

export default function Demo() {
  const [selected, setSelected] = useState([1, 3, 5]);
  const total = 12;
  const [selected, setSelected] = useState([1, 3, 5]);
  return (
    <>
      <CfBulkSelectionBar count={selected.length} total={12} onClear={() => setSelected([])}>
      <CfButton size="sm">归档</CfButton>
      <CfButton size="sm">删除</CfButton>
      </CfBulkSelectionBar>
    </>
  );
}

import { useState } from 'react';
import { CfBulkSelectionBar, CfButton } from '@chufix-design/react';

export default function Demo() {
  const [selected, setSelected] = useState([1, 3, 5]);
  const total = 12;
  const [selected, setSelected] = useState([1, 3, 5]);
  return (
    <>
      <CfBulkSelectionBar count={selected.length} total={12} onClear={() => setSelected([])}>
      <CfButton size="sm">归档</CfButton>
      <CfButton size="sm">删除</CfButton>
      </CfBulkSelectionBar>
    </>
  );
}

API

属性	类型	默认	说明
`count`	`number`	`—`	当前选中数
`total`	`number`	`—`	总数；提供后渲染 `N / total`
`hideWhenEmpty`	`boolean`	`true`	count=0 时隐藏
`position`	`'sticky-top' \| 'sticky-bottom' \| 'inline'`	`'sticky-bottom'`	定位
`label`	`string`	自动	覆盖文案
`showClear`	`boolean`	`true`	显示内置清空按钮
`clearLabel`	`string`	`'清空'`	清空按钮文案

Events

Vue	React	说明
`clear`	`onClear`	清空按钮点击