Vue에서 로컬 파일을 읽는 방법

Vue의 로컬 파일 읽기 방법: 1. "function (name) {...}"을 통해 로컬 파일을 가져옵니다. 2. 이를 구성 요소에 도입하고 해당 문자열 처리를 수행합니다. 3. "this"의 값을 반복합니다. .iconList"는 "" 클래스에 바인딩될 수 있습니다.

이 문서의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터

vue는 로컬 파일을 어떻게 읽나요?

vue에서 로컬 파일 읽기

Background

프로젝트 개발 프로세스 중에 아이콘 선택 상자의 아이콘이 마지막으로 출시된 프로젝트 아이콘 라이브러리와 일치하도록 글꼴 아이콘을 동적으로 설정해야 합니다.

Idea

로컬 글꼴 아이콘 라이브러리 파일을 읽은 다음 해당 문자열 변환을 수행하여 아이콘이 일관되게 유지되도록 합니다.

단계

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!