FlipView-DEMO

---

<fv-FlipView v-model="value">
</fv-FlipView>

FlipView Custom Template

---

<fv-FlipView v-model="images">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Vertical Direction

---

<fv-FlipView v-model="images" direction="vertical">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Mask

---

<fv-FlipView v-model="images" mask="rgba(36,36,36,0.6)">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Different Animation

---

<fv-FlipView v-model="images" animation="fold">
    <template v-slot:item="x">
        <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
    </template>
</fv-FlipView>

FlipView Dark Theme

---

<fv-FlipView v-model="images" theme="dark">
    <template v-slot:item="x">
        <div style="position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;">
            <p style="font-size: 36px; color: whitesmoke;">Dark Theme</p>
        </div>
    </template>
</fv-FlipView>

FlipView Show Control Panel

---

<fv-FlipView v-model="images" theme="dark" showControlPanel="hover">
    <template v-slot:item="x">
        <div style="position: relative; width: 100%; height: 100%; background: rgba(36,36,36,1); display: flex; justify-content: center; align-items: center;">
            <p style="font-size: 36px; color: whitesmoke;">Dark Theme</p>
        </div>
    </template>
</fv-FlipView>

属性

---

属性	类型	必填	默认值	说明
modelValue	array	否	[]	Flipview template data
direction	string	否	'horizontal'
animation	string	否	'move'	move，moveFade，moveDifferent，glue，push，fold
duration	number	否	800
autoPlay	boolean	否	true
autoPlayDuration	number	否	5000
showControlPanel	string	否	''
mask	string	否	''	The mask color of control panel
theme	string	否	'global'	主题样式。支持 global、light、dark、system 和 custom。
disabled	boolean	否	false	参见组件的 disabled 选项。
lang	string	否	"global"	参见组件的 lang 选项。

事件

---

事件名	参数	说明
change	object	当切换页面时返回当前索引index和当前轮播周期duration

插槽

---

1. Input

<template v-slot:item="x">
    <img alt="" :src="x.data" style="width: 100%; height: 100%; object-fit: cover;"/>
</template>