el-drawer的入门学习

自律最差的编程狗

已于 2022-08-22 14:16:05 修改

阅读量8k

点赞数

分类专栏： element-ui Vue 文章标签： elementui

于 2022-08-22 14:15:43 首次发布

本文链接：https://blog.csdn.net/qq_40765784/article/details/126464517

版权

element-ui 同时被 2 个专栏收录

43 篇文章

订阅专栏

Vue

9 篇文章

订阅专栏

本文介绍了Element UI库中的el-drawer组件的基础使用，包括其与el-dialog的区别，如何设置title、visible状态、direction属性以及before-close回调。通过实例演示了如何创建左右、上下弹出的抽屉，并展示了附带子抽屉的配置方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-drawer的入门学习

适用场景

el-drawer与el-dialog有几乎相同的API，不同的是el-dialog是居中显示，el-drawer可以根据不同的方向，在上下左右弹出显示

知识点

title属性为标题
visible.sync为true显示弹框
direction属性指定抽屉弹出的方向，上ttb、下btt、左ltr、右rtl
before-close属性为关闭弹框前的钩子
append-to-body为 true作用在子抽屉上

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-radio-group v-model="direction">
            <el-radio label='ltr'>左边</el-radio>
            <el-radio label='rtl'>右边</el-radio>
            <el-radio label='ttb'>上边</el-radio>
            <el-radio label="btt">下边</el-radio>
        </el-radio-group>
        <el-button @click='showTable'>显示抽屉表格</el-button>
        <el-drawer title="抽屉表格" :visible.sync="visible" :direction="direction" :before-close="handleClose">
            <el-table :data="tableData">
                <el-table-column prop="userName" label="用户名"></el-table-column>
                <el-table-column prop="password" label="密码"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="showDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer title="抽屉表单" :visible.sync="innervisible" :direction="direction" :append-to-body="true">
                <el-form :model="formData" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="formData.userName" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="formData.password" disabled></el-input>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </el-drawer>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                direction: 'rtl',
                visible: false,
                innervisible: false,
                tableData: [
                    { userName: '张三', password: 'zhangsan' },
                    { userName: '李四', password: 'lisi' },
                ],
                formData: {}
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm("确定退出吗？").then(_ => { this.visible = false; done() }).catch(_ => { });
            },
            showDetail(row) {
                this.innervisible = true;
                this.formData = row;
            },
            showTable() {
                this.visible = true;
            }
        }
    })
</script>