3D翻轉卡片封裝Vue組件

項目有個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 正反兩面的插槽

東西很簡單，你們有須要拿着玩玩，以爲還行點個贊鼓勵下就好。