前端筆記：基于Dialog自定義實現類似抽屜效果

作者：郝光明 2025-09-22 08:03:34

開發項目管理

對于一些老項目無法升級ElementUI基礎框架且美觀和業務相對簡單的情況下還是值得推薦嘗試的一種方案。如果是新項目推薦直接升級框架的方式最靠譜。官方提供的el-drawer才是最優的選擇。

今天在維護vue2框架的一個業務系統遇到這樣一個問題，有一個需求需要實現類似于購物車的效果，因為本身框架使用的是ElementUI框架，首先想到的就是使用官方提供的el-drawer。

圖片

所以按照官方文檔準備在現有系統寫一個Demo，寫完之后調試了半個小時。始終無法實現抽屜的效果。最后看了下elementui的版本是2.10.1，最后發現這個版本是不支持抽屜組件的。

圖片

考慮到屬于老項目并且一直運行比較穩定，如果貿然升級elementui基礎框架的話風險還是非常大的。最后決定基于ElementUI的Dialog組件自定義的方式來實現抽屜的效果。下面給大家分享具體實現的過程，感興趣的前端朋友可以看一看！

二、代碼介紹

這部分相對比較簡單，直接使用Dialog組件的基本結構，然后通過自定義模板實現類似抽屜的標題欄和內容區域。

2.1 CSS部分

這部分是核心，需要定位對話框位置在頁面最右側，并且實現類似于抽屜從右向左滑動的效果。

定位與尺寸

使用position: fixed將Dialog固定到視口右側
設置height: 100vh實現全高效果
通過right: 0和top: 0定位到右上角
去除默認的圓角(border-radius: 0)和邊距(margin: 0)

動畫效果

頁面初始狀態使用transform: translateX(100%)將Dialog對話框隱藏在右側之外，需要打開對話框的時候通過CSS transition實現平滑的滑入效果。

.drawer-dialog {  transform: translateX(100%);  transition: transform 0.3s ease-out;}.drawer-dialog.dialog-fade-enter-active {  transform: translateX(0);}

.drawer-dialog {
  transform: translateX(100%);
  transition: transform 0.3s ease-out;
}
.drawer-dialog.dialog-fade-enter-active {
  transform: translateX(0);
}

2.2 JS部分

主要是實現抽屜的展示、隱藏邏輯、狀態管理、計算抽屜的寬度功能。

2.3 完整的代碼示例

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>右側滑出抽屜組件</title>    <link rel="stylesheet" >    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>    <script src="https://unpkg.com/element-ui/lib/index.js"></script>    <style>        * {            margin: 0;            padding: 0;            box-sizing: border-box;        }        body {            font-family: 'Helvetica Neue', Arial, sans-serif;            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);            min-height: 100vh;            display: flex;            flex-direction: column;            align-items: center;            padding: 40px 20px;            color: #2c3e50;        }        .container {            max-width: 800px;            width: 100%;            text-align: center;        }        h1 {            margin-bottom: 20px;            font-weight: 500;        }        .description {            margin-bottom: 30px;            color: #5e6d82;            line-height: 1.6;        }        .control-panel {            background: white;            border-radius: 8px;            padding: 25px;            margin-bottom: 30px;            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);        }        .button-group {            display: flex;            justify-content: center;            gap: 15px;            margin-bottom: 20px;            flex-wrap: wrap;        }        .demo-content {            background: white;            border-radius: 8px;            padding: 30px;            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);            margin-bottom: 30px;        }        .demo-content p {            margin-bottom: 15px;            color: #5e6d82;        }        .status-info {            margin-top: 20px;            padding: 12px;            background: #f0f9ff;            border-radius: 4px;            border-left: 4px solid #409EFF;        }        /* 抽屜組件樣式 */        .slide-drawer-mask {            position: fixed;            top: 0;            left: 0;            width: 100%;            height: 100%;            background-color: rgba(0, 0, 0, 0.5);            z-index: 9998;        }        .slide-drawer {            position: fixed;            top: 0;            right: 0;            height: 100%;            background: white;            box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);            display: flex;            flex-direction: column;            z-index: 9999;        }        .slide-drawer-header {            display: flex;            justify-content: space-between;            align-items: center;            padding: 16px 20px;            border-bottom: 1px solid #e6e9ed;            background-color: #f5f7fa;        }        .slide-drawer-title {            font-size: 16px;            font-weight: 600;        }        .slide-drawer-close {            cursor: pointer;            color: #909399;            font-size: 16px;            padding: 5px;        }        .slide-drawer-close:hover {            color: #409EFF;        }        .slide-drawer-body {            padding: 20px;            flex: 1;            overflow-y: auto;        }        /* 過渡動畫 */        .fade-enter-active, .fade-leave-active {            transition: opacity 0.3s;        }        .fade-enter, .fade-leave-to {            opacity: 0;        }        .slide-right-enter-active, .slide-right-leave-active {            transition: transform 0.3s ease-out;        }        .slide-right-enter, .slide-right-leave-to {            transform: translateX(100%);        }        /* 響應式設計 */        @media (max-width: 768px) {            .button-group {                flex-direction: column;                align-items: center;            }            .slide-drawer {                width: 85% !important;            }        }    </style></head><body>    <div id="app">        <div class="container">            <h1>右側滑出抽屜組件</h1>                    <div class="control-panel">                <div class="button-group">                    <el-button type="primary" @click="openDrawer">打開抽屜</el-button>                    <el-button type="success" @click="openDrawer(0.25)">25%寬度</el-button>                    <el-button type="warning" @click="openDrawer(0.5)">50%寬度</el-button>                    <el-button type="danger" @click="openDrawer(0.75)">75%寬度</el-button>                </div>            </div>            <div class="demo-content">                <p>這是一個使用封裝好的右側抽屜組件示例。</p>                <p>組件采用簡潔的設計風格，支持自定義寬度和內容。</p>                <el-button type="text" @click="openDrawer">立即嘗試打開抽屜</el-button>                <div class="status-info" v-if="statusMessage">                    {{ statusMessage }}                </div>            </div>        </div>        <!-- 抽屜組件 -->        <slide-drawer            :visible="drawerVisible"            :width-ratio="drawerRatio"            title="右側抽屜"            @close="handleClose">            <div class="drawer-content">                <p>這是從右側滑出的抽屜內容</p>                <p>當前寬度: {{ Math.round(drawerRatio * 100) }}%</p>                <p>您可以在這里放置任何需要的內容</p>                <el-divider></el-divider>                <p>支持各種HTML元素和組件</p>            </div>        </slide-drawer>    </div>    <script>        // 定義抽屜組件        Vue.component('slide-drawer', {            props: {                visible: Boolean,                title: {                    type: String,                    default: '抽屜默認標題'                },                widthRatio: {                    type: Number,                    default: 0.3,                    validator: value => value > 0 && value <= 1                },                customStyle: {                    type: Object,                    default: function() {                        return {};                    }                }            },            computed: {                drawerStyle() {                    return {                        width: `${this.widthRatio * 100}%`,                        ...this.customStyle                    };                }            },            methods: {                close() {                    this.$emit('close');                },                handleMaskClick() {                    this.close();                }            },            template: `                <div v-if="visible">                    <transition name="fade">                        <div class="slide-drawer-mask" @click="handleMaskClick"></div>                    </transition>                    <transition name="slide-right">                        <div class="slide-drawer" :style="drawerStyle">                            <div class="slide-drawer-header">                                <span class="slide-drawer-title">{{ title }}</span>                                <span class="slide-drawer-close" @click="close">                                    <i class="el-icon-close"></i>                                </span>                            </div>                            <div class="slide-drawer-body">                                <slot></slot>                            </div>                        </div>                    </transition>                </div>            `        });        new Vue({            el: '#app',            data() {                return {                    drawerVisible: false,                    drawerRatio: 0.3,                    statusMessage: ''                };            },            methods: {                openDrawer(ratio) {                    if (ratio) {                        this.drawerRatio = ratio;                    }                    this.drawerVisible = true;                },                handleClose() {                    this.drawerVisible = false;                    this.statusMessage = '抽屜已關閉';                    setTimeout(() => {                        this.statusMessage = '';                    }, 2000);                }            }        });    </script></body></html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>右側滑出抽屜組件</title>
    <link rel="stylesheet" >
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background: linear-gradient(135deg, 
#f5f7fa
 0%, 
#c3cfe2
 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
            color: 
#2c3e50
;
        }
        .container {
            max-width: 800px;
            width: 100%;
            text-align: center;
        }
        h1 {
            margin-bottom: 20px;
            font-weight: 500;
        }
        .description {
            margin-bottom: 30px;
            color: 
#5e6d82
;
            line-height: 1.6;
        }
        .control-panel {
            background: white;
            border-radius: 8px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        .button-group {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .demo-content {
            background: white;
            border-radius: 8px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
        }
        .demo-content p {
            margin-bottom: 15px;
            color: 
#5e6d82
;
        }
        .status-info {
            margin-top: 20px;
            padding: 12px;
            background: 
#f0f9ff
;
            border-radius: 4px;
            border-left: 4px solid 
#409EFF
;
        }
        /* 抽屜組件樣式 */
        .slide-drawer-mask {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 9998;
        }
        .slide-drawer {
            position: fixed;
            top: 0;
            right: 0;
            height: 100%;
            background: white;
            box-shadow: -2px 0 12px rgba(0, 0, 0, 0.15);
            display: flex;
            flex-direction: column;
            z-index: 9999;
        }
        .slide-drawer-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid 
#e6e9ed
;
            background-color: 
#f5f7fa
;
        }
        .slide-drawer-title {
            font-size: 16px;
            font-weight: 600;
        }
        .slide-drawer-close {
            cursor: pointer;
            color: 
#909399
;
            font-size: 16px;
            padding: 5px;
        }
        .slide-drawer-close:hover {
            color: 
#409EFF
;
        }
        .slide-drawer-body {
            padding: 20px;
            flex: 1;
            overflow-y: auto;
        }
        /* 過渡動畫 */
        .fade-enter-active, .fade-leave-active {
            transition: opacity 0.3s;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
        .slide-right-enter-active, .slide-right-leave-active {
            transition: transform 0.3s ease-out;
        }
        .slide-right-enter, .slide-right-leave-to {
            transform: translateX(100%);
        }
        /* 響應式設計 */
        @media (max-width: 768px) {
            .button-group {
                flex-direction: column;
                align-items: center;
            }
            .slide-drawer {
                width: 85% !important;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>右側滑出抽屜組件</h1>        
            <div class="control-panel">
                <div class="button-group">
                    <el-button type="primary" @click="openDrawer">打開抽屜</el-button>
                    <el-button type="success" @click="openDrawer(0.25)">25%寬度</el-button>
                    <el-button type="warning" @click="openDrawer(0.5)">50%寬度</el-button>
                    <el-button type="danger" @click="openDrawer(0.75)">75%寬度</el-button>
                </div>
            </div>
            <div class="demo-content">
                <p>這是一個使用封裝好的右側抽屜組件示例。</p>
                <p>組件采用簡潔的設計風格，支持自定義寬度和內容。</p>
                <el-button type="text" @click="openDrawer">立即嘗試打開抽屜</el-button>
                <div class="status-info" v-if="statusMessage">
                    {{ statusMessage }}
                </div>
            </div>
        </div>
        <!-- 抽屜組件 -->
        <slide-drawer
            :visible="drawerVisible"
            :width-ratio="drawerRatio"
            title="右側抽屜"
            @close="handleClose">
            <div class="drawer-content">
                <p>這是從右側滑出的抽屜內容</p>
                <p>當前寬度: {{ Math.round(drawerRatio * 100) }}%</p>
                <p>您可以在這里放置任何需要的內容</p>
                <el-divider></el-divider>
                <p>支持各種HTML元素和組件</p>
            </div>
        </slide-drawer>
    </div>
    <script>
        // 定義抽屜組件
        Vue.component('slide-drawer', {
            props: {
                visible: Boolean,
                title: {
                    type: String,
                    default: '抽屜默認標題'
                },
                widthRatio: {
                    type: Number,
                    default: 0.3,
                    validator: value => value > 0 && value <= 1
                },
                customStyle: {
                    type: Object,
                    default: function() {
                        return {};
                    }
                }
            },
            computed: {
                drawerStyle() {
                    return {
                        width: `${this.widthRatio * 100}%`,
                        ...this.customStyle
                    };
                }
            },
            methods: {
                close() {
                    this.$emit('close');
                },
                handleMaskClick() {
                    this.close();
                }
            },
            template: `
                <div v-if="visible">
                    <transition name="fade">
                        <div class="slide-drawer-mask" @click="handleMaskClick"></div>
                    </transition>
                    <transition name="slide-right">
                        <div class="slide-drawer" :style="drawerStyle">
                            <div class="slide-drawer-header">
                                <span class="slide-drawer-title">{{ title }}</span>
                                <span class="slide-drawer-close" @click="close">
                                    <i class="el-icon-close"></i>
                                </span>
                            </div>
                            <div class="slide-drawer-body">
                                <slot></slot>
                            </div>
                        </div>
                    </transition>
                </div>
            `
        });
        new Vue({
            el: '
#app
',
            data() {
                return {
                    drawerVisible: false,
                    drawerRatio: 0.3,
                    statusMessage: ''
                };
            },
            methods: {
                openDrawer(ratio) {
                    if (ratio) {
                        this.drawerRatio = ratio;
                    }
                    this.drawerVisible = true;
                },
                handleClose() {
                    this.drawerVisible = false;
                    this.statusMessage = '抽屜已關閉';
                    setTimeout(() => {
                        this.statusMessage = '';
                    }, 2000);
                }
            }
        });
    </script>
</body>
</html>