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