mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Refactor #3911 - For FileUpload
This commit is contained in:
parent
b9329d5154
commit
d32a2e9fae
4 changed files with 193 additions and 33 deletions
|
@ -1,16 +1,16 @@
|
|||
<template>
|
||||
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file">
|
||||
<img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" />
|
||||
<div class="p-fileupload-file-details">
|
||||
<div class="p-fileupload-file-name">{{ file.name }}</div>
|
||||
<span class="p-fileupload-file-size">{{ formatSize(file.size) }}</span>
|
||||
<FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" />
|
||||
<div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="p-fileupload-file" v-bind="ptm('file')">
|
||||
<img role="presentation" class="p-fileupload-file-thumbnail" :alt="file.name" :src="file.objectURL" :width="previewWidth" v-bind="ptm('thumbnail')" />
|
||||
<div class="p-fileupload-file-details" v-bind="ptm('details')">
|
||||
<div class="p-fileupload-file-name" v-bind="ptm('fileName')">{{ file.name }}</div>
|
||||
<span class="p-fileupload-file-size" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
|
||||
<FileUploadBadge :value="badgeValue" class="p-fileupload-file-badge" :severity="badgeSeverity" :pt="ptm('badge')" />
|
||||
</div>
|
||||
<div class="p-fileupload-file-actions">
|
||||
<FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove">
|
||||
<div class="p-fileupload-file-actions" v-bind="ptm('actions')">
|
||||
<FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove" :pt="ptm('removeButton')">
|
||||
<template #icon="iconProps">
|
||||
<component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
|
||||
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" />
|
||||
<TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('removeButton')['icon']" />
|
||||
</template>
|
||||
</FileUploadButton>
|
||||
</div>
|
||||
|
@ -19,10 +19,12 @@
|
|||
|
||||
<script>
|
||||
import Badge from 'primevue/badge';
|
||||
import BaseComponent from 'primevue/basecomponent';
|
||||
import Button from 'primevue/button';
|
||||
import TimesIcon from 'primevue/icons/times';
|
||||
|
||||
export default {
|
||||
extends: BaseComponent,
|
||||
emits: ['remove'],
|
||||
props: {
|
||||
files: {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue