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>