默认情况下选中文件点击backspace 会删掉,如何阻止?
可以在当前页面禁止退格键响应
js 屏蔽Backspace事件
function document.onkeydown() {
if (event.keyCode == 8) {
if (document.activeElement.type == "text") {
if (document.activeElement.readOnly == false)
return true;
}
return false;
}
}
<script setup>
import {onMounted, reactive, ref} from "vue"
const files = ref([]);
const params = reactive({})
// 预览文件
const dialog = reactive({
show: false,
url: '',
title: ''
})
const previewHandle = (file) => {
dialog.url = file.url
dialog.title = file.name
dialog.show = true
}
// 删除文件
const beforeRemoveHandle = (file, files) => {
return false
}
const removeHandle = (file) => {
files.value = files.value.filter(v => v.uid !== file.uid)
}
onMounted(() => {
})
</script>
<template>
<div class="resource">
<el-upload
v-model:file-list="files"
class="upload"
drag
multiple
:auto-upload="false"
list-type="picture"
:before-remove="beforeRemoveHandle"
>
<el-icon class="el-icon--upload">
<upload-filled/>
</el-icon>
<div class="el-upload__text">
拖找文件 或者 <em>点击选择文件</em>
</div>
<template #tip>
<div class="el-upload__tip">
每个文件大小不超过2M,总共大小不超过50M
</div>
</template>
<template #file="{file}">
<div class="file-item">
<div class="img" @click="previewHandle(file)">
<img :src="file.url"/>
</div>
<div class="name" @click="previewHandle(file)">{{ file.name }}</div>
<div class="params">
<el-space>
<el-input v-model="params[file.name+'.name']" placeholder="名称"/>
<el-input v-model="params[file.name+'.category']" placeholder="类别"/>
<el-input v-model="params[file.name+'.tags']" placeholder="标签"/>
</el-space>
</div>
<div class="icon" @click="removeHandle(file)">
<el-icon size="16" class="el-icon--delete">
<delete/>
</el-icon>
</div>
</div>
</template>
</el-upload>
<el-dialog v-model="dialog.show" :title="dialog.title">
<template #default>
<div style="display: flex;justify-content: center;align-items: center">
<img :src="dialog.url" alt="图片预览"/>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.resource {
width: 100%;
height: 100%;
.upload {
.file-item {
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.img {
cursor: pointer;
width: 70px;
img {
width: 70px
}
}
.name {
cursor: pointer;
width: calc(100% - 600px);
font-size: 16px;
margin-left: 8px;
}
.params {
width: 500px;
:deep(.el-input) {
width: 33%;
}
}
.icon {
cursor: pointer;
width: 32px;
display: flex;
justify-content: center;
align-items: center;
color: red;
}
}
}
}
</style>
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
:before-remove="()=>false"
不过这样的话是禁止所有删除哦。