Heim >Web-Frontend >js-Tutorial >So verwenden Sie Vue, um den js-Ziffernblock einzuführen
Dieses Mal zeige ich Ihnen, wie Sie mit vue den js-Ziffernblock einführen. Der Effekt ist wie folgt:
Der Code lautet wie folgt:
keyboard.vue
<template> <p class="keyboard" v-show="showKeyboard" v-clickoutside="closeModal"> <p v-for="keys in keyList"> <template v-for="key in keys"> <i v-if="key === 'top'" @click.stop="clickKey" class="iconfont icon-zhiding tab-top"></i> <i v-else-if="key === '123'" @click.stop="clickKey" class="tab-num">123</i> <i v-else-if="key === 'del'" @click.stop="clickKey" id="del" class="iconfont icon-delete key-delete"></i> <i v-else-if="key === 'blank'" @click.stop="clickKey" class="iconfont icon-konggejian-jianpanyong tab-blank"></i> <i v-else-if="key === 'symbol'" @click.stop="clickKey" class="tab-symbol">符</i> <i v-else-if="key === 'point'" @click.stop="clickKey" class="tab-point">·</i> <i v-else-if="key === 'enter'" @click.stop="clickKey" class="iconfont icon-huiche tab-enter"></i> <i v-else @click.stop="clickKey" >{{key}}</i> </template> </p> </p> </template> <script> import clickoutside from '../../directives/clickoutside' export default { directives: { clickoutside }, data() { return { keyList: [], status: 2,//0 小写 1 大写 2 数字 3 符号 lowercase: [ ['7', '8', '9'], ['4', '5', '6'], ['1', '2', '3'], ['.','0','del'], ], //equip:!!navigator.userAgent.toLocaleLowerCase().match(/ipad|mobile/i)//是否是移动设备 } }, props: { option: { type: Object } }, computed: { showKeyboard(){ return this.option.show } }, mounted() { this.keyList = this.lowercase }, methods: { tabHandle({ value = '' }) { if(value.indexOf('tab-num') > -1){ this.status = 2 //数字键盘数据 }else if(value.indexOf('key-delete') > -1){ console.log(value.indexOf('key-delete')) this.emitValue('delete') }else if(value.indexOf('tab-blank') > -1){ this.emitValue(' ') }else if(value.indexOf('tab-enter') > -1){ this.emitValue('\n') }else if(value.indexOf('tab-point') > -1){ this.emitValue('.') }else if(value.indexOf('tab-symbol') > -1){ this.status = 3 }else if(value.indexOf('tab-top') > -1){ if(this.status === 0){ this.status = 1 }else{ this.status = 0 this.keyList = this.lowercase } }else{ } }, clickKey(event) { // if(event.type === 'click' && this.equip) return let value = event.srcElement.innerText; let id = event.srcElement.id; let target = event.srcElement ? event.srcElement : event.target; if(id !== '' && id === 'del'){//如果点击的是id为del的表示是删除 this.emitValue(id); }else{//否则 value && id !== 'del'? this.emitValue(value) : this.tabHandle(target.classList); } }, emitValue(key) { console.log(key) this.$emit('keyVal', key) }, closeModal(e) { if (e.target !== this.option.sourceDom) { // this.showKeyboard = false this.$emit('close', false) } } } } </script> <style scoped lang="less"> keyboard { display: inline-block; width: 263px; font-size: 18px; border-radius: 2px; background-color: #e5e6e8; user-select: none; bottom: 0; position: absolute;/*定位数字键盘*/ left: -20px; top: 77px; z-index: 999; pointer-events: auto; p { width: 100%; margin: 0 auto; height: 42px; margin-bottom: 0.5em; display: flex; display: -webkit-box; flex-direction: row; flex-wrap: nowrap; justify-content: center; i { display: block; margin: 0 0.2%; height: 50px; line-height: 52px; font-style: normal; font-size: 24px; border-radius: 3px; width: 44px; background-color: #fff; text-align: center; flex-grow: 1; flex-shrink: 1; flex-basis: 0; -webkit-box-flex: 1; &:active { background-color: darken(#ccc, 10%); } } .tab-top { width: 50px; margin: 0 1%; background: #cccdd0; color: #fff; font-size: 24px; } .key-delete { width: 47px; margin: 0 0.2%; color: #827f7f; background: ; } .tab-num { font-size: 18px; background: #dedede; color: #5a5959; } .tab-point { width: 20px; } .tab-blank { width: 50px; font-size: 12px; padding: 0 15px; color: #5a5959; line-height: 60px; } .tab-symbol { width: 20px; font-size: 18px; } .tab-enter { font-size: 30px; line-height: 54px; } &:nth-child(2) { width: 100%; } } } </style>
Geben Sie den Code auf der Nutzungsseite ein:
HTML-Code
Einführung in die numerische Tastatur-Vue
Registrieren des eingeführten Primärschlüssels
definierte Methode
Originallink:
https://blog. csdn.net/qq_39313596/article/details/80294387Vielen Dank an den ursprünglichen Autor für das Schreiben dieses Artikels Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung gängiger integrierter Funktionen in JSWie man js verwendet um Ajax-Funktionsfunktionen und -verwendung zu kapselnDas obige ist der detaillierte Inhalt vonSo verwenden Sie Vue, um den js-Ziffernblock einzuführen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!