root/apt-nl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

键盘

Browse Source
This commit is contained in:
caill
2023-06-19 18:23:45 +08:00
parent c9bccf8a40
commit 885a5c9797
7 changed files with 257 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/pages/modules/login/login.vue
View File

@@ -14,11 +14,11 @@
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label" @click="toFocus(1)">用户名</div>
<input type="text" class="login-input" ref="input1" v-model="username">
<input type="text" class="login-input" ref="input1" v-model="username" @focus="show" data-layout="normal">
</div>
<div class="login-item">
<div class="login-label" @click="toFocus(2)">密码</div>
<input type="password" class="login-input" ref="input2" v-model="password">
<input type="password" class="login-input" ref="input2" v-model="password" @focus="show" data-layout="normal">
</div>
</div>
<!-- <div class="login-setup-wraper">
@@ -37,11 +37,11 @@
<div class="login-items-wraper">
<div class="login-item">
<div class="login-label" @click="toFocus(3)">域名地址</div>
<input type="text" class="login-input" ref="input3" v-model="baseUrl">
<input type="text" class="login-input" ref="input3" v-model="baseUrl" @focus="show" data-layout="normal">
</div>
<div class="login-item">
<div class="login-label" @click="toFocus(4)">刷新时间（秒）</div>
<input type="number" class="login-input" ref="input4" v-model="setTime">
<input type="number" class="login-input" ref="input4" v-model="setTime" @focus="show" data-layout="numeric">
</div>
</div>
<div class="login-setup-wraper login-setup-wraper__r">
@@ -57,6 +57,7 @@
<div class="footer_p1">Copyright © www.noblelift.cn, All Rights Reserved.</div>
<div class="footer_p2">国内唯一（全球仅四家）能够同时提供物料搬运设备、智能立体仓库、智能输送分拣系统、AGV及其系统、供应链综合系统软件以及智能制造全系统整体解决方案的公司。</div>
</div>
<vue-touch-keyboard id="keyboard" :options="options" v-if="visible" :layout="layout" :cancel="hide" :accept="accept" :input="input" :next="next" />
</div>
</template>
@@ -71,7 +72,14 @@ export default {
password: '',
baseUrl: this.$store.getters.baseUrl,
setTime: this.$store.getters.setTime / 1000,
disabled: false
disabled: false,
visible: false,
layout: 'normal',
input: null,
options: {
useKbEvents: false,
preventClickEvent: false
}
}
},
mounted () {
@@ -100,9 +108,11 @@ export default {
},
toSetup () {
this.tab = 1
this.hide()
},
toLogin () {
this.tab = 0
this.hide()
},
saveSetup () {
let obj = {
@@ -132,10 +142,40 @@ export default {
let obj = {}
obj = Object.assign({}, res)
this.$store.dispatch('userInfo', JSON.stringify(obj))
this.hide()
this.$router.push('/index/home')
} catch (err) {
this.disabled = false
}
},
show (e) {
this.input = e.target
this.layout = e.target.dataset.layout
if (!this.visible) {
this.visible = true
}
},
hide () {
this.visible = false
},
accept () {
this.hide()
},
next () {
let inputs = document.querySelectorAll('input')
let found = false;
[].forEach.call(inputs, (item, i) => {
if (!found && item === this.input && i < inputs.length - 1) {
found = true
this.$nextTick(() => {
inputs[i + 1].focus()
})
}
})
if (!found) {
this.input.blur()
this.hide()
}
}
}
}
@@ -230,4 +270,17 @@ export default {
_font(14px, 24px, #fff,,center)
.footer_p2
_font(15px, 24px, #fff,,center)
#keyboard
position fixed
left 0
right 0
bottom 0
z-index 1000
width 100%
// max-width 1366px
margin 0 auto
padding 1em
background-color #EEE
box-shadow 0px -3px 10px rgba(black, 0.3)
border-radius 10px
</style>