electron仿百度網盤-UI搭建思路

時間 2019-12-05

標籤 electron 百度網盤搭建思路简体版

原文原文鏈接

前言

https://juejin.im/editor/posts/5c167c2ff265da6167203868vue

實例展現

代碼庫

求贊鴨： https://github.com/sparkxxxxxx/electron-vue-pangit

UI架構

MainPage
- PanHeader
- PanContent
  - SideBar
  - VBigIconList / v-table // 用於兩種文件列表不一樣顯示

浮動框實現

先看實例github

實現思路就是建立一個新的BrowserWindow就能夠了。
/src/main/index.ts，在主進程代碼中進行建立相應大小的BrowserWindowweb

省略部分代碼

floatingWindows = new BrowserWindow({
    width: 140, // 懸浮窗口的寬度 比實際DIV的寬度要多2px 由於有1px的邊框
    height: 30, // 懸浮窗口的高度 比實際DIV的高度要多2px 由於有1px的邊框
    type: 'toolbar',    // 建立的窗口類型爲工具欄窗口
    frame: false,   // 要建立無邊框窗口
    // resizable: false, // 禁止窗口大小縮放
    show: false,    // 先不讓窗口顯示
    webPreferences: {
        devTools: false // 關閉調試工具
    },
    transparent: true,  // 設置透明
    alwaysOnTop: true,  // 窗口是否老是顯示在其餘窗口以前
});

floatingWindows.once('ready-to-show', () => {
    floatingWindows.show()
});
floatingWindows.on('close', () => {
    floatingWindows = null;
})
複製代碼

大圖標文件列表

/src/renderer/components/v-bigIconList/v-bigIconList.vue，是一個VUE組件。windows

<template>
    <div>
        <dd v-for="rowDatas in bigIconDatas">
            <template v-for="file in rowDatas" >
                <div class="container" v-bind:class="file.isChecked ? 'container-checked ' : ''" @click="onClick(file)">
                    <div class="img-container" v-bind:class="getClass(file)"><img src=""></img></div>
                    <div><i>{{file.name}}</i></div>
                </div>
            </template>
        </dd>
    </div>
</template>

<script>

export default {
    name: 'v-bigIconList',
    data() {
        return {
            currentCheckedFile: null,
            contextMenuData: {
                menuName: 'demo',
                axis: {
                    x: null,
                    y: null
                }
            }
        };
    },
    props: {
        bigIconDatas: Array
    },
    methods: {
        getClass(file) {
            if (file.isDir) {
                return 'dir-img';
            }
            if (file.type === 'ZIP') {
                return 'zip-img';
            }
            return '';
        },
        checkedClass(file) {
            return file.isChecked ? 'container-checked ' : '';
        },
        onClick(file) {
            if (this.currentCheckedFile && this.currentCheckedFile.isChecked) {
                this.currentCheckedFile.isChecked = false;
            }
            const innerFile = file;
            innerFile.isChecked = !innerFile.isChecked;
            this.currentCheckedFile = file;
        }
    },
    created() {
        this.bigIconDatas.forEach(x => {
            x.forEach(item => {
                const that = item;
                that.isChecked = false;
            });
        });
    }
};
</script>
複製代碼

代碼並不複雜，可是實際上網盤非壓縮包，目錄這種預設圖標外，還有用戶本身上傳大圖片，視頻文件，這樣大文件顯示時就會是預覽圖，預覽圖地址一般是後端返回，此時咱們須要對style作個處理，或者加一個img標籤，動態綁定src屬性。後端

v-router使用

左側導航欄和切換大圖標文件列表和普通列表都是經過router-link來實現路由切換。詳見src/renderer/router/index.ts配置文件bash

routes: [
    {
      path: '/home',
      name: 'landing-page',
      redirect: '/home/all/table',
      component: require('@/components/LandingPage').default,
      children: [
          {
              path: 'all/table',
              name: 'all',
              component: require('@/components/v-bigIconList/v-bigIconList').default
          },
          {
              path: 'all/bar',
              name: 'all',
              component: require('@/basic/v-table/v-table').default
          },
          {
              path: 'uploading',
              name: 'uploading',
              component: require('@/components/uploading/uploading').default
          },
          {
              path: 'downloading',
              name: 'downloading',
              component: require('@/components/downloading/downloading').default
          },
          {
              path: 'downloaded',
              name: 'downloaded',
              component: require('@/components/downloaded/downloaded').default
          }
      ]
    },  
    {
      path: '/floating/window',
      name: 'floating-window',
      component: require('@/components/floatingWindow/floatingWindow').default
    },
    {
      path: '/downloaddemo',
      name: 'downloaddemo',
      component: downloadDemo
    }
  ]
複製代碼