Componente Vue.js per l'aggiunta di un pulsante di caricamento file per Vuetify

Blog

Componente Vue.js per l'aggiunta di un pulsante di caricamento file per Vuetify

Un componente Vue per Vuetify.vuetify-upload-button



Questo componente è un input di caricamento file con la funzionalità di base di un pulsante Vuetify.

Installazione

npm i vuetify-upload-button

Browser

Includere il file di script, quindi installare il componente con |_+_| per esempio.:



Vue.use(UploadButton);

Modulo

Vue.use(UploadButton);

NOTA IMPORTANTE

Affinché la direttiva ripple funzioni correttamente, è necessario importare la direttiva Ripple .

import UploadButton from 'vuetify-upload-button'; export default { components: { 'upload-btn': UploadButton } }

utilizzo

Una volta installato, può essere utilizzato in un modello semplicemente come:



Pulsante Carica semplice

// plugins/vuetify.js import Vue from 'vue' import Vuetify from 'vuetify/lib' import { Ripple } from 'vuetify/lib/directives' Vue.use(Vuetify, { // other stuff directives: { Ripple } })

In caso di modifica del file, il componente Pulsante di caricamento emette un evento di aggiornamento del file con il file o i file come argomento, vedere l'esempio seguente:

Pulsante con icona. L'impostazione predefinita dello slot 'icona' è a destra:

import UploadButton from 'vuetify-upload-button' export default { methods: { update (file) { // handle file here. File will be an object. // If multiple prop is true, it will return an object array of files. } }, components: { 'upload-btn': UploadButton } }

Pulsante con icona a sinistra:

http fxnetworks attiva roku
add

Pulsante come icona

add

Puoi cancellare l'input del file usando un ref

add

oggetti di scena

Puoi usare i seguenti oggetti di scena

Nome Descrizione Tipo Predefinito
accettare Attributo di accettazione dell'input HTML corda *
bloccare bloccare bool falso
depresso rimuovi l'ombra della scatola bool falso
colore vuetify colore, ad es. 'primario' corda 'primario'
Disabilitato imposta la proprietà disabilitata per input/pulsante bool falso
larghezza fissa imposta una larghezza fissa per il pulsante corda nullo
piatto imposta il bottone piatto bool falso
passa il mouse il pulsante ha un effetto hoverable bool vero
icona il pulsante è il pulsante icona bool falso
etichettaClass classe da applicare all'etichetta come il colore del testo corda ''
grande il pulsante è grande bool falso
Caricamento in corso stato di caricamento per il pulsante bool falso
larghezza massima consente al pulsante di crescere in base alla lunghezza del nome del file fino a un massimo corda 100%
multiplo consente il caricamento di più file, restituisce un array anziché un singolo oggetto bool falso
nome applica l'attributo del nome HTML corda caricare un file
contorno il pulsante è contorno bool falso
ondulazione il pulsante ha un effetto a catena bool vero
il giro il pulsante è rotondo bool falso
piccolo il pulsante è piccolo bool falso
titolo testo del pulsante corda 'Caricamento'
noTitleUpdate aggiornamento dinamico del titolo disabilitato bool falso

*Rimosso uniqueID come prop perché dovrebbe SEMPRE avere un ID univoco

Scarica i dettagli:

Autore: Dorito Bandito

Dimostrazione dal vivo: https://vuetifyjs.com/en/components/file-inputs

GitHub: https://github.com/DoritoBandito/vuetify-upload-button

#vuejs #javascript # vue-js