From 022f1d48ed05931679dcec5effde8f4c9b87bb8c Mon Sep 17 00:00:00 2001 From: RainSun Date: Wed, 26 Feb 2020 20:18:40 +0800 Subject: [PATCH] add vue-touch --- package.json | 4 +- src/main.js | 4 + src/views/Home/Home.vue | 217 ++++++++++++++++++++-------------------- 3 files changed, 115 insertions(+), 110 deletions(-) diff --git a/package.json b/package.json index 92124a1..a4dd1ca 100644 --- a/package.json +++ b/package.json @@ -5,11 +5,13 @@ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", - "buildsuper": "vue-cli-service build --modern" + "buildsuper": "vue-cli-service build --modern" }, "dependencies": { + "axios": "^0.19.2", "core-js": "^3.6.4", "crc-32": "^1.2.0", + "crypto-js": "^4.0.0", "material-design-icons": "^3.0.1", "register-service-worker": "^1.6.2", "roboto-fontface": "^0.6.0", diff --git a/src/main.js b/src/main.js index d7f290b..e91423e 100644 --- a/src/main.js +++ b/src/main.js @@ -30,6 +30,10 @@ setHtmlFontSize(); import VueClipboard from "vue-clipboard2"; Vue.use(VueClipboard); +// 手势控件 +var VueTouch = require('vue-touch') +Vue.use(VueTouch, {name: 'v-touch'}) + Vue.config.productionTip = false new Vue({ diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue index 2a4441c..1d470f5 100644 --- a/src/views/Home/Home.vue +++ b/src/views/Home/Home.vue @@ -4,37 +4,39 @@
menu - {{lang.title}} + {{ lang.title }}
search more_vert - {{lang.menu[0]}} - {{lang.menu[1]}} + {{ lang.menu[0] }} + {{ lang.menu[1] }}
- + + +
- + -
- face -

Canary Codebook

-

{{ user_infos.mail_addr }}

-
+
+ face +

Canary Codebook

+

{{ user_infos.mail_addr }}

+
- - - person - {{lang.drawer[0]}} - + + + person + {{ lang.drawer[0] }} + - - - settings - {{lang.drawer[1]}} - + + settings + {{ lang.drawer[1] }} + - - reply - {{lang.drawer[2]}} - - - - file_download - {{lang.drawer[3]}} - + + reply + {{ lang.drawer[2] }} + + + + file_download + {{ lang.drawer[3] }} + + + + beenhere + {{ lang.drawer[4] }} + + - - beenhere - {{lang.drawer[4]}} - - -
- - {{lang.empty_state.button}} - + +
+ + {{ lang.empty_state.button }} + -
-

{{ code.title }}

-

{{ code.user_name }}

-
+
+

{{ code.title }}

+

{{ code.user_name }}

+
- - add - - - - {{ snakebar_msg }} - + + add + + + + {{ snakebar_msg }} + + @@ -98,7 +98,7 @@ // @ is an alias to /src import { mapState, mapActions } from 'vuex'; import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js'; -import { lang } from '@/utils/language.js' +import { lang } from '@/utils/language.js'; export default { name: 'Home', data() { @@ -132,7 +132,7 @@ export default { //动态修改样式 // console.log(clientHeight); this.$refs.home.children[0].style.minHeight = clientHeight + 'px'; - this.$refs.list_placeholder.parentNode.style.maxHeight = clientHeight + 'px'; + this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight = clientHeight + 'px'; window.document.documentElement.setAttribute('data-theme', this.settings.is_dark_mode ? 'dark' : 'light'); }, @@ -154,29 +154,29 @@ export default { if (this.row_data) { // 解密主密码 let main_code_decrpt = decryptMainCode(this.row_pwd.main_code); - let data_decrypt + let data_decrypt; // 解密密码本 - try{ + try { data_decrypt = decrypt(main_code_decrpt, this.row_data); - } catch(e) { + } catch (e) { // 不正确 // 跳转到解锁界面 - console.log(e) + console.log(e); this.turnToUnlock('密码错误'); - return + return; } // 判断密码是否正确 - if(!data_decrypt) { + if (!data_decrypt) { // 不正确 // 跳转到解锁界面 this.turnToUnlock('密码错误'); - return + return; } // 刷新显示内容 let data_list = JSON.parse(data_decrypt); - this.show_list = data_list + this.show_list = data_list; // 抽离title - this.separateTitle(data_list) + this.separateTitle(data_list); } else { // 空密码本 this.show_list = []; @@ -208,10 +208,10 @@ export default { } console.log('用户信息初始化完成'); }, - + // 初始化配置信息 - initSettings(){ - if (Object.keys(this.settings).length == 0 ) { + initSettings() { + if (Object.keys(this.settings).length == 0) { // 初始化配置信息 let settings = { is_chinese: true, @@ -221,13 +221,13 @@ export default { this.setSettings([settings, this]); console.log('配置信息覆写完成'); } - - if(this.settings.is_chinese) { - this.lang = lang().home.CHS + + if (this.settings.is_chinese) { + this.lang = lang().home.CHS; } else { - this.lang = lang().home.EN + this.lang = lang().home.EN; } - console.log('语言配置完成') + console.log('语言配置完成'); console.log('配置信息初始化完成'); }, @@ -264,7 +264,7 @@ export default { console.log('点击搜索无内容拦截'); return; } - this.search_start = !this.search_start + this.search_start = !this.search_start; }, // 跳转到添加界面 @@ -276,11 +276,11 @@ export default { } this.$router.push('/add'); }, - + turnToDetail(content) { - this.$router.push({name: 'Detail', params:{code_content: content}}) + this.$router.push({ name: 'Detail', params: { code_content: content } }); }, - + // 跳转到某页面 turnToPage(url) { this.$router.push(url); @@ -297,49 +297,49 @@ export default { this.snakebar_msg = this.lang.copy.failed; this.show_snackbar = true; }, - + // 分离数据title separateTitle(data_list) { - let title_list = [] - for(let i in data_list) { - title_list.push(data_list[i].title) + let title_list = []; + for (let i in data_list) { + title_list.push(data_list[i].title); } - this.titles = title_list - console.log('数据头部分离完成') + this.titles = title_list; + console.log('数据头部分离完成'); }, - + // 模糊搜索 fuzzySearch(cache_list) { // 空内容拦截器，显示全部密码 - if(!this.search_content.trim()) { - this.show_list = cache_list - return + if (!this.search_content.trim()) { + this.show_list = cache_list; + return; } - let data_list = [] + let data_list = []; for (let i in cache_list) { - if(this.generReg(this.search_content.trim()).test(cache_list[i].title)) { - data_list.push(cache_list[i]) + if (this.generReg(this.search_content.trim()).test(cache_list[i].title)) { + data_list.push(cache_list[i]); } } - this.show_list = data_list + this.show_list = data_list; }, - + // 模糊搜索辅助轮 generReg(val) { - let head = '(.*)(' - let tail = ')(.*)' - let body = val.split('').join(')(.*)(') - return new RegExp(head + body + tail, 'i') + let head = '(.*)('; + let tail = ')(.*)'; + let body = val.split('').join(')(.*)('); + return new RegExp(head + body + tail, 'i'); }, - + // 下载apk downloadApk() { - window.open('https://ccb.canary.moe/download/Canary.apk') + window.open('https://ccb.canary.moe/download/Canary.apk'); } }, created() { - this.lang = lang().home.CHS - console.log('临时语言系统加载完成') + this.lang = lang().home.CHS; + console.log('临时语言系统加载完成'); this.init(); }, mounted() { @@ -357,18 +357,18 @@ export default { }, // 如果 `search_start` 发生改变，这个函数就会运行 search_start: function() { - if(this.search_start) { - this.cache_list = JSON.parse(JSON.stringify(this.show_list)) - console.log('搜索阵列展开，缓存设置完成') + if (this.search_start) { + this.cache_list = JSON.parse(JSON.stringify(this.show_list)); + console.log('搜索阵列展开，缓存设置完成'); } else { - this.show_list = JSON.parse(JSON.stringify(this.cache_list)) - this.cache_list = [] - console.log('搜索阵列关闭，缓存清空完成') + this.show_list = JSON.parse(JSON.stringify(this.cache_list)); + this.cache_list = []; + console.log('搜索阵列关闭，缓存清空完成'); } }, // 如果 `search_content` 发生改变，这个函数就会运行 search_content: function() { - this.fuzzySearch(this.cache_list) + this.fuzzySearch(this.cache_list); } }, beforeDestroy() {}, @@ -421,7 +421,6 @@ export default { .md-speed-dial.md-bottom-right { position: fixed !important; } - } // Demo purposes only .md-drawer { @@ -429,7 +428,7 @@ export default { max-width: calc(100vw - 125px); } .md-app-scroller > div { - overflow-y:scroll!important; + overflow-y: scroll !important; } .face { color: #fff !important;