Comment lire des fichiers locaux dans vue

Méthode de lecture des fichiers locaux de Vue : 1. Obtenez le fichier local via "function (name) {...}" ; 2. Introduisez-le dans le composant et effectuez le traitement de chaîne correspondant ; .iconList" peut être lié à la classe "".

L'environnement d'exploitation de cet article : système Windows 7, Vue version 2.9.6, ordinateur DELL G3

Comment vue lit-il les fichiers locaux ?

Lire les fichiers locaux dans vue

Contexte

Pendant le processus de développement du projet, il est nécessaire de définir dynamiquement les icônes de police pour garantir que les icônes dans la zone de sélection d'icônes sont cohérentes avec la dernière bibliothèque d'icônes de projet publiée.

Idée

Lisez le fichier de bibliothèque d'icônes de police locale, puis effectuez la conversion de chaîne correspondante, afin que l'icône puisse rester cohérente

Étapes

1 Obtenez le fichier local

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. Introduisez et effectuez le traitement de chaîne correspondant

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

Traitez les données du fichier obtenues

            // 以.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]);
                    }
                }

Enfin, via une boucle, liez la valeur de this.iconList à la classe .

Apprentissage recommandé : "La dernière sélection de 5 tutoriels vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!