Vue3中Element-Plus的el-upload限制只上传一个文件(最简单明了)
使用Proxy代替defineProperty实现响应式。重写虚拟DOM的实现和Tree-Sharking。Composition API(组合api)移除keyCode支持作为v-on的修饰符。vue3.0更好的支持TypeScript。初次渲染快55%,更新渲染块133%watch与watchEffect。data选项应始终被声明为一个函数。provide和inject。3.拥抱TypeScr
·
核心技术:
//限制只上传一个文件
function handleChangePic(file:any,fileList:any){
if (fileList.length > 1) {
fileList.splice(0, 1);
}
}
汇总
<template>
<div>
<el-button type="primary" disabled @click="doClear">清空上传文件</el-button>
</div>
<div>
<el-upload
class="upload-demo"
drag
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
multiple
:on-change="handleChangePic"
>
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
<div class="el-upload__text">
Drop file here or <em>click to upload</em>
</div>
<template #tip>
<div class="el-upload__tip">
jpg/png files with a size less than 500kb
</div>
</template>
</el-upload>
</div>
</template>
<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
//限制只上传一个文件
function handleChangePic(file:any,fileList:any){
if (fileList.length > 1) {
fileList.splice(0, 1);
}
}
</script>
获取文章流量推荐曝光度随便胡说八道两句
vue3.0带来了什么
1.性能的提升
打包大小减少41%
初次渲染快55%,更新渲染块133%
内存减少54%
........
2.源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Sharking
......
3.拥抱TypeScript
vue3.0更好的支持TypeScript
4.新的特性
Composition API(组合api)
。 setup配置
。ref与reactive
。watch与watchEffect
。 provide和inject
。 .......
新的内置组件
。 Fragment
。Teleport
。Suspense
其他改变
。新的生命周期钩子
。data选项应始终被声明为一个函数
。移除keyCode支持作为v-on的修饰符
更多推荐
已为社区贡献7条内容
所有评论(0)