Vue 使用 ElementUi el-upload 手动上传文件限制上传文件总大小

<el-upload
  class="upload-demo"
  action="#"
  multiple
   :auto-upload="false"
  list-type="picture-card"
  :file-list="modelForm.fileList"
  :show-file-list="false"
  :limit="3"
  :on-change="handleChange"
  >
  <el-button size="small" type="primary">点击上传文件</el-button>
</el-upload>

// 文件状态改变时
handleChange(file) {
	// 解构获取uid
	let { uid } = file
	
	// 计算总文件大小
	const totalSize = this.modelForm.fileList.reduce(
        (total, item) => total + item.size,
        0
      )
      // (已上传文件大小 + 当前上传文件大小)大于100MB时
      if (totalSize + size > 1024 * 1024 * 100) {
        this.$message.warning('总文件大小不能超过100Mb')
        const selectFileList = this.modelForm.fileList.filter(item => 		            {
          return item.uid != uid
        })
        this.modelForm.fileList = selectFileList
        return
      }
}
<think>好的,用户想了解ElementUIel-tar的用法或属性值。首先,我需要确认用户提到的组件名称是否正确,因为ElementUI官方文档中没有el-tar这个组件。常见的组件有el-tag(标签)、el-tabs(选项卡)、el-tab-pane(选项卡项)等,可能用户是打错了名字。 接下来,我会检查用户提供的引用内容,看看是否有提到相关组件。引用[1]到[4]主要涉及el-uploadel-col、以及Vue 3中的一些变更,但没有提到el-tar。这可能进一步支持用户可能存在拼写错误。 考虑到用户可能指的是el-tag(标签组件),因为名称接近。接下来,我需要回顾el-tag的属性和用法,确保提供准确的信息。例如,el-tag的type属性用于不同颜色样式,closable属性控制是否可关闭,hit显示边框,effect设置主题等。 同时,用户可能需要使用示例代码来更好地理解如何在实际项目中应用el-tag。需要确保代码符合VueElementUI的语法规范,并注意引用中的注意事项,比如Vue 3中某些方法已被弃用,但用户的问题可能主要围绕ElementUI,所以可能需要确认版本兼容性。 另外,用户可能还想知道el-tag的常见应用场景,比如状态标记、分类标签等,以及如何通过事件处理实现交互功能,比如关闭标签时触发的事件。需要覆盖这些方面,确保回答全面。 最后,生成的相关问题应该帮助用户进一步探索el-tag的使用,比如属性配置、事件处理、样式自定义等,以及可能遇到的常见问题,如动态生成标签或与后端交互。</think>ElementUI 中不存在 `el-tar` 组件,可能是组件名称拼写错误。根据常见组件名称推测,你可能指的是 **`el-tag`(标签组件)** 或 **`el-tabs`(选项卡组件)**。以下分别说明两者用法: --- ### 一、`el-tag`(标签组件) 用于标记和分类的展示型组件,常用于状态标识或关键词展示。 #### 核心属性 1. **`type`**: 标签类型,可选值 `success/info/warning/danger` 示例:`<el-tag type="success">完成</el-tag>` ![不同type的标签样式](https://element.eleme.cn/2.11/static/type-tag.png)[^4] 2. **`closable`**: 是否显示关闭按钮(布尔值),需配合 `@close` 事件使用 示例:`<el-tag closable @close="handleClose">可关闭标签</el-tag>` 3. **`hit`**: 是否显示描边效果(布尔值) 示例:`<el-tag hit>描边标签</el-tag>` 4. **`color`**: 自定义标签颜色(支持十六进制或RGB值) 示例:`<el-tag color="#f00">红色标签</el-tag>` 5. **`effect`**: 主题,可选值 `dark/light/plain`(默认 `light`) 示例:`<el-tag effect="dark">深色主题</el-tag>` #### 基础用法 ```html <el-tag type="warning" closable @close="handleClose" > 待处理 </el-tag> ``` --- ### 二、`el-tabs`(选项卡组件) 用于内容分组的容器组件,常与 `el-tab-pane` 配合使用。 #### 核心属性 1. **`v-model`**: 绑定当前激活的选项卡名称 示例:`<el-tabs v-model="activeTabName">` 2. **`type`**: 样式类型,可选值 `card/border-card` 示例:`<el-tabs type="border-card">` 3. **`closable`**: 是否可关闭(仅对 `type="card"` 有效) 示例:`<el-tab-pane closable label="Tab1">` 4. **`lazy`**: 是否延迟渲染未激活的标签内容(布尔值,优化性能) 示例:`<el-tab-pane lazy>...</el-tab-pane>` #### 基础用法 ```html <el-tabs v-model="activeTab"> <el-tab-pane label="用户管理" name="user"> 用户列表内容 </el-tab-pane> <el-tab-pane label="配置管理" name="config"> 配置表单内容 </el-tab-pane> </el-tabs> ``` --- ### 三、注意事项 1. **事件绑定**:`el-tag` 的关闭事件需通过 `@close` 手动处理,需在 methods 中定义对应方法 2. **响应式布局**:若需要标签与其他组件(如 `el-col`)配合实现响应式布局,需遵循栅格系统规则[^2] 3. **版本兼容**:Vue 3 中使用 Element Plus 而非 ElementUI,需注意 API 差异[^1] ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值