BizVote 投票评选

轻量通用投票 / 评选容器，纯零依赖：单选 / 多选（限票数）、匿名与实名名单、截止倒计时到点自动止投、实时进度条与占比、结果定格降序排序、截止前撤销重投。本地统计零接口即可用，request / submitRequest 注入切换服务端统计口径。适合内部评选、征名、方案表决、活动选期等场景。

基础用法

团建活动形式投票

每人一票，得票最高的方案将进入预算评审。

城市定向赛（户外）

7 票 · 22%

剧本杀 + 晚宴

12 票 · 38%领先

周边民宿两日游

9 票 · 28%

电竞馆包场

4 票 · 13%

共 32 票

单选投票；投票后进度条、占比与「领先」标记实时更新。

<script setup lang="ts">
/** 单选投票：勾选 → 投票 → 进度条与占比实时更新，领先项绿色标记 */
import { BizVote } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 420px">
    <BizVote
      title="团建活动形式投票"
      description="每人一票，得票最高的方案将进入预算评审。"
      :options="[
        { id: 'a', label: '城市定向赛（户外）', votes: 7 },
        { id: 'b', label: '剧本杀 + 晚宴', votes: 12 },
        { id: 'c', label: '周边民宿两日游', votes: 9 },
        { id: 'd', label: '电竞馆包场', votes: 4 },
      ]"
    />
  </div>
</template>

显示代码

多选限票

年度最受欢迎培训课程评选 多选 · 最多 2 项

请为本年度最有收获的课程投票（最多 2 门）。

高效能人士的七个习惯

15 票 · 25%

结构化写作与表达

11 票 · 19%

数据分析实战营

18 票 · 31%领先

非暴力沟通工作坊

9 票 · 15%

管理者情景教练

6 票 · 10%

共 59 票

multiple + max-changes，超出可选数即时拦截提示。

<script setup lang="ts">
/** 多选限票：最多可选 2 项，超出即时提示拦截 */
import { BizVote } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 420px">
    <BizVote
      title="年度最受欢迎培训课程评选"
      description="请为本年度最有收获的课程投票（最多 2 门）。"
      multiple
      :max-choices="2"
      :options="[
        { id: 'a', label: '高效能人士的七个习惯', votes: 15 },
        { id: 'b', label: '结构化写作与表达', votes: 11 },
        { id: 'c', label: '数据分析实战营', votes: 18 },
        { id: 'd', label: '非暴力沟通工作坊', votes: 9 },
        { id: 'e', label: '管理者情景教练', votes: 6 },
      ]"
    />
  </div>
</template>

显示代码

实名投票

值班代表推选（实名）

实名公示，投票记录可追溯。

张伟

3 票 · 50%领先

李娜刘洋周敏

陈静

2 票 · 33%

王强赵磊

杨帆

1 票 · 17%

孙悦

共 6 票 · 6 人参与

anonymous=false 展示各选项投票人名单，页脚汇总参与人数；voter-name 记名。

<script setup lang="ts">
/** 实名投票：选项下展示投票人名单，页脚汇总参与人数；本次投票以 voterName 记名 */
import { BizVote } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 420px">
    <BizVote
      title="值班代表推选（实名）"
      description="实名公示，投票记录可追溯。"
      :anonymous="false"
      voter-name="王小明"
      :options="[
        { id: 'a', label: '张伟', votes: 3, voters: ['李娜', '刘洋', '周敏'] },
        { id: 'b', label: '陈静', votes: 2, voters: ['王强', '赵磊'] },
        { id: 'c', label: '杨帆', votes: 1, voters: ['孙悦'] },
      ]"
    />
  </div>
</template>

显示代码

截止倒计时

接口命名方案表决

距截止 00:02:00

倒计时归零自动止投；演示截止时间为 2 分钟后。

按资源复数命名（/api/users）

5 票 · 63%领先

按动作命名（/api/getUserList）

3 票 · 38%

共 8 票

每秒刷新倒计时；最后 1 分钟转红加急提示；归零后投票按钮消失、显示「投票已截止」。

每秒刷新；最后 1 分钟转红；归零自动止投定格。

<script setup lang="ts">
/** 截止倒计时：距截止不足 1 分钟转红，到点自动止投并定格结果 */
import { BizVote } from 'vue3-ep-biz-lib'

const deadline = Date.now() + 2 * 60_000
</script>

<template>
  <div style="max-width: 420px">
    <BizVote
      title="接口命名方案表决"
      description="倒计时归零自动止投；演示截止时间为 2 分钟后。"
      :deadline="deadline"
      :options="[
        { id: 'a', label: '按资源复数命名（/api/users）', votes: 5 },
        { id: 'b', label: '按动作命名（/api/getUserList）', votes: 3 },
      ]"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      每秒刷新倒计时；最后 1 分钟转红加急提示；归零后投票按钮消失、显示「投票已截止」。
    </p>
  </div>
</template>

显示代码

实时结果（服务端拉取）

新版本默认主题公投

点击刷新拉取最新票数（演示为随机增长）。

共 0 票

request 拉取最新票数，进度条宽度动画过渡，可配合轮询做投票墙。

<script setup lang="ts">
/** 实时结果：request 拉取最新票数，进度条宽度动画过渡；配合轮询即可做直播投票墙 */
import { ref } from 'vue'
import { BizVote } from 'vue3-ep-biz-lib'
import type { BizVoteInstance, BizVoteOption } from 'vue3-ep-biz-lib'

const voteRef = ref<BizVoteInstance>()
let round = 0

/** 模拟服务端票数：每次拉取各选项随机增长 */
const request = (): Promise<BizVoteOption[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      round += 1
      resolve([
        { id: 'a', label: '方案 A · 极光绿主题', votes: 40 + round * 2 },
        { id: 'b', label: '方案 B · 曜石黑主题', votes: 35 + round * 3 },
        { id: 'c', label: '方案 C · 晨雾蓝主题', votes: 25 + round },
      ])
    }, 300)
  })
}
</script>

<template>
  <div style="max-width: 420px">
    <BizVote ref="voteRef" title="新版本默认主题公投" :request="request" description="点击刷新拉取最新票数（演示为随机增长）。">
      <template #footer>
        <el-button size="small" @click="voteRef?.refresh()">拉取最新票数</el-button>
      </template>
    </BizVote>
  </div>
</template>

显示代码

结果定格排序

中秋礼盒口味评选（已截止）

投票已截止

流心奶黄

46 票 · 44%领先

鲜肉椒盐

28 票 · 27%

低糖枣泥

19 票 · 18%

五仁（经典派）

12 票 · 11%

共 105 票

deadline 为过去时间即「已截止」；sort-results 按票数降序、领先项置顶。

<script setup lang="ts">
/** 结果定格：已截止（deadline 为过去时间）+ sortResults 按票数降序，领先项置顶 */
import { BizVote } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 420px">
    <BizVote
      title="中秋礼盒口味评选（已截止）"
      deadline="2026-10-15 18:00:00"
      sort-results
      :options="[
        { id: 'a', label: '流心奶黄', votes: 46 },
        { id: 'b', label: '五仁（经典派）', votes: 12 },
        { id: 'c', label: '鲜肉椒盐', votes: 28 },
        { id: 'd', label: '低糖枣泥', votes: 19 },
      ]"
    />
  </div>
</template>

显示代码

图片选项（作品评选）

司庆海报设计评选 多选 · 最多 2 项

从 4 幅入围作品中选出 2 幅进入终审。

作品 1 · 拾光

21 票 · 28%

作品 2 · 同行

17 票 · 22%

作品 3 · 启航

25 票 · 33%领先

作品 4 · 星河

13 票 · 17%

共 76 票

image 缩略图随选项展示，常配多选限票。

<script setup lang="ts">
/** 图片选项：作品评选场景，多选限票，缩略图随选项展示 */
import { BizVote } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="max-width: 480px">
    <BizVote
      title="司庆海报设计评选"
      description="从 4 幅入围作品中选出 2 幅进入终审。"
      multiple
      :max-choices="2"
      :options="[
        { id: 'a', label: '作品 1 · 拾光', image: 'https://picsum.photos/seed/poster1/240/160', votes: 21 },
        { id: 'b', label: '作品 2 · 同行', image: 'https://picsum.photos/seed/poster2/240/160', votes: 17 },
        { id: 'c', label: '作品 3 · 启航', image: 'https://picsum.photos/seed/poster3/240/160', votes: 25 },
        { id: 'd', label: '作品 4 · 星河', image: 'https://picsum.photos/seed/poster4/240/160', votes: 13 },
      ]"
    />
  </div>
</template>

显示代码

服务端统计

部门聚餐场次投票（服务端统计）

共 0 票

首次进入经 request 拉取票数；提交经 submitRequest 确认（第二次提交会演示失败停留）；远程模式下撤销仅复位本地状态，票数以服务端为准。

request + submitRequest：票数与提交均以服务端返回为准；提交失败停留可重试。

<script setup lang="ts">
/** request + submitRequest 服务端统计：票数与提交均以服务端返回为准 */
import { BizVote } from 'vue3-ep-biz-lib'
import type { BizVoteOption, BizVoteSubmitPayload } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'

const store: Record<string, number> = { a: 8, b: 14, c: 6 }
let seq = 0

const request = (): Promise<BizVoteOption[]> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        { id: 'a', label: '周五晚场', votes: store.a },
        { id: 'b', label: '周六下午场', votes: store.b },
        { id: 'c', label: '周日早场', votes: store.c },
      ])
    }, 300)
  })
}

const submitRequest = (optionIds: string[]): Promise<BizVoteOption[]> => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      seq += 1
      if (seq === 2) {
        reject(new Error('演示：第二次提交模拟服务端拒绝（防刷）'))
        return
      }
      optionIds.forEach((id) => { store[id] = (store[id] ?? 0) + 1 })
      resolve([
        { id: 'a', label: '周五晚场', votes: store.a },
        { id: 'b', label: '周六下午场', votes: store.b },
        { id: 'c', label: '周日早场', votes: store.c },
      ])
    }, 500)
  })
}

const onVote = (payload: BizVoteSubmitPayload): void => {
  ElMessage.info(`vote 事件：${payload.optionIds.join('、')} · 投后总票数 ${payload.totalVotes}`)
}
</script>

<template>
  <div style="max-width: 420px">
    <BizVote
      title="部门聚餐场次投票（服务端统计）"
      :request="request"
      :submit-request="submitRequest"
      allow-revoke
      @vote="onVote"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      首次进入经 request 拉取票数；提交经 submitRequest 确认（第二次提交会演示失败停留）；远程模式下撤销仅复位本地状态，票数以服务端为准。
    </p>
  </div>
</template>

显示代码

撤销重投

会议室命名投票

距截止 00:30:00

群星厅

5 票 · 33%

远航厅

6 票 · 40%领先

拾光厅

4 票 · 27%

共 15 票

投票后出现「撤销重投」：票数回退、选择清空，可改投其他选项；截止后撤销入口自动消失。

allow-revoke 截止前可撤销回退票数并改投；截止后入口自动消失。

<script setup lang="ts">
/** 撤销重投：截止前允许撤销本次投票并改投，票数即时回退 */
import { BizVote } from 'vue3-ep-biz-lib'
import { ElMessage } from 'element-plus'
</script>

<template>
  <div style="max-width: 420px">
    <BizVote
      title="会议室命名投票"
      allow-revoke
      :deadline="Date.now() + 30 * 60_000"
      :options="[
        { id: 'a', label: '群星厅', votes: 5 },
        { id: 'b', label: '远航厅', votes: 6 },
        { id: 'c', label: '拾光厅', votes: 4 },
      ]"
      @revoke="() => ElMessage.info('revoke 事件外抛，可同步服务端回退')"
    />
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      投票后出现「撤销重投」：票数回退、选择清空，可改投其他选项；截止后撤销入口自动消失。
    </p>
  </div>
</template>

显示代码

插槽扩展

季度技术之星提名表决

候补导师制候选张工 · 平台组 8 票 / 32%

候补导师制候选李敏 · 应用组 10 票 / 40%

候补导师制候选王运维 · 基础设施组 7 票 / 28%

共 25 票评选规则见内网公告 · 当前 25 票

option 作用域含 option / selected / myVoted / votes / percent；footer 作用域含 total / closed。最近状态：（未选择）

option 接管选项内容区（option / selected / myVoted / votes / percent），footer 注入说明（total / closed）。

<script setup lang="ts">
/** 插槽扩展：option 接管选项内容区（自定义徽标），footer 注入说明与规则链接 */
import { ref } from 'vue'
import { BizVote } from 'vue3-ep-biz-lib'
import type { BizVoteOption } from 'vue3-ep-biz-lib'

const lastPick = ref('（未选择）')

const options: BizVoteOption[] = [
  { id: 'a', label: '张工 · 平台组', votes: 8 },
  { id: 'b', label: '李敏 · 应用组', votes: 10 },
  { id: 'c', label: '王运维 · 基础设施组', votes: 7 },
]
</script>

<template>
  <div style="max-width: 460px">
    <BizVote title="季度技术之星提名表决" :options="options" @vote="() => (lastPick = '已提交')">
      <template #option="{ option, selected, votes, percent }">
        <div style="display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%">
          <span>
            <el-tag size="small" effect="plain" style="margin-right: 8px">候补导师制候选</el-tag>{{ option.label }}
            <span v-if="selected" style="color: var(--el-color-primary); font-size: 12px"> ← 已选中</span>
          </span>
          <span style="font-size: 12px; color: var(--el-text-color-secondary)">{{ votes }} 票 / {{ percent }}%</span>
        </div>
      </template>
      <template #footer="{ total, closed }">
        <span style="font-size: 12px; color: var(--el-text-color-placeholder)">评选规则见内网公告 · 当前 {{ total }} 票{{ closed ? ' · 已截止' : '' }}</span>
      </template>
    </BizVote>
    <p style="margin: 12px 0 0; font-size: 13px; color: var(--el-text-color-secondary)">
      option 作用域含 option / selected / myVoted / votes / percent；footer 作用域含 total / closed。最近状态：{{ lastPick }}
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
title	string	'投票'	标题（多选时自动追加限票标签）
description	string	''	说明文案
options	BizVoteOption[]	[]	选项（label / image / votes 初始票数 / voters 实名名单）
multiple	boolean	false	多选模式
max-choices	number	3	多选最多可选数
anonymous	boolean	true	匿名投票；false 展示投票人名单
voter-name	string	'我'	实名模式本次投票人名称
deadline	string | number	—	截止时间（时间戳或可解析字符串）；到点自动止投
show-results	'always' | 'after-vote' | 'after-deadline'	'always'	进度条展示时机
sort-results	boolean	false	结果按票数降序（常配截止定格）
allow-revoke	boolean	false	截止前允许撤销重投
request	() => Promise<BizVoteOption[]>	—	票数拉取（远程统计模式，返回最新 options 含 votes）
submit-request	(optionIds: string[]) => Promise<BizVoteOption[]>	—	投票提交（resolve 返回更新后的 options）

Events

事件名	参数	说明
vote	(payload: BizVoteSubmitPayload)	投票提交（optionIds + 投后总票数，先于 submitRequest 抛出）
revoke	()	撤销重投

Slots

插槽名	说明
option	选项内容区（作用域：option / selected / myVoted / votes / percent）
footer	底部扩展（作用域：total / closed）

Expose

属性/方法	说明
refresh	() => Promise<void> 重新拉取票数（request 注入时）
get-result	() => { total; items: { id; label; votes; percent }[] } 当前统计快照
reset	重置为初始票数与未投状态

口径说明

• 防重投：组件内已投票即锁定（显示「我的票」徽标），撤销需显式开启 allow-revoke；同一页面多实例各自独立。
• 占比：percent = 选项票数 / 总票数（四舍五入），总票数为 0 时全部显示 0%。
• 远程模式撤销：无 revokeRequest 契约时，撤销仅复位本地投票状态，票数以服务端为准（可在 revoke 事件中自行回退服务端票数）。
• 倒计时：仅设置 deadline 时启动每秒计时器，组件卸载自动清理。