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 里面的值绑定到的 class 即可。

vue中读取文本文件内容_vue中读取本地文件相关推荐

java解析txt文本文件_java读取文本文件内容方法详解，java如何读取txt文件?
你知道java读取文本文件内容方式都有哪些吗?下面要给大家分享的就是比较简单的方法,一起来了解一下吧. 如何使用java实现读取TXT文件里的内容的方法以及思路: 下面先来看一下例子:import j ...
JAVA读取文本文件内容以流的形式返回到前端
JAVA读取文本文件内容以流的形式返回到前端此方法放Controller ServletOutputStream out = null;ByteArrayOutputStream baos = nu ...
java通过url获取网页内容_Java语言通过URL读取网页数据并保存到本地文件（代码实例）...
本文主要向大家介绍了Java语言通过URL读取网页数据并保存到本地文件(代码实例),通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. Java通过URL读取网页数据并保存到本地文件(代码 ...
java 文件内容读取到字符串中,从文本文件中将字符串值读取到Java中的Jav...
我想通过分割读取字符串值包括从文本文件到存储到Account类的空白.这是我读取文本文件的功能. public ArrayList loadAccount(String fn) throws IOEx ...
python中读取文本文件_利用Python读取文本文件？
文件的遍历因为文件保存了很多字符和行,因此也是循环常见的典型使用案例,最原始的方法可以调用文件对象的read方法,把文件内容一次性加载至字符串对象 file = open('myfile.txt', ...
python提供了方法用于读取文本文件内容_python提供了哪三种方法用于读取文本文件的内容？...
三种方法分别是:"read()"."readline()"."readlines()"."read()"是一次性读取文件 ...
vue webpack 自动打开页面_vue中webpack技术详解
1.为什么要使用webpack: 因为我们想把资源整合.如在项目index.html文件中为了请求变得更少我们可以新建一个叫main.js的项目入口文件(里面有引用其它的各种资源,而index.htm ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
vue监听字符串长度_vue中的计算属性和侦听器
计算属性概念模板内的候通现端数是制这.效合应近环大过这业据的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护在重说道.础过学开概码数项遍间里哦行览屏屏 ...

vue中读取文本文件内容_vue中读取本地文件

vue中读取文本文件内容_vue中读取本地文件相关推荐

最新文章

热门文章