So lesen Sie lokale Dateien in Vue

Vues Methode zum Lesen lokaler Dateien: 1. Lokale Dateien über „Funktion (Name) {...}“ abrufen. 2. In die Komponente einführen und die entsprechende Zeichenfolgenverarbeitung durchführen. iconList“ kann an die Klasse „“ gebunden werden.

Die Betriebsumgebung dieses Artikels: Windows 7-System, Vue Version 2.9.6, DELL G3-Computer

Wie liest Vue lokale Dateien?

Lokale Dateien in Vue lesen

Hintergrund

Während des Projektentwicklungsprozesses müssen Schriftartsymbole dynamisch festgelegt werden, um sicherzustellen, dass die Symbole im Symbolauswahlfeld mit der zuletzt veröffentlichten Projektsymbolbibliothek übereinstimmen.

Idee

Lesen Sie die lokale Schriftart-Symbolbibliotheksdatei und führen Sie dann die entsprechende Zeichenfolgenkonvertierung durch, damit das Symbol konsistent bleibt

Schritte

1. Holen Sie sich die lokale Datei

const loadFile = function (name) { // name为文件所在位置
    let xhr = new XMLHttpRequest(),
        okStatus = document.location.protocol === "file:" ? 0 : 200;
    xhr.open('GET', name, false);
    xhr.overrideMimeType("text/html;charset=utf-8");//默认为utf-8
    xhr.send(null);
    return xhr.status === okStatus ? xhr.responseText : null;
}
export default loadFile;

2 Führen Sie die entsprechende Zeichenfolgenverarbeitung ein und führen Sie sie aus

import loadFile from '../assets/js/localFile';

Verarbeiten Sie die erhaltenen Dateidaten

            // 以.iconfont为节点分割字符串，只需要.iconfont之后的字符串
                let iconData = loadFile('iconfont/iconfont.css').split('.iconfont')[1];
                // 获取第一次出现'}'时候的索引值
                let iconLi = iconData.indexOf('}');
                // 得到第一次出现'}'之后的所有字符串信息【这部分就是我们需要的字体图标的信息】
                let liList = iconData.substring(iconLi + 1, iconData.length-1);
                // 分割每个字体图标信息
                let icons = liList.split('.');
                // 设置分割标识
                let flag = ':before';
                // 循环获取到的字体图标数组
                for (let i = 0; i < icons.length; i++) {
                    // 判断不为空
                    if (icons[i].indexOf(flag) > -1) {
                        // 获取图标信息中的class部分，也就是:before之前的信息
                        let liList = icons[i].split(flag);
                        // 将class添加到数组，最后再页面上进行循环输出
                        this.iconList.push(liList[0]);
                    }
                }

Binden Sie abschließend den Wert in this.iconList durch eine Schleife an die Klasse von .

Empfohlenes Lernen: „Die neueste Auswahl von 5 vue.js-Video-Tutorials“

Das obige ist der detaillierte Inhalt vonSo lesen Sie lokale Dateien in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!