fix 修复文件上传和图片上传组件max=1时的错误,并增加list属性控制是否显示列表

master
管理员 2 years ago
parent 19ff36d040
commit 3a3e4e1786

@ -6,7 +6,7 @@
</div> </div>
<input ref="fileInputRef" v-if="!props.disabled" :accept="props.accept" @change="fileInputChange" type="file" <input ref="fileInputRef" v-if="!props.disabled" :accept="props.accept" @change="fileInputChange" type="file"
style="position: absolute; top:-100vh;" :multiple="props.max != 1" /> style="position: absolute; top:-100vh;" :multiple="props.max != 1" />
<div class="list"> <div class="list" v-if="props.list">
<slot :list="list"> <slot :list="list">
<div v-for="(item, index) in data" :key="index" class="item" <div v-for="(item, index) in data" :key="index" class="item"
:class="{ error: item.error, abort: item.abort, border: props.border }" :class="{ error: item.error, abort: item.abort, border: props.border }"
@ -131,6 +131,10 @@ const props = defineProps({
border: { border: {
type: Boolean, type: Boolean,
default: true default: true
},
list: {
type: Boolean,
default: true
} }
}) })
@ -298,9 +302,9 @@ const uploadFiles = async () => {
for (let i = 0; i < props.threadNum; i++) { for (let i = 0; i < props.threadNum; i++) {
a.push(doOne()) a.push(doOne())
} }
Promise.all(a).then(() => { Promise.all(a).then((r) => {
if (props.max == 1) { if (props.max == 1) {
mv.value = r.data mv.value = data.value.filter(a => 'url' in a).map(a => a.url)[0]
} else { } else {
mv.value = data.value.filter(a => 'url' in a).map(a => a.url) mv.value = data.value.filter(a => 'url' in a).map(a => a.url)
} }

@ -6,7 +6,7 @@
</div> </div>
<input ref="fileInputRef" v-if="!props.disabled" accept="image/*" @change="fileInputChange" type="file" <input ref="fileInputRef" v-if="!props.disabled" accept="image/*" @change="fileInputChange" type="file"
style="position: absolute; top:-100vh;" :multiple="props.max != 1" /> style="position: absolute; top:-100vh;" :multiple="props.max != 1" />
<div class="list" :class="{ noEffect: props.noEffect }"> <div class="list" :class="{ noEffect: props.noEffect }" v-if="props.list">
<slot :list="data"> <slot :list="data">
<div v-for="(item, index) in data" :key="index" class="item" :class="{ error: item.error, abort: item.abort }" <div v-for="(item, index) in data" :key="index" class="item" :class="{ error: item.error, abort: item.abort }"
:style="{ '--ps': item.uploading ? (item.uploading?.loaded || 0) * 100 / (item.uploading?.total || 1) + '%' : '100%' }" :style="{ '--ps': item.uploading ? (item.uploading?.loaded || 0) * 100 / (item.uploading?.total || 1) + '%' : '100%' }"
@ -161,6 +161,10 @@ const props = defineProps({
noEffect: { noEffect: {
type: Boolean, type: Boolean,
default: false default: false
},
list: {
type: Boolean,
default: true
} }

@ -37,6 +37,7 @@ const getUploadKey =async () => {
<li>属性(saveMin):是否保存缩略图,如果true,则列表时显示缩略图,否则显示大图,默认:true </li> <li>属性(saveMin):是否保存缩略图,如果true,则列表时显示缩略图,否则显示大图,默认:true </li>
<li>属性(watermark):是否添加水印,默认:true </li> <li>属性(watermark):是否添加水印,默认:true </li>
<li>属性(noEffect):是否无效果,本质设置css属性,默认:false </li> <li>属性(noEffect):是否无效果,本质设置css属性,默认:false </li>
<li>属性(list):是否显示列表,默认:true</li>
<li>css属性(--image-size):图片显示大小,默认: 10em </li> <li>css属性(--image-size):图片显示大小,默认: 10em </li>
<li>css属性(--image-border-radius):图片显示圆角,默认: .4em</li> <li>css属性(--image-border-radius):图片显示圆角,默认: .4em</li>
<li>css属性(--image-margin):图片外边距,默认: .5em .5em 0 0</li> <li>css属性(--image-margin):图片外边距,默认: .5em .5em 0 0</li>
@ -113,6 +114,7 @@ const getUploadKey =async () => {
<li>属性(threadNum):并行上传数量:默认:2</li> <li>属性(threadNum):并行上传数量:默认:2</li>
<li>属性(retry):重试次数,默认:3 </li> <li>属性(retry):重试次数,默认:3 </li>
<li>属性(chunksize):分片大小,默认:5Mb,不建议修改</li> <li>属性(chunksize):分片大小,默认:5Mb,不建议修改</li>
<li>属性(list):是否显示列表,默认:true</li>
<li>属性(border):文件项是否显示边框,默认:true</li> <li>属性(border):文件项是否显示边框,默认:true</li>
<li>插槽(button):上传按钮插槽</li> <li>插槽(button):上传按钮插槽</li>
<li>插槽(default):文件列表,作用域:list,不建议定义</li> <li>插槽(default):文件列表,作用域:list,不建议定义</li>

Loading…
Cancel
Save