公司发展规划范文_怎么学电商从零开始_百度招聘2022年最新招聘_网址关键词查询网站

直接上代码

<template><el-uploadclass="lth_upload":action="`${baseUrl}/file/upload`":headers="uploadHeader"v-bind="$attr"><template v-for="(_, key) in $slots" #[key]="valueData"><slot :name="key" v-bind="valueData || {}"></slot></template></el-upload>
</template>
<script setup lang="ts">
import { ref, useAttrs, useSlots } from "vue";
import { uploadHeader } from "@/utils/uploadHeader";
const $attr = useAttrs();
const $slot = useSlots();
const baseUrl = import.meta.env.VITE_BASE_API;
</script>
<style scoped lang="scss"></style>

通过useAttrs()获取组件上所有的属性，使用v-bind="$attr"和vue3的透传将其绑定在组件上，通过useSlots()方法来获取所传入的所有插槽，通过动态生成的方式，来实现二次组件的插槽系统

使用示例

  		<LthUploadv-model:file-list="ruleForm.originImgList":accept="['.png', '.jpg', '.jpeg', '.gif']"list-type="picture-card":before-upload="beforeUpload":limit="5"><el-icon><Plus /></el-icon><template #tip><div class="el-upload__tip">每张图片大小限制5MB，最多上传5张</div></template></LthUpload>