用Electron开发一个文件浏览器(二)

发布时间:2024-02-13 08:00

先附上Github地址,源码都在这上面。

如果没看过(一),可以点这里

在(一)中,程序已经能够获得home目录和home目录下的所有文件、文件夹的路径所代表的文件对象。可是现在的主界面除了最顶上的工具栏,其它的都是空白。所以我们需要把获得到的那些文件对象转换为图形界面。

首先在html文件中添加文件的模板。


<template id=\'fileItem-template\'>
    <div class=\"fileItem\">
        <img src=\"\" alt=\"\" class=\"fileIcon\">
        <div class=\"fileName\">div>
    div>
template>

接下来我们需要为这个模板填充内容。

function displayFile(file){
    const mainArea = document.getElementById(\'main-area\');
    const template = document.querySelector(\'#fileItem-template\');
    let   clone    = document.importNode(template.content, true);
    clone.querySelector(\'img\').src = `images/${file.type}.png`;
    clone.querySelector(\'.fileName\').innerHTML = file.fileName;
    clone.querySelector(\'.fileItem\').setAttribute(\'filepath\', file.path);
    let fileItem = clone.querySelector(\'.fileItem\');
    mainArea.appendChild(clone);
}

使用document对象的importNode方法可以复制模板下的所有节点。然后将fileIconsrc属性就设置为类型名+.png的形式。这样的话便于扩展,以后如果想要显示更多种文件,仅需添加不同种文件对于的图标即可。

设置完文件图标跟名称之后将其添加进主区域,也就是main-area

保存重新打开程序,此时的程序看起来就跟(一)中一开始附的图很类似了。

\"用Electron开发一个文件浏览器(二)_第1张图片\"

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号