vue3-element-dict、vue2-element-dict字典包问题可私信找我，免费指导，本公众号对您有所帮助，记得多分享多转发~已帮助100+名同学完成字典包的配置使用！如需其他组件库实现字典包效果，也可私信。
前言
大家好，我是沈小布，勤能补拙，实践是检验真理的唯一标准是我的座右铭，帮助同行人员少走弯路，成为CV工程师是我的初心。
背景
相信大家或多或少都会对某个XXX的组件库进行二开从而实现项目所需要的效果，但是却经常因为对组件进行了二开，导致原来组件库的属性、事件及插槽无法使用的情况。
实现
其实对于属性及事件的穿透，绝大多数同学应该是很清楚如何实现的，无非就是v-on=”$listeners”v-bind=”$attrs”,当然vue3仅需v-bind=”$attrs”。
二开组件库的组件时，插入上面加粗的代码，即可实现属性及事件的穿透，但是偶尔有时候，二开的组件还需要支持原生组件slot插槽的穿透，那该如何实现呢？
vue2实现插槽穿透
二开组件库对于插槽的穿透，价值非常高，百度上很难搜索到，如果您也觉得对您有所帮助vue组件继承，有钱的捧个钱场，没钱的捧个人场，帮忙转发分享。
上干货，以el-cascader为例开发一个bu-cascader组件，实现展示层级子级个数的功能及解决动态加载数据时，加载动画在IE浏览器上样式上下不居中问题。
<template>
<el-cascader ref="cascader" v-on="$listeners" v-bind="$attrs">
<template v-for="(slot, key) in $scopedSlots" :slot="key" slot-scope="scope">
<slot :name="key" v-bind="scope"></slot>
</template>
<template v-for="(slot, key) in $slots" :slot="key">
<slot :name="key"></slot>
</template>
<template slot-scope="{ data }">
<div>
<span>{{ data[$attrs.props.label] }}</span>
<span v-if="data[$attrs.props.children] && showLength"> ({{ data[$attrs.props.children].length }}) </span>
</div>
</template>
</el-cascader>
</template>
<script>
export default {
name: "BuCascader",
props: {
showLength: {
type: Boolean,
default: true
}
},
methods: {
getRef() {
return this.$refs.cascader
}
}
}
</script>
<style scoped>
.el-cascader__tags .el-tag > span {
flex: auto !important;
}
.el-cascader-menu__wrap {
height: 300px !important;
}
.el-cascader-node__label {
flex: none !important;
width: 100% !important;
box-sizing: border-box !important;
}
.el-cascader-node .is-disabled + .el-cascader-node__label {
cursor: not-allowed !important;
}
.el-cascader-node__postfix,
.el-cascader-node__prefix {
top: 50% !important;
transform: translateY(-50%) !important;
line-height: 4px !important;
}
</style>使用组件
<bu-cascader v-model="area" filterable :props="areaProps" :options="areaTree">
<template #empty>
<span>关注微信公众号爆米花小布</span>
</template>
</bu-cascader>展示效果如下，可接受el-cascader组件的所有属性及事件，同时也接受其拥有的所有插槽，如示例中的empty插槽。
注意
el-cascader中插槽empty的作用是搜索不到匹配项时展示的样式，而不是选项数据为空时的empty展示。很多同学可能会为empty插槽设置无效感到懊恼，怀疑人生。所以这边注意，是搜索不到匹配项时展示的empty
vue3实现插槽穿透
vue3实现slot穿透的方式与vue2不同，vue3更加简洁vue组件继承，方便。以el-button为例，实现一个el-button-dict的组件。直接上代码。
<script lang="ts">
export default {
name: "ElButtonDict",
};
</script>
<script setup lang="ts">
import { computed, ref } from "vue";
import { GetLabelByCodeFilter } from "~/filters/dict";
const { value, dictType, judgeTypeFun, type } = defineProps({
value: {
type: [String, Number],
required: true
},
dictType: {
type: [String],
required: true
}, //请求的码表值
judgeTypeFun: {
type: Function,
default: () => {},
},
type: {
type: String,
default: "primary",
},
});
const judgeType = computed(() => {
if (!judgeTypeFun) {
return type;
}
return judgeTypeFun(value) || type;
});
const ElButtonDict = ref(null)
const getRef = () => {
return ElButtonDict.value
}
defineExpose({getRef})
</script>
<template>
<el-button ref="ElButtonDict" :type="judgeType" v-bind="$attrs">
<template
v-for="(item, key, index) in $slots"
:key="index"
v-slot:[key]="scope"
>
<slot :name="key" v-bind="scope"></slot>
</template>
<template #default>
{{ GetLabelByCodeFilter(value, dictType) }}
</template>
</el-button>
</template>使用如下
<el-button-dict ref="button1" size="small" dictType="PERSON_TYPE" :value="value1">
<template #icon>
<Search />
</template>
</el-button-dict>
<el-button-dict loading type="success" dictType="PERSON_TYPE" :value="value2">
<template #loading>
嘿嘿
</template>
</el-button-dict>展示效果如下
使用原生组件的方法
展细心的同学可以看出，写的组件都有写“getRef”这个方法，要使用原生组件的方法，先使用getRef()获取下原生组件实例对象就可以调用其方法啦。
———END———
限 时 特 惠：本站每日持续更新海量各大内部创业教程，一年会员只需128元，全站资源免费下载点击查看详情
站 长 微 信：jiumai99