美文网首页
vue封装翻转卡片效果

vue封装翻转卡片效果

作者: lesdom | 来源:发表于2020-11-16 12:42 被阅读0次

    方式一

    edge兼容性不太好,翻转会卡住

    组件

    //FlipCard.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>
    

    使用

    <FlipCard trigger="hover" direction="row">
      <template v-slot:cz>
        <div class="value-card-positive">
          正面
        </div>                        
      </template>
      <template v-slot:cf>
        <div class="value-card-negative">
          反面
        </div>
      </template>          
    </FlipCard>
    

    方式二

    从github找了个插件,可以兼容edge,有时间可以看看学习一下,缺点是目前只能点击
    https://github.com/VitorLuizC/vue-flipper

    相关文章

      网友评论

          本文标题:vue封装翻转卡片效果

          本文链接:https://www.haomeiwen.com/subject/ipwabktx.html