Vue's method of reading local files: 1. Get the local file through "function (name) {...}"; 2. Introduce it into the component and perform corresponding string processing; 3. Through Just loop through and bind the value in "this.iconList" to the class of "".

The operating environment of this article: Windows 7 system, Vue version 2.9.6, DELL G3 computer

How does vue read local files?

Read local files in vue

Background

During the project development process, there is a need to dynamically set font icons to ensure that the icons The icons in the selection box are consistent with the last released project icon library.

Idea

Read the local font icon library file, and then perform the corresponding string conversion, so that the icons can be kept consistent

Steps

1. Obtain the local file

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");//默認(rèn)為utf-8
    xhr.send(null);
    return xhr.status === okStatus ? xhr.responseText : null;
}
export default loadFile;

2.Introduce it into the component and perform corresponding string processing

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

Process the obtained file data

            // 以.iconfont為節(jié)點(diǎn)分割字符串，只需要.iconfont之后的字符串
                let iconData = loadFile('iconfont/iconfont.css').split('.iconfont')[1];
                // 獲取第一次出現(xiàn)'}'時(shí)候的索引值
                let iconLi = iconData.indexOf('}');
                // 得到第一次出現(xiàn)'}'之后的所有字符串信息【這部分就是我們需要的字體圖標(biāo)的信息】
                let liList = iconData.substring(iconLi + 1, iconData.length-1);
                // 分割每個(gè)字體圖標(biāo)信息
                let icons = liList.split('.');
                // 設(shè)置分割標(biāo)識(shí)
                let flag = ':before';
                // 循環(huán)獲取到的字體圖標(biāo)數(shù)組
                for (let i = 0; i < icons.length; i++) {
                    // 判斷不為空
                    if (icons[i].indexOf(flag) > -1) {
                        // 獲取圖標(biāo)信息中的class部分，也就是:before之前的信息
                        let liList = icons[i].split(flag);
                        // 將class添加到數(shù)組，最后再頁(yè)面上進(jìn)行循環(huán)輸出
                        this.iconList.push(liList[0]);
                    }
                }

Finally, through looping, bind the value in this.iconList to the class of .

Recommended learning: "The latest 5 vue.js video tutorial selections"

The above is the detailed content of How to read local files in vue. For more information, please follow other related articles on the PHP Chinese website!