• 技术文章 >web前端 >Vue.js

    vue怎么读取本地文件

    藏色散人藏色散人2021-09-15 11:35:06原创79

    vue读取本地文件的方法:1、通过“function (name) {...}”获取本地的文件;2、在组件中引入并进行相应的字符串处理;3、通过循环将“this.iconList”里面的值绑定到“<i></i>”的class即可。

    本文操作环境:Windows7系统、Vue2.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 里面的值绑定到 <i></i> 的 class 即可。

    推荐学习:《最新的5个vue.js视频教程精选

    以上就是vue怎么读取本地文件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue
    上一篇:vuejs如何绑定函数 下一篇:vuejs开发如何启动项目
    线上培训班

    相关文章推荐

    • vuejs怎么删除cookie• 分享一个​Laravel Mix编译Vue踩坑记录• vue路由传值的几种方式是什么• vuejs如何绑定函数• 本地中如何引入vuejs

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网