From 53ef30577e123321b1fb5c42c2e4d628c6412aeb Mon Sep 17 00:00:00 2001 From: Aicirou <2643053021@qq.com> Date: Sat, 16 May 2020 19:58:25 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87=E6=87=92?= =?UTF-8?q?=E5=8A=A0=E8=BD=BD=EF=BC=8C=E5=9B=BE=E7=89=87=E9=A2=84=E8=A7=88?= =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96grid=20view=20mode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 26 +++++ package.json | 2 + src/layout/viewmode/index.vue | 33 ++++++ src/main.js | 8 ++ src/views/common/BreadCrumb.vue | 32 ++---- src/views/common/Navbar.vue | 8 +- src/views/page/GoList.vue | 67 ++++++++++--- src/views/page/GoVideo.vue | 122 ++++++++++++++--------- src/views/page/components/grid/index.vue | 48 +++++---- 9 files changed, 238 insertions(+), 108 deletions(-) create mode 100644 src/layout/viewmode/index.vue diff --git a/package-lock.json b/package-lock.json index 002f7ca..806c732 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12226,6 +12226,22 @@ "resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1585683718911&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz", "integrity": "sha1-sj5DWK+oogL+ehAK8fX4g/AgB+4=" }, + "v-viewer": { + "version": "1.5.1", + "resolved": "https://registry.npm.taobao.org/v-viewer/download/v-viewer-1.5.1.tgz", + "integrity": "sha1-lIBNg4FMylZuaRM5/h5keTSG8gA=", + "requires": { + "throttle-debounce": "^2.0.1", + "viewerjs": "^1.5.0" + }, + "dependencies": { + "throttle-debounce": { + "version": "2.1.0", + "resolved": "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-2.1.0.tgz", + "integrity": "sha1-JX5kjwpWvZ5U/g8TLEq4YR304dU=" + } + } + }, "v8-compile-cache": { "version": "2.1.0", "resolved": "https://registry.npm.taobao.org/v8-compile-cache/download/v8-compile-cache-2.1.0.tgz", @@ -12263,6 +12279,11 @@ "extsprintf": "^1.2.0" } }, + "viewerjs": { + "version": "1.5.0", + "resolved": "https://registry.npm.taobao.org/viewerjs/download/viewerjs-1.5.0.tgz?cache=0&sync_timestamp=1574486727393&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fviewerjs%2Fdownload%2Fviewerjs-1.5.0.tgz", + "integrity": "sha1-3r6pSSGJ+kEiPMVn3pFdeUNYmdA=" + }, "vm-browserify": { "version": "1.1.2", "resolved": "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz", @@ -12503,6 +12524,11 @@ "resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz", "integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE=" }, + "vue-lazyload": { + "version": "1.3.3", + "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz", + "integrity": "sha1-TfUKJxvem3TDyveiKNbgr1DVaC8=" + }, "vue-loader": { "version": "15.9.1", "resolved": "https://registry.npm.taobao.org/vue-loader/download/vue-loader-15.9.1.tgz?cache=0&sync_timestamp=1584584267698&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-loader%2Fdownload%2Fvue-loader-15.9.1.tgz", diff --git a/package.json b/package.json index febf5e4..4d2d208 100644 --- a/package.json +++ b/package.json @@ -22,11 +22,13 @@ "markdown-it": "^10.0.0", "node-sass": "^4.14.0", "sass-loader": "^8.0.2", + "v-viewer": "^1.5.1", "vue": "^2.6.11", "vue-axios": "^2.1.5", "vue-clipboard2": "^0.3.1", "vue-i18n": "^8.17.3", "vue-infinite-scroll": "^2.0.2", + "vue-lazyload": "^1.3.3", "vue-router": "^3.1.6", "vue2-ace-editor": "0.0.15", "vuex": "^3.4.0" diff --git a/src/layout/viewmode/index.vue b/src/layout/viewmode/index.vue new file mode 100644 index 0000000..f2f7f64 --- /dev/null +++ b/src/layout/viewmode/index.vue @@ -0,0 +1,33 @@ + + + diff --git a/src/main.js b/src/main.js index 8b84ae3..24995a7 100644 --- a/src/main.js +++ b/src/main.js @@ -12,6 +12,9 @@ import i18n from './i18n' import store from '@/store/index' import VueClipboard from 'vue-clipboard2' import infiniteScroll from 'vue-infinite-scroll' +import VueLazyload from 'vue-lazyload' +import Viewer from 'v-viewer' +import 'viewerjs/dist/viewer.css' import "@/assets/style/theme/register.scss" Vue.config.productionTip = false @@ -19,6 +22,11 @@ Vue.use(ElementUI) Vue.use(VueAxios,axios) Vue.use(VueClipboard) Vue.use(infiniteScroll) +Vue.use(VueLazyload,{ + // error: 'dist/error.png', + loading: 'https://cloud.jsonpop.cn/go2index/vue/airplane.gif' +}) +Vue.use(Viewer) new Vue({ router, diff --git a/src/views/common/BreadCrumb.vue b/src/views/common/BreadCrumb.vue index 44d3b40..c811a6f 100644 --- a/src/views/common/BreadCrumb.vue +++ b/src/views/common/BreadCrumb.vue @@ -1,7 +1,7 @@ diff --git a/src/views/common/Navbar.vue b/src/views/common/Navbar.vue index 2accb5c..9570dd9 100644 --- a/src/views/common/Navbar.vue +++ b/src/views/common/Navbar.vue @@ -71,6 +71,9 @@ + + + @@ -80,10 +83,12 @@ \ No newline at end of file + diff --git a/src/views/page/components/grid/index.vue b/src/views/page/components/grid/index.vue index ae8baac..43483c6 100644 --- a/src/views/page/components/grid/index.vue +++ b/src/views/page/components/grid/index.vue @@ -3,16 +3,11 @@
-
+
-
+
+
+
+
+
Placeholder image
@@ -60,22 +64,22 @@ export default { go: { type: Function, }, + thum: { + type: Function, + }, }, data: function() { return {}; }, computed: { - imgData() { - // return this.data.filter((file) => file.mimeType.indexOf("image/") != -1); - // return this.data.filter((file) => !file.isFolder); - return this.data; - }, - }, - methods: { - thum(url) { - return url ? `/${this.$route.params.id}:view?url=${url}` : ""; + folders() { + return this.data.filter((item) => item.isFolder); + }, + files() { + return this.data.filter((item) => !item.isFolder); }, }, + methods: {}, };