当前位置：首页 > article >正文

vue3二次封装UI组件

article 2024/11/1 21:46:00

直接上代码

<template>
  <el-upload
    class="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()方法来获取所传入的所有插槽，通过动态生成的方式，来实现二次组件的插槽系统

使用示例

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