原生JS封装Element Plus 组件 Drawer 抽屉

牛顿不穿背带裤

于 2024-12-02 22:39:23 发布

阅读量818

点赞数 19

文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/2302_80961741/article/details/144200068

版权

原生JS封装Drawer 抽屉

封装一个类似于ElementPlus的Drawer 抽屉侧边栏提示框

Element Plus 效果：
elementPlus官网效果

自己封装的效果:
自己实现的效果

官网实现的按钮点击就从右边直接弹出

我写的是滑动到最右边会唤出提示条点击就会唤起抽屉

主要就是有一个从右到左的动画，还需要遮罩层，点击后就会关闭抽屉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            overflow: hidden;
        }

        /* 通过hover伪类将提示条滑出 */
        .tools-bar {
            width: 30px;
            height: 100vh;
            background: #0dddec;
            opacity: 0.5;
            position: fixed;
            top: 0;
            right: -28px;
            text-align: center;
            line-height: 100vh;
            transition: all 1s;
            opacity: 0;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            z-index: 999;
        }
        .icon {
            color: rgb(199, 8, 247);
        }
        .tools-bar:hover {
            opacity: 0.8;
            right: 0;
        }

        /* 默认滚动条不好看，可以自己设置样式 */
        .aside-nav::-webkit-scrollbar {
            width: 10px;
            
        }
        .aside-nav::-webkit-scrollbar-thumb {
            background: #1e1d1d;
            border-radius: 5px;
        }
        .aside-nav::-webkit-scrollbar-track {
            background: #989898;
        }


        /* 默认就是在屏幕外看不到的地方，通过transition就能实现流畅的划出效果 */
        .aside-nav {
            width: 300px;
            height: 100vh;
            position: fixed;
            top: 0;
            right: -300px;
            box-shadow: 0 0 20px #666 , 0 0 20px #666;
            overflow-y: scroll;
            overflow-x: hidden;
            transition: all 1s;
            background: white;
            z-index: 998;

            .aside-nav-header {
                width: 100%;
                height: 30px;
                background: #8769f6;
                display: flex;
                justify-content: space-between;
                text-align: center;
            }

            .aside-nav-body {
                width: 100%;
                height: auto;
                .body-list {
                    list-style: none;
                    li {
                        padding: 20px;
                        width: 100%;
                        height: auto;
                        line-height: 20px;
                    }
                    li:hover {
                        background: rgba(220, 220, 220, 0.53);
                    }
                    li a {
                        text-decoration: none;
                        color: lightblue;
                    }
                }
            }
        }

        /* 遮罩层默认不显示，点击后显示 */
        .mask {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            right: 0;
            background: #1e1d1d;
            opacity: 0.5;
            z-index: 997;
            display: none;
        }

    </style>

</head>
<body>

    1111

    <!-- 侧边的提示条 -->
    <div class="tools-bar">
        <span class="icon"><</span>
    </div>

    <!-- 遮罩层 -->
    <div class="mask"></div>

    <!-- 抽屉 -->
    <div class="aside-nav">
        <div class="aside-nav-header">
            <div class="header">Header</div>
            <div class="header-icon">
                <span><></span>
            </div>
        </div>
        <div class="aside-nav-body">
            <ul class="body-list">
                <li>
                    <a href="">列表</a>
                    <ul class="body-list child">
                        <li><a href="">菜单</a></li>
                        <li><a href="">测试</a></li>
                    </ul>
                </li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
                <li><a href="">样式</a></li>
                <li><a href="">角色</a></li>
                <li><a href="">菜单</a></li>
                <li><a href="">测试</a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    const icon = document.querySelector('.tools-bar')
    const mask = document.querySelector('.mask') 

    // 监听侧边的提示条，被点击就会弹出抽屉
    icon.addEventListener('click', () => {
        document.querySelector('.aside-nav').style.right = 0
        document.querySelector('.mask').style.display = 'block'
        document.querySelector('.tools-bar').style.display = 'none'
    })

    // 当抽屉弹出时，监听点击事件，遮罩层被点击就会关闭抽屉
    mask.addEventListener('click', (e) => {  
        if (e.target === mask) {
            document.querySelector('.aside-nav').style.right = '-300px'
            document.querySelector('.mask').style.display = 'none'
            document.querySelector('.tools-bar').style.display = 'block'
        }
    })
</script>
</html>