vue-虚拟键盘组建

• 父组建

// inputStr-输入的内容
// showKeyBoard-是否展示数据键盘
<keyboard v-model="inputStr" :visible.sync="showKeyBoard" />

• 子组建

// html
<div id="keycontent" v-if="visible"><div id="keyboard"><div class="keyTitle"><div class="keyHide" @click="confirm">收起</div></div><div class="keyContent"><template v-if="isN"><ul class="number"><li v-for="i in numberArr" :key="i" @click="addKey(i)">{{i}}</li></ul><div class="numSwitch" @click="changeType">ABC</div><div class="numDel" @click="deleteKeys">删除</div></template><template v-else><ul class="english"><li v-for="i in enData" :key="i" @click="addKey(i)">{{i}}</li></ul><div class="caseSwitch" @click="changeCase">切换</div><div class="del" @click="deleteKeys">删除</div><div class="bottom"><div class="englishSwitch" @click="changeType">123</div><div class="space" @click="confirm">确定</div></div></template></div></div><div class="keyMask"></div></div>// js
export default {props: {value: {type: String,default: ''},visible: {type: Boolean,default: false}},data () {return {enData: [], // 字母数组isN: true, // 默认展示数字键盘isF: false,inputStr: ''}},watch: {inputStr (newStr) {this.$emit('input', newStr)}},created () {},computed: {numberArr () {const num = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]return num.sort(function (a, b) {return 0.5 - Math.random()})}},methods: {changeType () {this.isN = !this.isN!this.isN && this.getENDate('a')},changeCase () {this.getENDate(this.isF ? 'a' : 'A')this.isF = !this.isF},getENDate (type) {this.enData = []const sumS = type === 'a' ? 32 : 0for (let i = (65 + sumS); i < (91 + sumS); i++) {this.enData.push(String.fromCharCode(i))}},addKey (str) {this.inputStr += str},deleteKeys () {// 删除字符this.inputStr = this.inputStr.slice(0, this.inputStr.length - 1)},confirm () {this.$emit('update:visible', false)}}
}// css
#keycontent{position: absolute;left: 0;right: 0;bottom: 0;top: 0;overflow: hidden;#keyboard{position: absolute;left: 0;right: 0;bottom: 0;height: 4.14rem;width: 100%;background-color: #f2f2f2;font-size: .14rem;z-index: 9999;.caseSwitch{height: calc(3.7rem / 4 - 0.04rem);line-height: calc(3.7rem / 4 - 0.04rem);background-color: #e1e1e1;text-align: center;width: calc(12% + 0.16rem);position: absolute;left: .04rem;bottom: calc(3.36rem / 4 + 0.08rem);border-radius: .08rem;}.del{height: calc(3.7rem / 4 - 0.04rem);line-height: calc(3.7rem / 4 - 0.04rem);background-color: #e1e1e1;text-align: center;width: calc(12% + 0.16rem);position: absolute;right: .04rem;bottom: calc(3.36rem / 4 + 0.08rem);border-radius: .08rem;}.bottom{height: calc(3.36rem / 4);position: absolute;left: 0;right: 0;bottom: .04rem;padding: 0 .02rem;display: flex;.englishSwitch{width: 2rem;line-height: calc(3.36rem / 4);background-color: #e1e1e1;text-align: center;border-radius: .08rem;}.space{line-height: calc(3.36rem / 4);background-color: #e1e1e1;text-align: center;border-radius: .08rem;flex-grow: 1;margin: 0 .04rem;}}.numSwitch{width: calc(33.33%);height: calc(3.78rem / 4);line-height: calc(3.78rem / 4);background-color: #f2f2f2;text-align: center;position: absolute;left: 0;bottom: 0;}.numDel{width: calc(33.33% - 2px);height: calc(3.78rem / 4);line-height: calc(3.78rem / 4);background-color: #f2f2f2;text-align: center;position: absolute;right: 0;bottom: 0;}.keyTitle {width: 100%;height: .36rem;line-height: .36rem;padding-right: .24rem;box-sizing: border-box;text-align: right;.keyHide{font-size: .12rem;color: #3975C6;}}.keyContent{width: 100%;// 数字.number{display: flex;flex-wrap: wrap;width: 100%;justify-content:center;position: absolute;li{flex: 0 0 calc(33.33% - 1px);height: calc(3.78rem / 4);line-height: calc(3.78rem / 4);background-color: #ffffff;text-align: center;border-top: 1px solid #f2f2f2;border-right:1px solid #f2f2f2;}}// 字母.english{display: flex;flex-wrap: wrap;width: 100%;justify-content:center;position: absolute;li{width: calc((100% + 0.24rem) / 11);height: calc(3.7rem / 4);line-height: calc(3.7rem / 4);background-color: #ffffff;text-align: center;margin: .02rem;border-radius: .08rem;float: left;border: 1px solid #e8dddd;box-sizing: border-box;&:nth-child(11) {margin-left: .1rem;}}}@media screen and (min-width: 583px) {.english {li {&:nth-child(11) {margin-left: 24px;}}}.caseSwitch {width: 90px;left: 3px;}.del {width: 90px;right: 3px;}}}}.keyMask{position: absolute;left: 0;right: 0;bottom: 0;top: 0;height: 100%;background:none;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！