FrameSlide 相框滑块

通过指针拖拽在多个「帧」之间横向滑动切换的容器。

基础用法

帧 1

帧 2

帧 3

帧 4

帧 5

帧 6

帧 7

帧 8

帧 9

帧 10

帧 11

帧 12

帧 13

帧 14

帧 15

帧 16

帧 17

当前帧：1

查看代码

<template>
    <div style="border: 1px solid #eee; border-radius: 8px; overflow: hidden">
        <FrameSlide v-model="index" :items="items">
            <template #default="{ item, index }">
                <div
                    style="height: 160px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px"
                    :style="{ background: item }"
                >
                    帧 {{ index + 1 }}
                </div>
            </template>
        </FrameSlide>
        <div style="padding: 8px; text-align: center">当前帧：{{ index + 1 }}</div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { FrameSlide } from "@a-drowned-fish/rox-v";

const index = ref(0);
const items = [
    "#646cff",
    "#42b883",
    "#ff7a45",
    "#ffc107",
    "#000",
    "#f00",
    "#0f0",
    "#00f",
    "#ccc",
    "#eee",
    "orange",
    "yellow",
    "brown",
    "skyblue",
    "purple",
    "pink",
    "indigo",
];
</script>

Props

参数	说明	类型	默认值
modelValue (v-model)	当前帧索引	number	0
items	帧数据数组	Array	[]
sensitivity	滑动灵敏度，值越大越灵敏（切换阈值 = 宽度 / 帧数 / sensitivity）	number	10

事件

事件名	说明	回调参数
update:modelValue	帧索引变化	(index: number) => void

插槽

插槽名	子作用域	说明
default	{ item, index }	每一帧的内容