antd design pro of vue a-drawer自定义封装
因为最近项目中频繁使用到抽屉组件，所有封装一个自定义的抽屉，在项目中可以少些很多重复代码的同时，改动时也能更加方便。这里记录一下。
这里使用antd design vue版的ui组件库，包含a-drawer、slot、$emit等
- 新建抽屉组件文件DrawerAssembly.vue
- 代码
<template>
<div class="drawerAssembly">
<a-drawer
:visible="visible"
:title="title"
:width="width"
:placement="placement"
:headerStyle="{background:'#dce9ff', position:'absolute',width:'100%',height:'52px',zIndex:30}"
:footer="null"
:footer-style="{ display:'flex' }"
:bodyStyle="{ padding: '0px', background: '#fff' }"
@close="onClose"
>
<div class="content" style="margin-top:52px;width:100%;margin-bottom: 60px;">
<slot name="content"></slot>
</div>
<slot name="footer">
<div class="footer" :style="{ 'display': footerFlag?'':'none' }">
<sheet-button type="cancel" title="取消" :style="{ marginRight: '8px' }" @click="onClose"> </sheet-button>
<sheet-button type="create" title="保存" :style="{ marginRight: '10px' }" @click="handleOk()"> </sheet-button>
</div>
</slot>
</a-drawer>
</div>
</template>
<script>
import { SheetButton } from '@/components'
export default {
name: 'DrawerAssembly',
components: {
SheetButton
},
props: {
type: {
type: String,
default: 'success'
},
placement: {
type: String,
default: 'right'
},
width: {
type: String,
default: '800px'
},
title: {
type: String,
default: '这是标题'
}
},
data () {
return {
visible: false,
footerFlag: true
}
},
mounted () {},
created () {},
methods: {
// 编辑方法--- 带页脚
edit () {
this.visible = true
this.footerFlag = true
},
// 查看方法--不带页脚
see () {
this.visible = true
this.footerFlag = false
},
onClose () {
this.visible = false
},
// 点击提交按钮---子组件向父组件传递函数
handleOk () {
this.$emit('submit')
}
}
}
</script>
<style scoped lang="less">
.DrawerAssembly{
position: relative;
width: 100%;
height: 100%;
}
.content{
width: 100%;
height: 100%;
}
.footer {
background: #666;
width: 100%;
height: 60px;
background: #ffffff;
display: flex;
align-items: center;
padding: 10px;
border-top: 1px solid #e4ebf0;
justify-content: flex-end;
position: absolute;
bottom: 0px;
left: 0;
z-index: 30;
}
</style>
- 使用
<drawer-assembly
:width="'380px'"
:title="'系统设置'"
ref="drawerAssembly"
@submit="onCreatePostFinished"
>
<template v-slot:content>
<div></div>
</template>
</drawer-assembly>
import DrawerAssembly from '@/components/DrawerAssembly/DrawerAssembly'
components: {
DrawerAssembly
},
// 子组件回传的事件
onCreatePostFinished () {
console.log('抽屉提交按钮回传函数，可以再次完成逻辑')
},
这里使用具名插槽的方法可以自定义中间内容部分，页脚可以选择默认样式也可以使用自定义的样式，抽屉组件中的edit和see方法可控制是否显示默认页脚，父组件中是一个ref的方式调用子组件，子组件提交按钮通过emit方法回传点击事件函数给父组件，父组件监听回传函数完成逻辑交互，这里的父子传值通过props，当然也可以使用slot的方式
slot插槽传值 这里放一个网上的例子
//子组件 ： (假设名为：ebutton)
<template>
<div class= 'button'>
<button> </button>
<slot name= 'one' :value1='child1'> 这就是默认值1</slot> //绑定child1的数据
<slot :value2='child2'> 这就是默认值2 </slot> //绑定child2的数据，这里我没有命名slot
</div>
</template>
new Vue({
el:'.button',
data:{
child1:'数据1',
child2:'数据2'
}
})
//父组件：（引用子组件 ebutton）
<template>
<div class= 'app'>
<ebutton>
<template v-slot:one = 'slotone'>
{{ slotone.value1 }} // 通过v-slot的语法 将子组件的value1值赋值给slotone
</template>
<template v-slot:default = 'slottwo'>
{{ slottwo.value2 }} // 同上，由于子组件没有给slot命名，默认值就为default
</template>
</ebutton>
</div>
</template>
