插件名称 | vue-card-stack |
---|---|
发布时间 | 2020年6月6日 |
插件作者 | rodleviton |
堆栈卡组件,允许用户在Web应用程序上创建可滑动,可调整的堆栈卡。
v1.3.1(12/10/2020)
v1.3.0(12/06/2020)
# Yarn
$ yarn add vue-card-stack
# NPM
$ npm install vue-card-stack --save
1. vue-card-stack
安装后导入组件。
import Vue from "vue";
import VueCardStack from "vue-card-stack";
2.将组件添加到应用模板。
<vue-card-stack :cards="cards" :stack-width="480" :card-width="320">
<template v-slot:card="{ card }">
<div
style="width: 100%; height: 100%;"
:style="{ background: card.background }"
></div>
</template>
</vue-card-stack>
3.注册组件并确定每个卡的背景色,如下所示:
export default {
components: {
VueCardStack
},
data() {
return {
cards: [
{ background: "#000" },
{ background: "#222" },
{ background: "#fff" },
{ background: "#333" },
{ background: "#666" }
]
};
}
};
4.定制卡片的可能 props 。
cards: {
type: Array,
default: () => []
},
cardWidth: {
type: Number,
default: () => 300
},
cardHeight: {
type: Number,
default: () => 400
},
stackWidth: {
type: [Number, String],
default: () => null
},
sensitivity: {
type: Number,
default: () => 0.25
},
maxVisibleCards: {
type: Number,
default: () => 10
},
scaleMultiplier: {
type: Number,
default: () => 0.5 // 最后可见的卡片将是50%的比例
},
speed: {
type: Number,
default: () => 0.2
},
paddingHorizontal: {
type: Number,
default: () => 20
},
paddingVertical: {
type: Number,
default: () => 20
}
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
cards | Array | [] | 卡数组以渲染堆栈。 |
cardWidth | Number | 300 | 卡的宽度(以像素为单位)。 |
cardHeight | Number | 400 | 卡的高度(以像素为单位)。 |
stackWidth | `Number | String` | cardWidth + paddingHorizontal |
sensitivity | Number | 0.25 | 距离卡必须以 cardWidth + paddingHorizontal 的百分比行进 |
maxVisibleCards | Number | 10 | 一次可以看到的卡片数量。 |
scaleMultiplier | Number | 0.75 | 之间的一个数字 0 和 1 该数字确定卡在堆栈中移动时可缩放的程度。 |
speed | Number | 0.2 | 刷卡过渡的持续时间(以毫秒为单位)。 |
paddingHorizontal | Number | 20 | 将应用于卡片叠左右两侧的装订线大小(以像素为单位)。 |
paddingVertical | Number | 20 | 装订在纸叠顶部和底部的装订线大小(以像素为单位)。 |
名称 | 属性 | 监听 | 描述 |
---|---|---|---|
move | (value) | @move | 卡位置更改时发出。值表示卡已移动的距离,如果将卡移动了和距离以上,则返回介于0和之间的1值。01minmax |
名称 | 描述 |
---|---|
card | 堆叠中单个卡的插槽。 |