0.2.2 • Published 4 years ago
vue-keyboard-zh v0.2.2
vue-keyboard-zh
<template>
<div id="app">
<textarea class="textarea" rows="10" v-model="value" @focus="show"></textarea>
<Keyboard layout='numeric' :input="input" v-if="visible" :cancel='cancel'></Keyboard>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
value: '',
input: null,
visible: false
}
},
methods: {
show(e) {
this.input = e.target
if (!this.visible) this.visible = true
},
cancel() {
this.visible = false
}
}
}
</script>
<style scoped>
.textarea {
width: 100%;
padding: 10px 20px;
box-sizing: border-box;
}
</style>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
input | 触发元素 | HTMLInputElement/HTMLTextAreaElement | - | - |
layout | 键盘类型,normal: 普通字母键盘, numeric: 数字键盘 | string | normal/numeric | normal |
cancel | 关闭键盘 | Function | - | - |
本人菜鸟, 多多指教