共计 1895 个字符，预计需要花费 5 分钟才能阅读完成。
项目有个 3d 翻转的卡片效果的需求，写完之后顺带封装成组件。分享给大家，顺便可以给我提提建议。
上组件
//rotate3DCard.vue
<style lang=”stylus”>
.card-3d{
width 200px
height 300px
transition all .2s
position relative
perspective 1500px
background-color transparent
point cursor
.card{
position absolute
top 0
left 0
width 100%
height 100%
transition: all 1s
backface-visibility: hidden
border-radius 4px
border: 1px solid #e8eaec
&:hover{
box-shadow 0 1px 6px rgba(0,0,0,.2)
border-color #eee
}
&.card-z{
background-color: red
}
&.card-f-y{
transform rotateY(-180deg)
}
&.card-f-x{
transform rotateX(-180deg)
}
}
}
</style>
<template>
<div class=”card-3d” @click=”eve_cardres_click” @mouseover=”eve_cardres_msover” @mouseout=”eve_cardres_msout”>
<div class=”card card-z” ref=”cardz”>
<slot name=”cz”></slot>
</div>
<div :class=”[‘card’,direction==’row’?’card-f-y’:’card-f-x’]” ref=”cardf”>
<slot name=”cf”></slot>
</div>
</div>
</template>
<script>
export default {
props:{
trigger:{// 触发方式 hover click custom
type:String,
default: ‘click’ // 默认点击触发
},
value:{// 正反面
type:Boolean,
default:true
},
direction:{// 方向 row col
type:String,
default:’row’
}
},
data() {
return {
surface:true
}
},
watch:{
value(bool){// 自定义触发方式
if(this.trigger == ‘custom’)this.fn_reserve_action(bool)
}
},
methods: {
fn_reserve_action(bool){
var arr = this.direction == ‘row’?[‘rotateY(180deg)’,’rotateY(0deg)’]:[‘rotateX(-180deg)’,’rotateX(0deg)’]
this.$refs.cardz.style.transform = bool?arr[0]:arr[1]
this.$refs.cardf.style.transform = !bool?arr[0]:arr[1]
},
eve_cardres_click(){
if(this.trigger == ‘click’){
this.fn_reserve_action(this.surface)
this.surface = !this.surface
}
},
eve_cardres_msover(){
if(this.trigger == ‘hover’)this.fn_reserve_action(true)
},
eve_cardres_msout(){
if(this.trigger == ‘hover’)this.fn_reserve_action(false)
}
}
}
</script>
组件的使用
<rotate3DCard trigger=”hover” direction=”row”>
<slot name=”cz”></slot>
<slot name=”cf”></slot>
</rotate3DCard>
复制粘贴、注册组件
参数
trigger：卡片翻转的触发方式，目前有 hover/click/custom(自定义) 三种方式。其中 custom 方式配合 v -model 使用，使用场景：在卡片内部点击按钮触发时使用。
direction：翻转的方向，目前有 row/col 两种。
东西很简单，大家有需要拿着玩玩，觉得还行点个赞鼓励下就好。
slot：cz/cf 正反两面的插槽
