Vue implementiert eine kleine Notizblockfunktion

In diesem Artikelbeispiel wird der spezifische Code von Vue zur Realisierung der kleinen Funktion von Notepad als Referenz geteilt. Der spezifische Inhalt ist wie folgt

Direkt zum Code:

<!DOCTYPE html>
<html lang="de">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<Kopf>
    <Stil>
        #app {
            Rand: 0px automatisch;
            Breite: 500px;
            Rand: 1px durchgezogener Gainsboro;
            Höhe: automatisch;
        }
        .Titel {
            Zeilenhöhe: 50px;
            Textausrichtung: zentriert;
            Höhe: 50px;
            Schriftstärke: 20;
            Schriftgröße: 36px;
            Hintergrund: #42b983;
            Rahmen unten: 1px tief schwarz;
        }
        Eingabe:Fokus {
            Rahmenfarbe: #66afe9;
            Umriss: 0;
            -webkit-box-shadow: Einschub 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
            Boxschatten: Einschub 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
        }
        .Datei-Container{
            Überlauf: versteckt;
            Rand oben: 10px;
        }
        .openfile-btn{
            schweben: links;
            Rand links: 10px;
        }
        #Dateipfad{
            Rand links: 10px;
            Breite: 300px;
        }
        #datei_con{
            Anzeige: Block;
            Rand: 0;
            Rahmenradius: 5px;
            Hintergrundfarbe: rgba (241,241,241, .98);
            Breite: 480px;
            Höhe: 250px;
            Rand oben: 10px;
            Rand links: 10px;
            Größenänderung: keine;
        }
        ul,
        li {
            Polsterung: 0;
            Rand: 0;
            Listenstil: keiner;
        }

        .li-div {
            Textausrichtung: zentriert;
            Überlauf: versteckt;
            Rand oben: 5px;
            /*Rahmen: 3px durchgehend blanchedalmond;*/
        }
        .bot{
            Höhe: 30px;
        }
        .show-details{
            schweben: rechts;
            Rand rechts: 10px;
        }
        .show-btn{
            /*Anzeige: Block;*/
            schweben: rechts;
            Rand rechts: 10px;
        }
    </Stil>
</Kopf>

<Text>
<div id="app">
    <div Klasse="Titel">
        Notizblock
    <div>
        <div Klasse="Dateicontainer">
            <input class="openfile-btn" type="button" value="Von lokal importieren" id="fileImport" v-on:click="clickLoad">
            <input type="file" id="files" ref="refFile" style="display: none" v-on:change="fileLoad">
            <input type="text" v-model="path" id="file_path" disabled="deaktiviert">
            <input type="button" value="Import bestätigen" style="float:right; margin-right: 10px " v-on:click="addfile"></button>
            <textarea Typ="text" id="file_con" autoHeight="true" v-model="Eingabedatei"></textarea>
        </div>

    </div>
    <hr>
    <div Klasse="Inhalt">
        <ul>
            <li v-for="(Element, Index) in Nachricht">
                <div Klasse="li-div">
                    <span>{{++index}}</span>
                    <label>{{Artikel}}</label>
                    <button @click="remove(index)" class="show-btn">Löschen</button>
                    <button @click="show(index)" class="show-btn" v-if="item.length>30">Einzelheiten</button>
                </div>
            </li>
        </ul>
    </div>
    <hr>
    <div v-show="message.length>0" class="bot">
        <div Stil="float: links; Rand links: 10px">
            Aktuelle Anzahl der Notizdatensätze: {{message.length}}
        </div>
        <div Klasse="del-btn">
            <button @click="clear"class="show-btn">Löschen</button>
        </div>
    </div>
</div>
<Skript>
    let app = neues Vue({
        el: '#app',
        Daten: {
            //tmp: "",
            Nachricht: [],
            Weg:'',
            Eingabedatei:'',
            sub_inpufile:'',
            temporäre Datei:''
        },
        Methoden: {
            KlickLaden: Funktion (){
                dies.$refs.refFile.dispatchEvent(neues MouseEvent('click'))
            },
            Datei laden() {
                const selectedFile = this.$refs.refFile.files[0];
                var name = selectedFile.name; //Der Dateiname der ausgewählten Datei var size = selectedFile.size; //Die Größe der ausgewählten Datei var reader = new FileReader();
                Leser.readAsText(ausgewählteDatei);
                dieser.Pfad = Name;
                console.log("Dateiname:" + Name + "Größe:" + Größe);

                Leser.onload = Funktion() {
                    let file_s = dieses.Ergebnis;
                    document.getElementById('file_con').value=Datei_s;
                }
            },
            Datei hinzufügen:Funktion (){
                var Datei = document.getElementById('file_con').value;
                this.input_file=Datei;
                this.tmp_file=file; //Wird zum Speichern der Originaldatei verwendet//console.log("this.input_file: "+this.input_file)
                wenn (Datei == null || Datei == "") {
                    alert("Eingabe darf nicht leer sein");
                } anders {
                    wenn(Dateilänge>30)
                    {
                        this.sub_inpufile=Datei.substring(0,30)+'...'
                        diese.Nachricht.push(diese.sub_inpufile);
                        diese.Eingabedatei = ''
                        dieser.Pfad=''
                        console.log(diese.sub_inpufile)
                    }
                    anders{
                        diese.Nachricht.push(diese.Eingabedatei);
                        diese.Eingabedatei = ''
                        dieser.Pfad=''
                    }
                }
            },
            entfernen: Funktion (Index) {
                var flag = confirm("Möchten Sie löschen?" + index);
                wenn (Flagge == wahr) {
                    diese.Nachricht.splice(index-1, 1);
                }
            },
            anzeigen:Funktion (){
                alert(this.tmp_file) //Es gibt eine Wortbegrenzung, Sie können die Komponenten anpassen},
            löschen: Funktion () {
                diese.Nachricht = [];
            },
        },
    })
</Skript>
</body>
</html>

Wirkung:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Detaillierte Erkundung von vuex 2.0 und Erstellen einer Notizblockanwendung mit vuejs 2.0 + vuex 2.0
Beispiel eines lokalen Notizblocks basierend auf vue2.0+vuex+localStorage
Vue-Implementierung des Notizblockgehäuses
Vue implementiert einen einfachen Notizblock
Vue implementiert eine einfache Notizblockfunktion
Detaillierte Erläuterung der Vue Simple Notepad-Entwicklung
Detaillierte Erklärung des Vue Notepad-Beispiels
Vue implementiert Notizblockfunktion
Erstellung eines Vue-CLI- und Webpack-Notizblockprojekts
Vuex implementiert Notizblockfunktion

<<: Eine kurze Analyse der Unterschiede und Funktionen zwischen Übergang, Transformation und Übersetzung in CSS3

>>: Verwenden Sie zum Senden des Formulars ein Bild statt einer Schaltfläche.