Vue 对element-ui的Popover进行二次封装

效果：

代码：

全局封装（复用）

<template>
  <div class="screen">
    <el-popover
      :placement="placement"
      :width="screenWidth"
      trigger="click"
      popper-class="popperScreen"
      :title="title"
      ref="popoverSH"
    >
      <div>
        <slot></slot>
      </div>
      <div style="text-align: center; margin: 10px 0 0 0">
        <el-button class="smallBtn" @click="determine">确定</el-button>
        <el-button class="skyBtn" @click="cancel">重置</el-button>
      </div>
      <div slot="reference" class="selectStyle mt5 ml10">{{ screenTitle }}</div>
    </el-popover>
  </div>
</template>
<script>
export default {
  name: "gb-screen",
  data() {
    return {}
  },
  props: {
    // 箭头位置
    placement: {
      type: String,
      default: 'bottom-start'
    },
    // 宽度
    screenWidth: {
      type: String,
      default: '400'
    },
    // 标题
    title: {
      type: String,
      default: '请选择筛选条件'
    },
    // 按钮标题
    screenTitle: {
      type: String,
      default: '请筛选'
    }
  },
  methods: {
    determine() {
      this.$emit('submitScreenData')
    },
    cancel() {
      this.$emit('resetScreenData')
    }
  }
}
</script>
<style lang="less">
.el-popover.popperScreen {
  margin-top: 5px !important;
}
</style>

使用

1、引入

import gb-screen from './gb-screen'  // (引入路径)

2、注册

components: { 
    gb-screen,
},

3、调用代码

<template>
   <gb-screen ref="customerInvoice" :screenWidth="screenWidth" @resetScreenData="resetScreenData" @submitScreenData="submitScreenData">
   </gb-screen>
</template>

data(){
	return {
		screenWidth: 'calc(100vw - 600px)', // 筛选框
    }
},
methods:{
	submitScreenData(){
		this.$refs.customerInvoice.$refs.popoverSH.doClose()
	},
	resetScreenData() {
        this.$refs.customerInvoice.$refs.popoverSH.doClose()
    }
}