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

先附上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张图片

你可能感兴趣的