vue手写一个抽屉组件_vue transition 抽屉

手写一个抽屉组件

基于vue的过渡动画

• 样式（点击消息提醒，从右侧弹出抽屉，点击其他关闭）
  
• transition + v-show/v-if

<template>
    <transition name="show" mode="out-in" @before-enter='transitionComplete' @after-leave='transitionComplete' @enter='transitioning' @leave='transitioning'>
        <div class="message-container" ref="message-container" @click="close" v-show="drawerClose">
            <div class="message">
            </div>
        </div>
    </transition>
</template>

<script>
export default {
    name: "messageCenter",
    props: {
        drawerClose: {//父组件的消息提醒icon，控制显示隐藏
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
        };
    },

    methods: {
        /**
         * @description 动画结束
         */
        transitionComplete() {
            const body = document.querySelector("body");
            body.style.overflow = "visible";
        },
        //动画进行时
        transitioning() {
            const body = document.querySelector("body");
            body.style.overflow = "hidden";
        },
        close(e) {
            const parent = this.$refs["message-container"];
            if (
                e.target.className != "message-container" &&
                e.target.className != "el-icon-bell" &&
                !parent.contains(e.target)
            ) {//除了本身及子元素和消息提醒，点击关闭
                this.$emit("closeMessage", false);
            }
        },
    },
    mounted() {
        window.addEventListener("click", this.close);
    },
    beforeDestroy() {
        window.removeEventListener("click", this.close);
    },
};
</script>

<style lang="less" scoped>
.show-enter-active,
.show-leave-active {
    transition: all 0.3s;
}
.show-enter,
.show-leave-to {
    transform: translateX(500px);
}
.message-container {
    // transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: 0;
    right: 0px;
    width: 500px;
    height: calc(100vh - 60px);
    background: #ffffff;
    z-index: 99;
    box-shadow: -5px 11px 22px 0px rgba(0, 0, 0, 0.16);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

• 动画

v-enter: 弹框显示前的样式，过渡的开始状态, 也就是动画还没开始前，动画的起始位置
v-enter-active 动画生效的状态，从底部过渡到页面的过程
v-enter-to 动画执行完的结束状态，也就是弹出结束后显示在页面的样式
v-leave 隐藏元素，离开动画的开始状态，元素消失开始的样式
v-leave-active 隐藏元素过程中，离开动画的生效动态即离开的过程，从上到下滑
v-leave-to 隐藏元素完成，离开动画的结束状态(此时v-leave的样式被删除)

• 事件钩子

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
 
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13

我这里用了事件钩子，是因为，在动画过程中会重新计算宽高，所以会有滚动条，即使绝对定位也不行。所以在动画的时候给body加了overflow，结束之后又还原。就不会有滚动条了，前提是内容滚动区不是body，而是el-main之内的区域滚动。否则可能会有问题。

• 内容可以自己自定义，蒙层也可以自己添加。自己动手丰衣足食。
• 添加蒙层的时候，要注意层级。关闭的时候要隐藏蒙层，不然可能会点不到任何东西。

实现的需求