add vue-touch
This commit is contained in:
parent
496fda0686
commit
022f1d48ed
@ -8,8 +8,10 @@
|
||||
"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",
|
||||
|
||||
@ -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({
|
||||
|
||||
@ -17,7 +17,9 @@
|
||||
</md-menu>
|
||||
</div>
|
||||
<div class="md-toolbar-row" v-if="search_start">
|
||||
<md-autocomplete class="search" v-model="search_content" :md-options="titles" md-layout="box"><label>{{lang.search}}</label></md-autocomplete>
|
||||
<md-autocomplete class="search" v-model="search_content" :md-options="titles" md-layout="box">
|
||||
<label>{{ lang.search }}</label>
|
||||
</md-autocomplete>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
@ -64,16 +66,13 @@
|
||||
<span class="md-list-item-text">{{ lang.drawer[4] }}</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
</md-app-drawer>
|
||||
|
||||
<md-app-content>
|
||||
<div ref='list_placeholder' :style="`height:${search_start? '86':'40'}px`"></div>
|
||||
<md-empty-state
|
||||
md-icon="devices_other"
|
||||
:md-label="lang.empty_state.label"
|
||||
:md-description="lang.empty_state.description"
|
||||
v-if="show_list.length == 0 && !search_start"
|
||||
>
|
||||
<v-touch @swiperight="menuVisible = true">
|
||||
<div ref="list_placeholder" :style="`height:${search_start ? '86' : '40'}px`"></div>
|
||||
<md-empty-state md-icon="devices_other" :md-label="lang.empty_state.label" :md-description="lang.empty_state.description" v-if="show_list.length == 0 && !search_start">
|
||||
<md-button class="md-primary md-raised" @click="turnToAdd()">{{ lang.empty_state.button }}</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
@ -89,6 +88,7 @@
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
</v-touch>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
@ -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 {
|
||||
data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
} catch (e) {
|
||||
// 不正确
|
||||
// 跳转到解锁界面
|
||||
console.log(e)
|
||||
console.log(e);
|
||||
this.turnToUnlock('密码错误');
|
||||
return
|
||||
return;
|
||||
}
|
||||
// 判断密码是否正确
|
||||
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 = [];
|
||||
@ -223,11 +223,11 @@ export default {
|
||||
}
|
||||
|
||||
if (this.settings.is_chinese) {
|
||||
this.lang = lang().home.CHS
|
||||
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;
|
||||
},
|
||||
|
||||
// 跳转到添加界面
|
||||
@ -278,7 +278,7 @@ export default {
|
||||
},
|
||||
|
||||
turnToDetail(content) {
|
||||
this.$router.push({name: 'Detail', params:{code_content: content}})
|
||||
this.$router.push({ name: 'Detail', params: { code_content: content } });
|
||||
},
|
||||
|
||||
// 跳转到某页面
|
||||
@ -300,46 +300,46 @@ export default {
|
||||
|
||||
// 分离数据title
|
||||
separateTitle(data_list) {
|
||||
let title_list = []
|
||||
let title_list = [];
|
||||
for (let i in data_list) {
|
||||
title_list.push(data_list[i].title)
|
||||
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
|
||||
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])
|
||||
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() {
|
||||
@ -358,17 +358,17 @@ export default {
|
||||
// 如果 `search_start` 发生改变，这个函数就会运行
|
||||
search_start: function() {
|
||||
if (this.search_start) {
|
||||
this.cache_list = JSON.parse(JSON.stringify(this.show_list))
|
||||
console.log('搜索阵列展开，缓存设置完成')
|
||||
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 {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user