vue slot 透传

开发维护的项目中使用的 ant-design-vue vue2 项目中 Select Cascader 等组件 下拉框 会随着页面滚动而滚动 为了解决此问题 实现 组件重写:

import { Select } from 'ant-design-vue' 

Select.name = 'AntSelect'  // 重命名全局 a-select 为 ant-select

Vue.use(Select)

新建 select.antd.vue 文件：

<template>
  <ant-select
    v-bind="$attrs"
    v-on="$listeners"
    :getPopupContainer="(triggerNode) => triggerNode.parentNode"
  >
    <!-- 实现 slot 透传 -->
    <template v-for="slot in Object.entries(this.$slots)" :slot="slot[0]">
      <slot :name="slot[0]"></slot>
    </template>
  </ant-select>
</template>
<script>
export default {}
</script>

新建 custom.antd.js 文件 用来管理并提供插件

import Select from './select.antd'

export default {
  install: function (Vue) {
    Vue.component('a-select', Select)
   
  }
}

注册

import Vue from vue
import Custom from './custom.antd'

Vue.use(Custom)