Dieser Artikel stellt hauptsächlich die Installation und Verwendung der Vux-Uploader-Bild-Upload-Komponente vor. Er ist sehr gut und hat einen gewissen Referenzwert.
1. /github.com/greedying/vux-uploader
2. Installieren Sie
npm install vux-uploader --save
npm install --save-dev babel-preset-es2015
.babelrc
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"es2015",
"stage-2"
],
"plugins": ["transform-runtime"],
"env": {
"test": {
"presets": ["env", "es2015", "stage-2"],
"plugins": ["istanbul"]
}
}
}3. Verwenden Sie
// 引入组件
import Uploader from 'vux-uploader'
// 子组件
export default {
...
components: {
...
Uploader,
...
}
...
}
// 使用组件
<uploader
:max="varmax"
:images="images"
:handle-click="true"
:show-header="false"
:readonly="true"
:upload-url="uploadUrl"
name="img"
:params="params"
size="small"
@preview="previewMethod"
@add-image="addImageMethod"
@remove-image="removeImageMethod"
></uploader>Parameterbeschreibung:
Bilder
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein. Weitere Informationen finden Sie auf der chinesischen PHP-Website.
Typ: Array
Standardwert: [], Leeres Array
Bedeutung: Bildarray, Format ist [ { url: '/url/of/img.ong' }, ...]
Hinweis: Wenn die Variable ein Array ist, ist der Datenfluss bidirektional. innerhalb der Komponente Das Ändern des Werts des Arrays wirkt sich auf die übergeordnete Komponente aus
max
Typ: Zahl
Standardwert: 1
Bedeutung: Maximale Anzahl von Bildern
Hinweis: Wenn das Bild die max Wert, die neue Schaltfläche verschwindet
showHeader
Typ: Boolean
Standardwert: true
Bedeutung: Ob die Kopfzeile angezeigt werden soll
Anmerkungen: Steuern Sie die Anzeige der gesamten Kopfzeile
Titel
Typ: String
Standardwert: Bild-Upload
Bedeutung: Titel des Headers
Bemerkungen: Leer lassen, wenn nicht angezeigt
showTip
Typ: Boolean
Standardwert: true
Bedeutung: Ob der digitale Teil des Headers angezeigt werden soll, also 1/3 Teil
Hinweis: Wenn showHeader false ist, wird der Header als Ganzes ausgeblendet und dieser Parameter ist zu diesem Zeitpunkt ungültig
readonly
Typ: Boolean
Standardwert: false
Bedeutung: Ob es nur Read ist
Hinweis: Im schreibgeschützten Zustand sind die Schaltflächen „Hinzufügen“ und „Löschen“ ausgeblendet
handleClick
Typ: Boolescher Wert
Standardwert: false
Bedeutung: Gibt an, ob das Klickereignis der neuen Schaltfläche übernommen werden soll. Wenn ja, wird beim Klicken auf die Schaltfläche „Hinzufügen“ nicht mehr automatisch die Bildauswahloberfläche angezeigt.
Hinweis: Wenn „true“, klicken Sie Klicken Sie auf die Schaltfläche „Hinzufügen“ und dann auf „$emit('add-image“). Anschließend können Sie innerhalb dieses Ereignisses eine benutzerdefinierte Bildauswahl und andere Vorgänge durchführen. Das Hinzufügen, Hochladen und Löschen von Bildern wird vom Benutzer
autoUpload Typ: Boolean
Standardwert: true
Bedeutung: Ob das Bild nach der Auswahl automatisch hochgeladen werden soll. Wenn ja, wird die interne Upload-Schnittstelle aufgerufen. Nein, dann ist $emit('upload-image', formData)', formData` der Bildinhalt, und der Benutzer kann sich das Ereignis anhören und es selbst hochladen
Hinweis: Wenn handleClick true ist, kann keine Bildauswahl durchgeführt werden , daher ist dieser Parameter ungültig. Wenn dieser Parameter falsch ist, ist formData` nach Auswahl des Bildes $emit('upload-image', formData)' der Bildinhalt
uploadUrl
Typ: String
Standardwert: ''
Bedeutung: Erhalten Sie die URL des hochgeladenen Bildes
Hinweis: Sie müssen eine JSON-Zeichenfolge im folgenden Format zurückgeben, andernfalls setzen Sie bitte autoUpload auf „false“ und laden Sie es selbst hoch
{
Ergebnis: 0,
Meldung: „Ergebnis ist nicht 0 Fehlermeldung“,
Daten: {
URL: „http://image.url.com/image.png“
}
}
Name
Typ: String
Standardwert: img
Bedeutung: Beim Hochladen wird standardmäßig der Formularname für Bilder verwendet
Anmerkungen: Keine
params
Typ: Objekt
Standard Wert: null
Bedeutung: Dateien hochladen Beim Tragen von Parametern
Bemerkungen: Keine
Größe
Typ: Zeichenfolge
Standardwert: normal
Bedeutung: Größentyp
Bemerkungen: normal ist die Standardgröße von weui, klein ist die vom Autor definierte Größe. Einige Größen
capture
Typ: String
Standardwert: ''
Bedeutung: Capture-Attribut der Eingabe
Hinweis: Kann sein Auf Kamera einstellen, klicken Sie zu diesem Zeitpunkt auf die Schaltfläche „Neu“. Bei einigen Modellen wird die Kamera direkt gestartet. Beachten Sie, dass die Leistung jedes Mobiltelefonmodells unterschiedlich ist. Verwenden Sie sie daher mit Vorsicht. Wenn handleClick „true“ ist, ist dieses Attribut ungültig
Ereignisbeschreibung ausgeben
add-image
Timing ausgeben: Wenn der handleClick-Parameter „true“ ist, klicken Sie auf die neue Schaltfläche
Parameter: Keine
Bemerkungen: Keine
remove-image
Emissionszeitpunkt: Wenn der handleClick-Parameter wahr ist, klicken Sie auf die Schaltfläche „Löschen“
Parameter: Keine
Hinweis: Wenn handleClick falsch ist, klicken Sie auf die Schaltfläche „Löschen“ und das erste Bild darin wird gelöscht die Komponente; andernfalls muss der Benutzer dieses Ereignis abhören und den entsprechenden Löschvorgang ausführen
Vorschau
Sendezeit: beim Klicken auf ein beliebiges Bild
Parameter: Bildobjekt im Format { url: 'imgUrl' }
Hinweis: Die automatische Vorschaufunktion wurde vorerst nicht implementiert. Wenn Benutzer Ereignisse überwachen müssen, können sie sie selbst implementieren
upload-image
Timing ausgeben: Wenn sowohl handleClick als auch autoUpload falsch sind `, wählen Sie das Bild aus
Parameter: formData, generiert aus dem Bildinhalt formData
Hinweis: Sie können das Eingabeelement des Bildes über vm.$refs.input
Verwandte Empfehlungen:
Vue verwendet mehrere Methoden, um feste Tabellenköpfe und erste Spalten zu implementieren
Einführung in die Verwendung von V-Bind in VUE
So verwenden Sie Scheindaten im Vue-Cli-Projekt
Das obige ist der detaillierte Inhalt vonInformationen zur Installation und Verwendung der Vux-Uploader-Bild-Upload-Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
