ai

.gitignore

@@ -12,6 +12,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+yarn.lock
 
 # Editor directories and files
 .idea

index.js

@@ -0,0 +1,6 @@
+import Keyboard from '@/components/Keyboard.vue'
+
+Keyboard.install = function(Vue) {
+    Vue.component(Keyboard.name, Keyboard)
+}
+export default Keyboard

package.json

@@ -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"

src/App.vue

@@ -1,28 +1,93 @@
 <template>
-  <div id="app">
+    <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+        <div id="container">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+            <div id="content">
-  </div>
+                <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',
+    name: 'App',
-  components: {
+    components: {
-    HelloWorld
+        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;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
+    -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -moz-osx-font-smoothing: grayscale;
-  text-align: center;
+    background-color: #0974FF;
-  color: #2c3e50;
+    height: 100vh;
-  margin-top: 60px;
+}
+
+#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>

src/components/HelloWorld.vue

@@ -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>

src/components/Keyboard.vue

@@ -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>

yarn.lock

@@ -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"