elementui-drawer模板

最新推荐文章于 2024-03-04 13:27:47 发布

清风拂山感

最新推荐文章于 2024-03-04 13:27:47 发布

阅读量1.7k

点赞数

文章标签： elementui javascript ecmascript

本文链接：https://blog.csdn.net/qq_42730111/article/details/131660534

版权

该文章展示了如何在Vue.js应用中创建并控制一个全屏的el-drawer组件。代码示例包括数据绑定、方法处理（如初始化和关闭drawer）以及自定义样式，如修改header的字体大小、对齐方式和关闭按钮的背景色。

摘要由CSDN通过智能技术生成

1、效果图

在这里插入图片描述

2、上代码

<template>
    <div>
        <el-drawer
            size="100%"
            :visible.sync="drawer"
            style="position: absolute;"
            class="details"
            :modal-append-to-body="false"
            :modal = "false"
            :before-close="handleClose">
            
        </el-drawer>
    </div>
</template>
<script>
export default {
    data() {
        return {
            drawer: false,
        }
    },
    methods: {
        /** 初始化 */
        init(){
            this.drawer = true
        },
        /** 关闭回调*/
        handleClose(){
            this.drawer = false
        }
    }
}
</script>
<style lang="scss" scoped>
    ::v-deep .el-drawer__header {
        font-size: 22px;
        text-align: center;
        margin-bottom: 16px;
        padding: 0;
        .el-drawer__close-btn{
            background-color: rgb(255, 77, 79);
            color: white;
        }
    }
    ::v-deep .el-drawer__body {
        padding: 0px;
    }
    .details {
        width: 80%;
        margin-right: 0px;
        margin-left: 20%;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    }
</style>