el-drawer的入门学习

适用场景

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

知识点

  1. title属性为标题
  2. visible.sync为true显示弹框
  3. direction属性指定抽屉弹出的方向，上ttb、下btt、左ltr、右rtl
  4. before-close属性为关闭弹框前的钩子
  5. 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>

官网

el-drawer学习官网

# elementui
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

华为云开发者桌面全新发布CodeArts IDE for Python

avatar 华为云开发者联盟
cover

Sermant在异地多活场景下的实践

avatar 华为云开发者联盟
cover

理论+实践，带你了解分布式训练

avatar 华为云开发者联盟