antd design pro of vue a-drawer自定义封装

antd design pro of vue a-drawer自定义封装

因为最近项目中频繁使用到抽屉组件，所有封装一个自定义的抽屉，在项目中可以少些很多重复代码的同时，改动时也能更加方便。这里记录一下。

这里使用antd design vue版的ui组件库，包含a-drawer、slot、$emit等

1. 新建抽屉组件文件DrawerAssembly.vue
2. 代码

<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>

3. 使用

 <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插槽传值 这里放一个网上的例子

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>