<template>
<Drawer
class="Drawer"
:title="title"
v-model="lookShow_"
@on-visible-change="on_visible_change"
:closable="closable"
:width="width"
:mask-closable="closable"
>
<div class="DrawerContent">
<slot name="content" />
</div>
<div class="demo-drawer-footer">
<slot name="footerBtn" />
</div>
</Drawer>
</template>
<script>
export default {
name: "DrawerMsg",
props: {
lookShow: {
type: Boolean,
default: false
},
closable: Boolean,
title: String,
width: String,
on_visible_change: {
type: Function,
default: () => {}
}
},
computed: {
lookShow_: {
get() {
return this.lookShow;
},
set(val) {
return this.$emit("changeLookShow", val);
}
}
},
methods: {
closeDrawer() {
this.$emit("closeDrawer");
}
}
};
</script>
<style lang="less" scoped>
.Drawer /deep/ .ivu-drawer-body {
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
}
.Drawer /deep/ .ivu-drawer-header-inner {
color: #5a65b0;
font-size: 16px;
}
.demo-drawer-footer {
padding: 30px 0px 10px 0;
text-align: center;
height: 100px;
position: unset;
}
.demo-drawer-footer /deep/ .ivu-btn {
width: 150px;
height: 40px;
margin-right: 10px;
border-radius: 2px;
}
.DrawerContent {
overflow: auto;
padding: 24px;
flex: 1;
}
</style>
vue中搭配iview封装公共弹窗统一前端UI框架
最新推荐文章于 2024-08-07 21:53:27 发布