呈现效果：
文件目录结构
index.vue
<template>
<div>
...
...
<el-button class="filter-item" type="primary" size="small" @click="addCar"> 新增 </el-button>
...
...
<!-- 新增 -->
<add-car
:type="drawer.type"
:drawer-visible="drawer.isVisible"
@close="close"
@success="getPage"
>
</add-car>
</div>
</template>
<script>
import AddCar from "./addCar.vue";
exprot default{
components: {
AddCar,
},
data(){
return {
drawer:{//控制抽屉隐藏与显示
isVisible:false,
type:'add',//类型为新增
},
}
},
methods:{
addCar(){
this.drawer.isVisible = true;
},
//关闭抽屉
close(){
this.drawer.isVisible = false;
},
//分页查询
getPage(){
...
...
...
},
}
}
</script>
addCar.vue
<template>
<div>
<!-- 新增 -->
<el-drawer :title="title" :visible.sync="isVisible" direction="rtl">
<span>我来啦!</span>
<div class="drawer-footer-wrap">
<div class="drawer-footer">
<el-button type="danger" @click="close" plain size="small">取 消</el-button>
<el-button type="primary" @click="submitAdd" plain size="small">提 交</el-button>
</div>
</div>
</div>
</el-drawer>
</div>
</template>
<script>
export default {
props: {
drawerVisible: {
type: Boolean,
default: false,
},
type: {
type: String,
default: "add",
},
},
data() {
return {
businessCode: "12334",
carTypelnfoSaveDto:{},//新增接口请求参数
};
},
mounted() {},
computed: {
isVisible: {
get() {
return this.drawerVisible;
},
set() {
this.close();
this.reset();
},
},
title() {
return this.type === "add" ? "新增" : "编辑";
},
},
methods: {
//关闭抽屉
close() {
this.$emit("close");
},
//抽屉关闭后需要进行清空的操作
reset() {
this.businessCode = "";
},
//点击提交按钮触发的回调函数
submitAdd() {
...
this.$emit('success')//新增成功后重新调用分页查询接口进行刷新数据
this.close();//新增成功后抽屉关闭
...
},
};
</script>
<style lang="less" scoped>
.drawer-wrap-self {
height: calc(100vh - 100px);
position: relative;
.drawer-footer-wrap {
width: 100%;
position: absolute;
bottom: -20px;
right: 0;
height: 60px;
display: flex;
align-items: center;
border-top: 1px solid #f2f2f2;
background-color: #fff;
z-index: 10;
.drawer-footer {
text-align: center;
width: 100%;
}
}
}
</style>
