Rumah > hujung hadapan web > View.js > Bagaimana untuk membaca fail tempatan dalam vue

Bagaimana untuk membaca fail tempatan dalam vue

藏色散人
Lepaskan: 2023-01-13 00:45:32
asal
19707 orang telah melayarinya

Kaedah Vue untuk membaca fail tempatan: 1. Dapatkan fail tempatan melalui "fungsi (nama) {...}"; melalui dan ikat nilai dalam "this.iconList" ke kelas "".

Bagaimana untuk membaca fail tempatan dalam vue

Persekitaran pengendalian artikel ini: sistem Windows 7, versi Vue 2.9.6, komputer DELL G3

Bagaimana vue membaca fail tempatan?

Baca fail tempatan dalam vue

Latar Belakang

Semasa proses pembangunan projek, terdapat keperluan untuk menetapkan ikon fon secara dinamik untuk memastikan bahawa ikon adalah Ikon dalam kotak pilihan adalah konsisten dengan perpustakaan ikon projek yang dikeluarkan terakhir.

Idea

Baca fail perpustakaan ikon fon tempatan, dan kemudian lakukan penukaran rentetan yang sepadan, supaya ikon dapat dikekalkan konsisten

Langkah

1 Dapatkan fail setempat

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;
Salin selepas log masuk

2 Importnya ke dalam komponen dan lakukan pemprosesan rentetan yang sepadan

import loadFile from '../assets/js/localFile';
Salin selepas log masuk

Memproses dan. pemerolehan Data fail yang diperoleh

            // 以.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]);
                    }
                }
Salin selepas log masuk

akhirnya melalui gelung untuk mengikat nilai dalam ini.iconList ke kelas .

Pembelajaran yang disyorkan: "Pilihan tutorial video 5 vue.js terkini"

Atas ialah kandungan terperinci Bagaimana untuk membaca fail tempatan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan