随机生成器 Rollcall

我有个朋友，他每次旷课老师就点名

随机选择给定数组中的一个元素

基本使用

通过data属性设置数据

开始点名

暂无内容

展开查看

TypeScript JavaScript

vue

<template>
    <t-rollcall :data="names" startText="开始点名" />
    <t-rollcall />
</template>

<script setup lang="ts">
const names: (number | string)[] = [
    'Alice',
    'Bob',
    'Charlie',
    'David',
    'Eva',
    'Frank',
    'Grace',
    'Harry',
    'Ivy',
    'Jack',
    'Kate',
    'Liam',
    'Mia',
    'Noah',
    'Olivia'
]
</script>

vue

<template>
    <t-rollcall :data="names" startText="开始点名" />
    <t-rollcall />
</template>

<script setup>
const names = [
    'Alice',
    'Bob',
    'Charlie',
    'David',
    'Eva',
    'Frank',
    'Grace',
    'Harry',
    'Ivy',
    'Jack',
    'Kate',
    'Liam',
    'Mia',
    'Noah',
    'Olivia'
]
</script>

控制与选择

rollMethod属性

可通过选择byClick（默认）或byCountDown两种方式进行开始和结束的控制，前者为通过用户点击控制，后者为通过倒计时自动控制

如果你设置该属性为byCountDown，那么设置duration属性可自定义倒计时时长

selectMethod属性

可通过选择normal（默认）或unique两种方式进行选择的控制，前者为每次都在数据中随机选择，后者为无重复随机选择

今天中午吃什么

展开查看

TypeScript JavaScript

vue

<template>
    <t-rollcall :data="foods" startText="今天中午吃什么" rollMethod="byCountDown" :duration="5" />
    <t-rollcall :data="foods" startText="今天中午吃什么" selectMethod="unique" />
</template>

<script setup lang="ts">
const foods: (number | string)[] = ['汉堡', '披萨', '米饭', '面条', '烧烤']
</script>

vue

<template>
    <t-rollcall :data="foods" startText="今天中午吃什么" rollMethod="byCountDown" :duration="5" />
    <t-rollcall :data="foods" startText="今天中午吃什么" selectMethod="unique" />
</template>

<script setup>
const foods = ['汉堡', '披萨', '米饭', '面条', '烧烤']
</script>

标题

startText和noDataText两个属性分别对应有数据时的初始文字和无数据时的提示文字

晚上跑几圈

没有数据哦

展开查看

TypeScript JavaScript

vue

<template>
    <t-rollcall :data="target" startText="晚上跑几圈" />
    <t-rollcall noDataText="没有数据哦" />
</template>

<script setup lang="ts">
const target: (number | string)[] = ['不跑', 1, 3, 5, 7, 9]
</script>

vue

<template>
    <t-rollcall :data="target" startText="晚上跑几圈" />
    <t-rollcall noDataText="没有数据哦" />
</template>

<script setup>
const target = ['不跑', 1, 3, 5, 7, 9]
</script>

引用方法

你可以声明一个RollcallRef类型的响应式变量，并且调用相关方法对组件进行自定义的控制

RollcallRef包含三个方法：start()控制开始，stop()控制结束，get()返回随机结果（在初始和随机过程中为null）

这题选什么

开始

停止

结果

展开查看

TypeScript JavaScript

vue

<template>
    <div class="row">
        <t-rollcall :data="plans" startText="这题选什么" withoutFooter ref="rollcallRef" />
        <div class="group">
            <div class="start" @click="start">
                <svg viewBox="0 0 1024 1024" width="40" height="40">
                    <path
                        d="M440.696536 669.573805l211.429387-158.583808-211.429387-158.605298L440.696536 669.573805zM511.180843 158.596088c-193.814194 0-352.396979 158.582785-352.396979 352.394932 0 193.791681 158.583808 352.398002 352.396979 352.398002 193.814194 0 352.398002-158.606321 352.398002-352.398002C863.577822 317.178873 704.994014 158.596088 511.180843 158.596088M511.180843 792.904715c-155.059542 0-281.912671-126.854153-281.912671-281.913695 0-155.059542 126.854153-281.935184 281.912671-281.935184 155.059542 0 281.913695 126.875642 281.913695 281.935184C793.094538 666.050562 666.239362 792.904715 511.180843 792.904715"></path>
                </svg>
                开始
            </div>
            <div class="stop" @click="stop">
                <svg viewBox="0 0 1024 1024" width="40" height="40">
                    <path
                        d="M512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z m-85.333333-341.333333h170.666666v170.666666h-170.666666v-170.666666z"></path>
                </svg>
                停止
            </div>
            <div class="get" @click="getResult">
                <svg viewBox="0 0 1024 1024" width="40" height="40">
                    <path
                        d="M748.278519 184.32l-42.951111 0c-11.851852 0-25.505185 10.24-25.505185 22.376296 0 11.946667 13.653333 18.394074 25.505185 18.394074l42.951111 0c25.505185 0 48.64 20.48 48.64 46.554074l0 502.139259c0 25.979259-22.945185 49.398519-48.64 49.398519L286.814815 823.182222c-25.505185 0-59.543704-23.324444-59.543704-49.398519L227.271111 271.739259c0-25.979259 13.558519-49.398519 48.64-49.398519l53.854815 0c11.851852 0 19.247407-6.447407 19.247407-18.394074 0-12.136296-7.395556-19.531852-19.247407-19.531852l-54.044444 0c-60.207407 0-85.712593 38.115556-85.712593 88.177778l0 496.64c0 53.854815 31.857778 91.97037 90.263704 91.97037l463.454815 0c58.405926 0 90.263704-31.573333 90.263704-91.97037L833.991111 272.497778C834.180741 222.435556 803.934815 184.32 748.278519 184.32L748.278519 184.32M329.576296 381.060741c0 10.145185 10.05037 18.962963 21.807407 18.962963l322.085926 0c11.851852 0 21.807407-8.628148 21.807407-18.962963s-10.05037-18.962963-21.807407-18.962963L351.573333 362.097778C339.626667 362.097778 329.576296 370.915556 329.576296 381.060741L329.576296 381.060741M672.616296 482.891852 351.573333 482.891852c-11.851852 0-21.807407 8.628148-21.807407 18.962963 0 10.145185 10.05037 18.962963 21.807407 18.962963l322.085926 0c11.851852 0 21.807407-8.628148 21.807407-18.962963C694.613333 490.761481 684.562963 482.891852 672.616296 482.891852L672.616296 482.891852M672.616296 613.831111 351.573333 613.831111c-11.851852 0-21.807407 8.628148-21.807407 18.962963s10.05037 18.962963 21.807407 18.962963l322.085926 0c11.851852 0 21.807407-8.628148 21.807407-18.962963C694.613333 621.700741 684.562963 613.831111 672.616296 613.831111L672.616296 613.831111M438.234074 229.451852l149.617778 0c17.256296 0 31.857778-13.179259 31.857778-28.444444s-14.601481-28.444444-32.805926-28.444444L438.234074 172.562963c-18.204444 0-32.805926 13.179259-32.805926 28.444444C405.238519 216.272593 420.02963 229.451852 438.234074 229.451852L438.234074 229.451852M438.234074 229.451852"></path>
                </svg>
                结果
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { RollcallRef } from 'tes-design'

const plans: (number | string)[] = ['A', 'B', 'C', 'D', '空着']

const rollcallRef = ref<RollcallRef | null>(null)

const start = () => {
    rollcallRef.value!.start()
}

const stop = () => {
    rollcallRef.value!.stop()
}

const getResult = () => {
    console.log(rollcallRef.value!.get())
}
</script>

<style scoped>
.group {
    display: flex;
    gap: 25px;
    align-items: center;
}
</style>

vue

<template>
    <div class="row">
        <t-rollcall :data="plans" startText="这题选什么" withoutFooter ref="rollcallRef" />
        <div class="group">
            <div class="start" @click="start">
                <svg viewBox="0 0 1024 1024" width="40" height="40">
                    <path
                        d="M440.696536 669.573805l211.429387-158.583808-211.429387-158.605298L440.696536 669.573805zM511.180843 158.596088c-193.814194 0-352.396979 158.582785-352.396979 352.394932 0 193.791681 158.583808 352.398002 352.396979 352.398002 193.814194 0 352.398002-158.606321 352.398002-352.398002C863.577822 317.178873 704.994014 158.596088 511.180843 158.596088M511.180843 792.904715c-155.059542 0-281.912671-126.854153-281.912671-281.913695 0-155.059542 126.854153-281.935184 281.912671-281.935184 155.059542 0 281.913695 126.875642 281.913695 281.935184C793.094538 666.050562 666.239362 792.904715 511.180843 792.904715"></path>
                </svg>
                开始
            </div>
            <div class="stop" @click="stop">
                <svg viewBox="0 0 1024 1024" width="40" height="40">
                    <path
                        d="M512 853.333333c-187.733333 0-341.333333-153.6-341.333333-341.333333s153.6-341.333333 341.333333-341.333333 341.333333 153.6 341.333333 341.333333-153.6 341.333333-341.333333 341.333333z m0-85.333333c140.8 0 256-115.2 256-256s-115.2-256-256-256-256 115.2-256 256 115.2 256 256 256z m-85.333333-341.333333h170.666666v170.666666h-170.666666v-170.666666z"></path>
                </svg>
                停止
            </div>
            <div class="get" @click="getResult">
                <svg viewBox="0 0 1024 1024" width="40" height="40">
                    <path
                        d="M748.278519 184.32l-42.951111 0c-11.851852 0-25.505185 10.24-25.505185 22.376296 0 11.946667 13.653333 18.394074 25.505185 18.394074l42.951111 0c25.505185 0 48.64 20.48 48.64 46.554074l0 502.139259c0 25.979259-22.945185 49.398519-48.64 49.398519L286.814815 823.182222c-25.505185 0-59.543704-23.324444-59.543704-49.398519L227.271111 271.739259c0-25.979259 13.558519-49.398519 48.64-49.398519l53.854815 0c11.851852 0 19.247407-6.447407 19.247407-18.394074 0-12.136296-7.395556-19.531852-19.247407-19.531852l-54.044444 0c-60.207407 0-85.712593 38.115556-85.712593 88.177778l0 496.64c0 53.854815 31.857778 91.97037 90.263704 91.97037l463.454815 0c58.405926 0 90.263704-31.573333 90.263704-91.97037L833.991111 272.497778C834.180741 222.435556 803.934815 184.32 748.278519 184.32L748.278519 184.32M329.576296 381.060741c0 10.145185 10.05037 18.962963 21.807407 18.962963l322.085926 0c11.851852 0 21.807407-8.628148 21.807407-18.962963s-10.05037-18.962963-21.807407-18.962963L351.573333 362.097778C339.626667 362.097778 329.576296 370.915556 329.576296 381.060741L329.576296 381.060741M672.616296 482.891852 351.573333 482.891852c-11.851852 0-21.807407 8.628148-21.807407 18.962963 0 10.145185 10.05037 18.962963 21.807407 18.962963l322.085926 0c11.851852 0 21.807407-8.628148 21.807407-18.962963C694.613333 490.761481 684.562963 482.891852 672.616296 482.891852L672.616296 482.891852M672.616296 613.831111 351.573333 613.831111c-11.851852 0-21.807407 8.628148-21.807407 18.962963s10.05037 18.962963 21.807407 18.962963l322.085926 0c11.851852 0 21.807407-8.628148 21.807407-18.962963C694.613333 621.700741 684.562963 613.831111 672.616296 613.831111L672.616296 613.831111M438.234074 229.451852l149.617778 0c17.256296 0 31.857778-13.179259 31.857778-28.444444s-14.601481-28.444444-32.805926-28.444444L438.234074 172.562963c-18.204444 0-32.805926 13.179259-32.805926 28.444444C405.238519 216.272593 420.02963 229.451852 438.234074 229.451852L438.234074 229.451852M438.234074 229.451852"></path>
                </svg>
                结果
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const plans = ['A', 'B', 'C', 'D', '空着']

const rollcallRef = ref(null)

const start = () => {
    rollcallRef.value.start()
}

const stop = () => {
    rollcallRef.value.stop()
}

const getResult = () => {
    console.log(rollcallRef.value.get())
}
</script>

<style scoped>
.group {
    display: flex;
    gap: 25px;
    align-items: center;
}
</style>

方法名	说明	类型
start	开始随机过程	() => void
stop	停止随机过程	() => void
get	获取随机结果	() => string \| number \| null

属性名	说明	类型	默认值
data	数据信息	(number \| string)[]	[]
rollMethod	随机过程的控制方式	'byClick' \| 'byCountDown'	'byClick'
selectMethod	随机过程的选择方式	'normal' \| 'unique'	'normal'
duration	随机倒计时持续时间（秒）	number	2.5
startText	有数据时的初始文字	string	null
noDataText	无数据时的提示文字	string	'暂无内容'
withoutFooter	是否隐藏底边栏	boolean	false

随机生成器 Rollcall ​

基本使用 ​

控制与选择 ​

标题 ​

引用方法 ​

相关属性 ​

相关方法 ​

随机生成器 Rollcall

基本使用

控制与选择

标题

引用方法

相关属性

相关方法