vueでローカルファイルを読み取る方法

Vue のローカル ファイルの読み取り方法: 1. 「関数 (名前) {...}」を通じてローカル ファイルを取得します; 2. それをコンポーネントに導入し、対応する文字列処理を実行します; 3. Just ループを通じて「this.iconList」の値を「」のクラスにバインドします。

この記事の動作環境: Windows 7 システム、Vue バージョン 2.9.6、DELL G3 コンピューター

vue の仕組みローカルファイルを読みますか？

vue でローカル ファイルを読み取る

バックグラウンド

プロジェクト開発プロセス中、フォント アイコンを動的に設定して、選択ボックス内のアイコンが、最後にリリースされたプロジェクト アイコン ライブラリと一致していること。

#アイデア

ローカル フォント アイコン ライブラリ ファイルを読み取り、対応する文字列変換を実行して、アイコンの一貫性を保つことができます

手順

1. ローカル ファイルを取得します

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. コンポーネントに導入し、対応する文字列処理を実行します

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

取得したファイル データを処理します

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

最後に、ループを通じて、this.iconList の値を のクラスにバインドします。

推奨学習: 「

最新の 5 つの vue.js ビデオ チュートリアル セレクション 」

以上がvueでローカルファイルを読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。