Randall/goindex-theme-r
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决当前页面加载时切换页面导致回退问题(#37)

Browse Source
This commit is contained in:
Aicirou 2020-05-30 00:24:53 +08:00
parent 5819a35751
commit 0f0a7d3644
6 changed files with 105 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -12538,11 +12538,6 @@
"resolved": "https://registry.npm.taobao.org/vue-infinite-loading/download/vue-infinite-loading-2.4.5.tgz", "resolved": "https://registry.npm.taobao.org/vue-infinite-loading/download/vue-infinite-loading-2.4.5.tgz",
"integrity": "sha1-zCD9QK9/IBiABkQ8mbYEcM8d4bM=" "integrity": "sha1-zCD9QK9/IBiABkQ8mbYEcM8d4bM="
}, },
"vue-infinite-scroll": {
"version": "2.0.2",
"resolved": "https://registry.npm.taobao.org/vue-infinite-scroll/download/vue-infinite-scroll-2.0.2.tgz",
"integrity": "sha1-yjepH+ku4K07dKz4aCwAkXFEtxE="
},
"vue-lazyload": { "vue-lazyload": {
"version": "1.3.3", "version": "1.3.3",
"resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz", "resolved": "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz",

1
package.json
View File

@ -30,7 +30,6 @@
"vue-codemirror": "^4.0.6", "vue-codemirror": "^4.0.6",
"vue-i18n": "^8.17.3", "vue-i18n": "^8.17.3",
"vue-infinite-loading": "^2.4.5", "vue-infinite-loading": "^2.4.5",
"vue-infinite-scroll": "^2.0.2",
"vue-lazyload": "^1.3.3", "vue-lazyload": "^1.3.3",
"vue-router": "^3.1.6", "vue-router": "^3.1.6",
"vuex": "^3.4.0" "vuex": "^3.4.0"

2
src/main.js
View File

@ -11,7 +11,6 @@ import i18n from "./i18n";
// store // store
import store from "@/store/index"; import store from "@/store/index";
import VueClipboard from "vue-clipboard2"; import VueClipboard from "vue-clipboard2";
import infiniteScroll from "vue-infinite-scroll";
import VueLazyload from "vue-lazyload"; import VueLazyload from "vue-lazyload";
import Viewer from "v-viewer"; import Viewer from "v-viewer";
import cdnpath from "./libs/util.cdn"; import cdnpath from "./libs/util.cdn";
@ -27,7 +26,6 @@ Vue.use(ElementUI);
Vue.use(VueAxios, axios); Vue.use(VueAxios, axios);
Vue.use(cdnpath); Vue.use(cdnpath);
Vue.use(VueClipboard); Vue.use(VueClipboard);
Vue.use(infiniteScroll);
Vue.use(VueLazyload, { Vue.use(VueLazyload, {
loading: cdnpath("/images/airplane.gif"), loading: cdnpath("/images/airplane.gif"),
}); });

20
src/router/index.js
View File

@ -23,16 +23,16 @@ Vue.use(VueRouter);
// 导出路由 在 main.js 里使用 // 导出路由 在 main.js 里使用
const router = new VueRouter({ const router = new VueRouter({
mode: "history", mode: "history",
// scrollBehavior(to, from, savePosition) { scrollBehavior(to, from, savePosition) {
// if (savePosition) { if (savePosition) {
// return savePosition; return savePosition;
// } else { } else {
// return { return {
// x: 0, x: 0,
// y: 0, y: 0,
// }; };
// } }
// }, },
routes, routes,
}); });

59
src/store/modules/acrou/modules/cancelToken.js
View File

@ -1,36 +1,31 @@
export default { export default {
namespaced: true, namespaced: true,
state: { state: {
cancelToken: [], cancelToken: [],
},
actions: {
push({ commit }, cancelToken) {
return new Promise((resolve) => {
commit("push", cancelToken);
resolve();
});
}, },
actions: { cancel({ commit }) {
push({ return new Promise((resolve) => {
commit commit("clear");
}, cancelToken) { resolve();
return new Promise(resolve => { });
commit("push", cancelToken);
resolve()
})
},
cancel({
commit
}) {
return new Promise(resolve => {
commit("clear");
resolve()
})
},
}, },
mutations: { },
push(state, cancelToken) { mutations: {
state.cancelToken.push(cancelToken) push(state, cancelToken) {
}, state.cancelToken.push(cancelToken);
clear(state) {
console.log(state.cancelToken)
state.cancelToken.forEach(cancel => {
cancel('路由跳转取消请求');
});
state.cancelToken = [];
}
}, },
}; clear(state) {
state.cancelToken.forEach((cancel) => {
cancel();
});
state.cancelToken = [];
},
},
};

148
src/views/page/GoList.vue
View File

@ -1,13 +1,7 @@
<template> <template>
<div> <div>
<headmd :option="headmd" v-if="renderHeadMD && headmd.display"></headmd> <headmd :option="headmd" v-if="renderHeadMD && headmd.display"></headmd>
<div <div class="golist" v-loading="loading">
class="golist"
v-loading="loading"
v-infinite-scroll="pageLoad"
infinite-scroll-disabled="busy"
infinite-scroll-distance="10"
>
<list-view <list-view
:data="files" :data="files"
v-if="mode === 'list'" v-if="mode === 'list'"
@ -23,14 +17,19 @@
:action="action" :action="action"
:thum="thum" :thum="thum"
/> />
<!-- <infinite-loading :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading> --> <infinite-loading
<div v-show="files.length === 0" class="has-text-centered no-content"></div> v-show="!loading"
<center> ref="infinite"
<div :class="!busy ? 'is-hidden' : ''"> spinner="bubbles"
<i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i> @infinite="infiniteHandler"
<span class="sr-only">Loading...</span> >
</div> <div slot="no-more"></div>
</center> <div slot="no-results"></div>
</infinite-loading>
<div
v-show="files.length === 0"
class="has-text-centered no-content"
></div>
</div> </div>
<div <div
class="is-divider" class="is-divider"
@ -38,7 +37,10 @@
$t('list.total') + ' ' + files.length + ' ' + $t('list.item') $t('list.total') + ' ' + files.length + ' ' + $t('list.item')
" "
></div> ></div>
<readmemd :option="readmemd" v-if="renderReadMeMD && readmemd.display"></readmemd> <readmemd
:option="readmemd"
v-if="renderReadMeMD && readmemd.display"
></readmemd>
<viewer <viewer
v-if="viewer && images && images.length > 0" v-if="viewer && images && images.length > 0"
@ -69,23 +71,22 @@ import {
checkExtends, checkExtends,
} from "@utils/AcrouUtil"; } from "@utils/AcrouUtil";
import { mapState } from "vuex"; import { mapState } from "vuex";
import InfiniteLoading from "vue-infinite-loading";
import ListView from "./components/list"; import ListView from "./components/list";
import GridView from "./components/grid"; import GridView from "./components/grid";
import Markdown from "../common/Markdown"; import Markdown from "../common/Markdown";
import InfiniteLoading from "vue-infinite-loading";
export default { export default {
name: "GoList", name: "GoList",
components: { components: {
InfiniteLoading,
ListView, ListView,
GridView, GridView,
Headmd: Markdown, Headmd: Markdown,
Readmemd: Markdown, Readmemd: Markdown,
InfiniteLoading,
}, },
data: function () { data: function() {
return { return {
infiniteId: +new Date(), infiniteId: +new Date(),
busy: false,
loading: true, loading: true,
page: { page: {
page_token: null, page_token: null,
@ -124,40 +125,31 @@ export default {
}, },
computed: { computed: {
...mapState("acrou/view", ["mode"]), ...mapState("acrou/view", ["mode"]),
images () { images() {
return this.buildFiles.filter( return this.files.filter(
(file) => file.mimeType.indexOf("image") != -1 (file) => file.mimeType.indexOf("image") != -1
); );
}, },
renderHeadMD () { renderHeadMD() {
return window.themeOptions.render.head_md || false; return window.themeOptions.render.head_md || false;
}, },
renderReadMeMD () { renderReadMeMD() {
return window.themeOptions.render.readme_md || false; return window.themeOptions.render.readme_md || false;
}, },
}, },
created () { created() {
this.render(); this.render();
}, },
methods: { methods: {
pageLoad () { infiniteHandler($state) {
if (!this.page.page_token) return; // 首次进入页面不执行滚动事件
if (!this.page.page_token) {
return;
}
this.page.page_index++; this.page.page_index++;
console.log("滚动加载了", this.page.page_index, this.$route.path);
this.render("scroll");
},
infiniteHandler ($state) {
// TODO 异步请求的原因，导致数据响应在下个页面。需要终止上次请求
this.page.page_index++;
console.log("滚动加载了", this.page.page_index, this.$route.path);
this.render($state); this.render($state);
}, },
render (scroll) { render($state) {
if (scroll) {
this.busy = true;
} else {
this.loading = true;
}
this.headmd = { display: false, file: {}, path: "" }; this.headmd = { display: false, file: {}, path: "" };
this.readmemd = { display: false, file: {}, path: "" }; this.readmemd = { display: false, file: {}, path: "" };
var path = this.$route.path; var path = this.$route.path;
@ -184,8 +176,8 @@ export default {
page_token: body.nextPageToken, page_token: body.nextPageToken,
page_index: body.curPageIndex, page_index: body.curPageIndex,
}; };
if (scroll) { if ($state) {
this.files = this.buildFiles(this.files.concat(data.files)); this.files.push(...this.buildFiles(data.files));
} else { } else {
this.files = this.buildFiles(data.files); this.files = this.buildFiles(data.files);
} }
@ -193,47 +185,44 @@ export default {
this.renderMd(data.files, path); this.renderMd(data.files, path);
} }
} }
// if (body.nextPageToken) { if (body.nextPageToken) {
// $state.loaded(); this.$refs.infinite.stateChanger.loaded();
// } else { } else {
// $state.complete(); this.$refs.infinite.stateChanger.complete();
// } }
this.loading = false; this.loading = false;
this.busy = false;
}) })
.catch((e) => { .catch((e) => {
// $state.loaded();
this.loading = false; this.loading = false;
this.busy = false;
console.log(e); console.log(e);
}); });
}, },
buildFiles (files) { buildFiles(files) {
var path = this.$route.path; var path = this.$route.path;
return !files return !files
? [] ? []
: files : files
.map((item) => { .map((item) => {
var p = path + checkoutPath(item.name, item); var p = path + checkoutPath(item.name, item);
let isFolder = let isFolder =
item.mimeType === "application/vnd.google-apps.folder"; item.mimeType === "application/vnd.google-apps.folder";
let size = isFolder ? "-" : formatFileSize(item.size); let size = isFolder ? "-" : formatFileSize(item.size);
return { return {
path: p, path: p,
...item, ...item,
modifiedTime: formatDate(item.modifiedTime), modifiedTime: formatDate(item.modifiedTime),
size: size, size: size,
isFolder: isFolder, isFolder: isFolder,
}; };
}) })
.sort((a, b) => { .sort((a, b) => {
if (a.isFolder && b.isFolder) { if (a.isFolder && b.isFolder) {
return 0; return 0;
} }
return a.isFolder ? -1 : 1; return a.isFolder ? -1 : 1;
}); });
}, },
checkPassword (path) { checkPassword(path) {
var pass = prompt(this.$t("list.auth"), ""); var pass = prompt(this.$t("list.auth"), "");
localStorage.setItem("password" + path, pass); localStorage.setItem("password" + path, pass);
if (pass != null && pass != "") { if (pass != null && pass != "") {
@ -242,9 +231,8 @@ export default {
this.$router.go(-1); this.$router.go(-1);
} }
}, },
copy (path) { copy(path) {
let origin = window.location.origin; let origin = window.location.origin;
console.log(path);
path = origin + encodeURI(path); path = origin + encodeURI(path);
this.$copyText(path) this.$copyText(path)
.then(() => { .then(() => {
@ -261,13 +249,13 @@ export default {
}); });
}); });
}, },
thum (url) { thum(url) {
return url ? `/${this.$route.params.id}:view?url=${url}` : ""; return url ? `/${this.$route.params.id}:view?url=${url}` : "";
}, },
inited (viewer) { inited(viewer) {
this.$viewer = viewer; this.$viewer = viewer;
}, },
action (file, target) { action(file, target) {
if (file.mimeType.indexOf("image") != -1) { if (file.mimeType.indexOf("image") != -1) {
this.viewer = true; this.viewer = true;
this.$nextTick(() => { this.$nextTick(() => {
@ -283,7 +271,7 @@ export default {
} }
this.target(file, target); this.target(file, target);
}, },
target (file, target) { target(file, target) {
let path = file.path; let path = file.path;
if (target === "_blank") { if (target === "_blank") {
window.open(path); window.open(path);
@ -310,7 +298,7 @@ export default {
return; return;
} }
}, },
renderMd (files, path) { renderMd(files, path) {
var cmd = this.$route.params.cmd; var cmd = this.$route.params.cmd;
if (cmd) { if (cmd) {
return; return;
@ -334,7 +322,7 @@ export default {
} }
}); });
}, },
goSearchResult (file, target) { goSearchResult(file, target) {
this.loading = true; this.loading = true;
let id = this.$route.params.id; let id = this.$route.params.id;
this.axios this.axios
@ -352,7 +340,7 @@ export default {
console.log(e); console.log(e);
}); });
}, },
getIcon (type) { getIcon(type) {
return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi"); return "#" + (this.icon[type] ? this.icon[type] : "icon-weizhi");
}, },
}, },