项目有个3d翻转的卡片效果的需求,写完以后顺带封装成组件。分享给你们,顺即可以给我提提建议。vue
//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>
复制粘贴、注册组件this
东西很简单,你们有须要拿着玩玩,以为还行点个赞鼓励下就好。spa