ai
This commit is contained in:
parent
9fdaf7b31a
commit
17e1b0a4df
1
.gitignore
vendored
1
.gitignore
vendored
@ -12,6 +12,7 @@ npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
yarn.lock
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
|
||||
6
index.js
Normal file
6
index.js
Normal file
@ -0,0 +1,6 @@
|
||||
import Keyboard from '@/components/Keyboard.vue'
|
||||
|
||||
Keyboard.install = function(Vue) {
|
||||
Vue.component(Keyboard.name, Keyboard)
|
||||
}
|
||||
export default Keyboard
|
||||
@ -2,11 +2,16 @@
|
||||
"name": "keybord",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+http://git.wm-app.xyz/dev/vue-keyborad.git"
|
||||
},
|
||||
"dependencies": {
|
||||
"core-js": "^3.6.5",
|
||||
"vue": "^2.6.11"
|
||||
|
||||
95
src/App.vue
95
src/App.vue
@ -1,28 +1,93 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div id="container">
|
||||
<div id="content">
|
||||
<div style="padding:10px;text-align: center">
|
||||
<img alt="Vue logo" src="./assets/logo.png">
|
||||
</div>
|
||||
<div class="input-box">
|
||||
<input type="text" class="idCardNumber" readonly placeholder="请输入" v-model="idCardNumber">
|
||||
</div>
|
||||
<KeyBoard v-model="idCardNumber" :max="18" :space="10"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import KeyBoard from './components/Keyboard.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
name: 'App',
|
||||
components: {
|
||||
KeyBoard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
idCardNumber: '', input: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
show(e) {
|
||||
this.input = e.target
|
||||
if (!this.visible) this.visible = true
|
||||
},
|
||||
cancel() {
|
||||
this.visible = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
margin-top: 60px;
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
background-color: #0974FF;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#container {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
position: absolute;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#content {
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
max-width: 1200px;
|
||||
height: calc(100vh - 100px);
|
||||
margin: 50px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder { /* WebKit browsers */
|
||||
color: #5FABFB;
|
||||
}
|
||||
|
||||
.idCardNumber {
|
||||
border-radius: 5px;
|
||||
padding: 6px 20px;
|
||||
border: solid 1px #5FABFB;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
box-sizing: border-box;
|
||||
line-height: 40px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.idCardNumber:focus {
|
||||
border-color: #5fb2fb;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
118
src/components/Keyboard.vue
Normal file
118
src/components/Keyboard.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="keyboard" ref="keyboard">
|
||||
<div class="row" v-for="(row, index) in keys" :key="index">
|
||||
<div class="col" v-for="k in row" :key="k.key"
|
||||
:style="{width:k.normal?normalWidth:specialWidth,margin:itemSpace + 'px'}"
|
||||
@click.stop="handleClick(k)">{{ k.text }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Keyboard',
|
||||
props: {
|
||||
msg: String,
|
||||
value: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
space: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
max: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
const _keys = ['1234567890', 'qwertyuiop', 'asdfghjkl', '~zxcvbnm-'], texts = {'~': '清 空', '-': '回 退'}
|
||||
const keys = [];
|
||||
_keys.forEach(_l => {
|
||||
_l = _l.split('');
|
||||
let _r = [];
|
||||
_l.forEach(key => {
|
||||
let _item = texts[key];
|
||||
_r.push({
|
||||
text: _item || key.toUpperCase(),
|
||||
key,
|
||||
normal: !_item
|
||||
})
|
||||
})
|
||||
keys.push(_r);
|
||||
})
|
||||
return {
|
||||
keys,
|
||||
itemSpace: this.space / 2,
|
||||
totalWidth: 1000,
|
||||
normalWidth: '',
|
||||
specialWidth: '',
|
||||
originValue: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.originValue = this.value.split('')
|
||||
this.updateItemStyle();
|
||||
},
|
||||
methods: {
|
||||
updateItemStyle() {
|
||||
console.log('==>', this.space)
|
||||
this.$nextTick(() => {
|
||||
let _width = this.$refs.keyboard.clientWidth - this.space * 10;
|
||||
let normal = _width / 10, special = normal * 1.5 + this.space / 2;
|
||||
this.normalWidth = normal + 'px'
|
||||
this.specialWidth = special + 'px';
|
||||
this.totalWidth = _width;
|
||||
});
|
||||
},
|
||||
handleClick(item) {
|
||||
const {key} = item;
|
||||
if (key == '~') {
|
||||
this.originValue = [];
|
||||
} else if (key == '-') {
|
||||
const v = this.originValue;
|
||||
v.pop();
|
||||
this.originValue = v;
|
||||
} else {
|
||||
// 限制最大长度
|
||||
if (this.max > 0 && this.originValue.length < this.max) {
|
||||
this.originValue.push(key);
|
||||
}
|
||||
}
|
||||
this.$emit('input', this.originValue.join(''))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.keyboard {
|
||||
margin: 10px -10px;
|
||||
font-size: 22px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.col {
|
||||
color: #3998FB;
|
||||
background-color: #E6EFFF;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
line-height: 50px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color:rgba(255,255,255,0)
|
||||
/*margin-bottom: 10px !important;*/
|
||||
}
|
||||
|
||||
.col:active {
|
||||
background-color: #5FABFB;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
@ -4984,6 +4984,13 @@ jsprim@^1.2.2:
|
||||
json-schema "0.2.3"
|
||||
verror "1.10.0"
|
||||
|
||||
"keybord@git+http://git.wm-app.xyz/dev/vue-keyborad.git":
|
||||
version "0.1.0"
|
||||
resolved "git+http://git.wm-app.xyz/dev/vue-keyborad.git#9fdaf7b31ab8ad3a40346b88d672f5789b24707d"
|
||||
dependencies:
|
||||
core-js "^3.6.5"
|
||||
vue "^2.6.11"
|
||||
|
||||
killable@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.npm.taobao.org/killable/download/killable-1.0.1.tgz#4c8ce441187a061c7474fb87ca08e2a638194892"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user