free-keyboard
Version:
为vue量身定做的、功能完善的、提供丰富自定义功能的前端键盘组件
775 lines (704 loc) • 64.8 kB
JavaScript
(function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory();
else if(typeof define === 'function' && define.amd)
define([], factory);
else {
var a = factory();
for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
}
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // identity function for calling harmony imports with the correct context
/******/ __webpack_require__.i = function(value) { return value; };
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "/dist/";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 2);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
/* styles */
__webpack_require__(7)
var Component = __webpack_require__(5)(
/* script */
__webpack_require__(1),
/* template */
__webpack_require__(6),
/* scopeId */
null,
/* cssModules */
null
)
Component.options.__file = "/Users/zhaoxiaoyang01/Documents/daydayup/npm/free-keyboard/src/app.vue"
if (Component.esModule && Object.keys(Component.esModule).some(function (key) {return key !== "default" && key !== "__esModule"})) {console.error("named exports are not supported in *.vue files.")}
if (Component.options.functional) {console.error("[vue-loader] app.vue: functional components are not supported with templates, they should use render functions.")}
/* hot reload */
if (false) {(function () {
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), false)
if (!hotAPI.compatible) return
module.hot.accept()
if (!module.hot.data) {
hotAPI.createRecord("data-v-6cde7a71", Component.options)
} else {
hotAPI.reload("data-v-6cde7a71", Component.options)
}
})()}
module.exports = Component.exports
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
/**
* 兼容ios :active 样式效果
**/
document.body.addEventListener("touchstart", function () {});
/* harmony default export */ __webpack_exports__["default"] = ({
data() {
return {
isCallUp: true, // 键盘显示隐藏
animation: true, // 键盘滑入 滑出的动画 状态区分 true 默认滑入
isIosSystem: false, // 是否为ios系统 默认false
isUpper: false, // 监听大小写状态
keyboardType: "", // 键盘类型
customArr: [], // 字符数组
// 英文键arr 默认小写
englishArrList: [["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"], ["a", "s", "d", "f", "g", "h", "j", "k", "l"], ["shift", "z", "x", "c", "v", "b", "n", "m"]],
// 纯数字键arr
numberKey: ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
};
},
mounted() {
// 初始化数据
this.initData();
// 初始化逻辑
this.init();
},
methods: {
/**
* 初始化数据
**/
initData() {
this.isIosSystem = this.isInIOS(); // true:ios终端
this.keyboardType = this.keyboardParameter.type; // 按需加载键盘
this.switchKey = this.keyboardType !== 'english' ? false : this.keyboardParameter.switchKey; // 是否展示"键盘切换按钮". 策略：1.从传入的配置去 2.非英文键盘下不可切换键盘,默认false
this.customKeys = this.keyboardParameter.customKeys; // 自定义字符
this.inputEl = this.keyboardParameter.el; // input Dom
this.keybordEl = this.$refs.keyboard; // 获取键盘Dom
this.begainDelTimeOutId = null; // 长按500毫秒后执行删除的定时器
this.keepDelTimeId = null; // 持续删除的定时器
this.defaultCharacter = ['@', '_', '.', '!', '%', '*', '/']; // 可切换状态下的默认字符
this.penObjSrc = "//mapcarowner-gz.cdn.bcebos.com/default/e4706a52d4781c8eb45134c73a94278f.png"; // 画笔 url
// 通过判断switchKey（是否展示"键盘切换按钮"）来更新键盘两侧字符数组 自定义字符种类最多8种
this.customArr = this.switchKey ? this.defaultCharacter : this.customKeys.slice(0, 9);
},
/**
* 初始化逻辑
**/
init() {
// 是否首次调用键盘
if (this.isCallUp) {
// 防止在键盘区域滑动屏幕
this.keybordEl.addEventListener("touchmove", event => {
event.preventDefault();
}, { passive: false });
// 点击屏幕隐藏键盘
this.clickScreenHidekeyboard();
// 由于键盘需要遍历渲染 延时为了获取渲染后的键盘高度
this.$nextTick(() => {
// 显示键盘辅助元素 (撑起页面的div、 画笔)
this.auxiliaryDom();
});
}
// 删除键盘辅助元素 (画笔光标) 直接在input之间切换 inputSwitch为true 不卸载键盘
if (this.inputSwitch) {
// 卸载键盘
this.delAuxiliaryDom();
this.isUpper = false; // 默认小写状态
this.inputSwitch = false;
}
},
/**
* 英文数字 键盘切换
* 键盘类型：english(英文键盘)/number(数字键盘)/customNum(自定义键盘)
**/
switchkeyboard() {
// 更新键盘类型
this.keyboardType = this.keyboardType === 'english' ? 'customNum' : 'english';
},
/**
* 显示键盘辅助元素
* 1.键盘调起后 撑起页面的div
* 2.添加画笔光标来提示当前操作的input对象
**/
auxiliaryDom() {
// 键盘调起后 撑起页面的div
if (!document.querySelector(".div-bottom-auxiliary")) {
let divBottomAuxiliary = document.createElement("div");
divBottomAuxiliary.style.height = this.keybordEl.offsetHeight + 'px';
divBottomAuxiliary.className = "div-bottom-auxiliary";
document.body.appendChild(divBottomAuxiliary);
}
// 添加画笔光标来提示当前操作的input对象
this.addImgDom();
},
/**
* 添加画笔光标来提示当前操作的input对象
* 说明：1.使用flex布局
* (1)水平布局
* (2)垂直布局
* 2.非flex布局 input,display属性为block和-webkit-box两种情况
**/
addImgDom() {
let iDom = this.createElement("i", "i-dom");
let penObj = this.createElement("img", "pen-img-cursor");
penObj.src = this.penObjSrc;
iDom.appendChild(penObj);
this.inputEl.parentNode.insertBefore(iDom, this.inputEl.nextSibling);
// 判断是否使用flex布局
let isFlex = this.getStyle(this.inputEl.parentNode, 'display').includes('flex');
// input，display属性可能为block 处理input不同情况下画笔的状态 获取display值
let inputElDisplay = this.getStyle(this.inputEl, 'display');
if (!isFlex && (inputElDisplay === 'block' || inputElDisplay.includes('box'))) {
// 非flex布局
iDom.className = 'i-dom';
iDom.style.width = this.inputEl.offsetWidth + 'px';
penObj.className = 'pen-obj';
} else {
// 判断是否使用flex垂直布局
let isFlexColumn = this.getStyle(this.inputEl.parentNode, 'flex-direction').includes('column') || this.getStyle(this.inputEl.parentNode, 'flex-flow').includes('column');
// input可能存在margin-right 处理flex布局后的画笔水平位置
let marginRightNum = parseInt(this.getStyle(this.inputEl, 'margin-right').slice(0, this.getStyle(this.inputEl, 'margin-right').length - 2), 10);
if (isFlexColumn) {
iDom.style.width = this.inputEl.offsetWidth + 'px';
marginRightNum === 0 ? penObj.className = 'pen-obj' : penObj.style.transform = 'translate(-' + marginRightNum / 2 + 'px, -100%)';
} else {
penObj.className = 'pen-obj-flex';
penObj.style.transform = marginRightNum === 0 ? 'translate(0, -50%)' : 'translate(-' + marginRightNum + 'px, -50%)';
}
}
},
/**
* 创建Dom
* @params {String} tagName Dom标签名
* @params {String} id Dom id名
**/
createElement(tagName, id) {
if (tagName && id) {
let dom = document.createElement(tagName);
dom.id = id;
// dom.setAttribute('data-v-1449241a', '');
return dom;
}
},
/**
* 获取指定元素的css属性值
* @params {Object} element 指定Dom元素
* @params {String} attr 指定css属性名
**/
getStyle(element, attr) {
return getComputedStyle(element, false)[attr];
},
/**
* 单点删除单个
**/
deletekey() {
let values = this.inputEl.value;
if (!values.length) {
// 当value值为空时
this.delTouchend();
return;
} else {
// 删除实时更新value值
this.inputEl.value = values.substring(0, values.length - 1);
}
},
/**
* 长按删除开始
**/
delTouchstart() {
// 删除
this.deletekey();
// 长按500毫秒后执行持续删除
this.begainDelTimeOutId = setTimeout(() => {
// 开始持续删除
this.keepDelTimeId = setInterval(() => {
this.deletekey();
}, 80);
}, 500);
},
/**
* 长按删除结束 清除定时器
**/
delTouchend() {
// 清除持续删除定时器
clearInterval(this.keepDelTimeId);
this.keepDelTimeId = null;
// 清除长按定时器
clearTimeout(this.begainDelTimeOutId);
this.begainDelTimeOutId = null;
},
/**
* 同步输入框内容 、 字母大小写切换 、 完成
**/
upClickButton(key) {
switch (String(key)) {
case "shift":
// 大小写切换
this.isUpper = !this.isUpper;
break;
case "enter":
// 卸载销毁键盘
this.$uninstallKeyboard();
break;
default:
// 根据大小写状态改变传入的 key值 大小写
key = this.isUpper ? key.toLocaleUpperCase() : key;
// 判断可输入最大长度 并更新input值 value
if (this.inputEl.value.length < this.keyboardParameter.maxLength) {
this.inputEl.value += key;
}
break;
}
},
/**
* 点击屏幕隐藏键盘
**/
clickScreenHidekeyboard() {
document.querySelector('body').addEventListener('click', e => {
// 卸载销毁键盘
this.$uninstallKeyboard();
});
},
/**
* 因为给body添加点击事件 所以给键盘 add 阻止冒泡
**/
keyboardClick() {
return;
},
/**
* 是否在ios
**/
isInIOS() {
return navigator.userAgent && /iPad|iPhone|iPod/i.test(navigator.userAgent);
},
/**
* 删除键盘辅助元素 画笔光标 卸载
* 根据inputSwitch 用来区分两种情况
* 1. 直接走卸载流程 （点屏幕卸载键盘、切换不需要调用自定义键盘的input）
* 2. 直接在input之间切换键盘 不需要卸载键盘
**/
delAuxiliaryDom() {
// 删除画笔光标
let iDom = document.querySelector('#i-dom');
iDom.parentNode.removeChild(iDom);
// 卸载
if (!this.inputSwitch) {
// 删除撑起页面的div
document.body.removeChild(document.querySelector(".div-bottom-auxiliary"));
// 移出body点击事件
document.querySelector('body').removeEventListener("click", () => {});
this.animation = false;
setTimeout(() => {
// 卸载键盘
this.isCallUp = false;
}, 200);
}
}
}
});
/***/ }),
/* 2 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__app_vue__ = __webpack_require__(0);
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__app_vue___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__app_vue__);
/**
* @file 自定义键盘插件 CustomKeyboard
* @description 包含纯数字键盘 自定义数字键盘 英文键盘
*
* 开启键盘
* @param {Object} options 调用键盘需要的配置参数
* 说明 凡是调用键盘必传 options 对象
* 情形1：当键盘类型 options.type 不传这个type字段时 默认调用英文键盘 并可切换到数字键盘
* 情形2：当键盘类型 options.type type字段传类型时 按需调用键盘 english英文 number数字 customNum自定义数字
* 情形3：当input对象 options.el 没传时，如果初始化过键盘，则卸载键盘
* this.$keyboard({
* type: 'english', // 当前默认调起的键盘类型 english英文 number数字 customNum自定义数字
* el: {}, // 当前输入框对象
* value: '', // input值
* maxLength: 20, // 更新input本身最大字符长度maxLength，如果没有设置，默认长度为20字符
* switchKey: true, // 是否可以切换英文数字键盘 true 默认可以
* customKeys: ["@", "_", ".", "!", "%", "*", "/", "+"], // 用户自定义字符 最大限制8种
* });
*
*/
const _CUSTOMKEYBOARD = {
component: null
};
/* harmony default export */ __webpack_exports__["default"] = ({
install(Vue) {
// 添加实例方法
Vue.prototype.$keyboard = options => {
// options中没传input对象直接return
if (Object.prototype.toString.call(options) !== '[object Object]' || !options.el) {
// 如果初始化过键盘，则卸载
Vue.prototype.$uninstallKeyboard();
return;
}
// 键盘默认配置
let defaultConfig = {
type: 'english', // 当前默认调起的键盘类型 english 英文 number 数字 customNum 自定义数字
el: options.el, // input对象
value: options.el.value, // input值
maxLength: options.el.maxLength !== -1 ? options.el.maxLength : 20, // 更新input本身最大字符长度maxLength，如果没有设置，默认长度为20字符
switchKey: true, // 是否可以切换英文数字键盘 false 默认不可以
customKeys: ['@', '_', '.', '!', 'X', '*', '/', '+'] // 用户自定义字符 最大限制8种
};
// options中input对象存在 进行参数配置更新
if (options.type === undefined) {
// 类型不传时调用默认键盘
options = defaultConfig;
} else if (typeof options.type === 'string') {
// 合并 options参数 与 默认参数
options = Object.assign(defaultConfig, options);
} else {
return;
}
// 禁用系统键盘
document.activeElement.blur();
// 判断组件是否挂载
if (!_CUSTOMKEYBOARD.component) {
let CustomKeyboardComponent = Vue.extend(__WEBPACK_IMPORTED_MODULE_0__app_vue___default.a);
_CUSTOMKEYBOARD.component = new CustomKeyboardComponent();
// 将参数赋值给组件内对象 keyboardParameter
setTimeout(() => {
_CUSTOMKEYBOARD.component.keyboardParameter = options;
let element = _CUSTOMKEYBOARD.component.$mount().$el;
document.body.appendChild(element);
}, 100);
}
// input之间切换
else {
_CUSTOMKEYBOARD.component.keyboardParameter = options;
// 删除键盘辅助元素 (画笔光标) inputSwitch true 直接在input之间切换 无滑动效果
_CUSTOMKEYBOARD.component.inputSwitch = true;
// 手动挂载
_CUSTOMKEYBOARD.component.$mount();
}
};
Vue.prototype.$uninstallKeyboard = () => {
// 卸载键盘
if (_CUSTOMKEYBOARD.component) {
// 删除键盘辅助元素 (撑起页面的div、 画笔光标) 不传值 走卸载 滑动隐藏键盘
_CUSTOMKEYBOARD.component.delAuxiliaryDom();
_CUSTOMKEYBOARD.component = null;
// 取消屏蔽系统键盘
document.activeElement.focus();
}
};
}
});
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
exports = module.exports = __webpack_require__(4)(true);
// imports
// module
exports.push([module.i, "#i-dom {\n position: relative;\n}\n\n#pen-img-cursor {\n width: 0.493333rem;\n animation: twinkling 1.5s infinite ease-in-out;\n position: absolute;\n right: 0;\n}\n\n.keyboard {\n width: 100%;\n background: #d8d7df;\n overflow: hidden;\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: 99;\n padding-bottom: 0.6rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.keyboard .i-dom {\n display: block;\n}\n\n.keyboard .pen-obj {\n transform: translate(0, -100%);\n}\n\n.keyboard .pen-obj-flex {\n top: 50%;\n}\n\n@keyframes twinkling {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.keyboard .div-auxiliary-mask {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 9;\n background: rgba(0, 0, 0, 0);\n}\n\n.keyboard .keyboard-animation-up {\n animation: slideUp 0.2s forwards;\n}\n\n.keyboard .keyboard-animation-down {\n animation: slideDown 0.2s forwards;\n}\n\n@keyframes slideUp {\n 0% {\n transform: translateY(100%);\n }\n\n 100% {\n transform: translateY(0);\n }\n}\n\n@keyframes slideDown {\n 0% {\n transform: translateY(0);\n }\n\n 100% {\n transform: translateY(100%);\n }\n}\n\n.keyboard .keyboard-key {\n padding-top: 0.133333rem;\n width: 96%;\n margin: 0 auto;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.keyboard .button {\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 0.96rem!important;\n text-align: center;\n line-height: 0.986667rem;\n margin: 0.133333rem 0.08rem!important;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n}\n\n.keyboard .keyboard-custom-number,\n.keyboard .keyboard-number {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n margin: 0;\n padding: 0;\n vertical-align: bottom;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.keyboard .pos-mid-button-num {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 1;\n flex: 1;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-mid-button-num .buttonnum {\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 1rem!important;\n text-align: center;\n line-height: 0.986667rem;\n margin: 0.08rem!important;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n width: 30%;\n}\n\n.keyboard .pos-mid-button-num .buttonnum:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-number-button-num {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-number-button-num .buttonnum {\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 1rem!important;\n text-align: center;\n line-height: 0.986667rem;\n margin: 0.08rem!important;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n width: 30%;\n}\n\n.keyboard .pos-number-button-num .buttonnum:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-right-button-num {\n display: -ms-flexbox;\n display: flex;\n width: 15%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-right-button-num .buttonright {\n width: 100%;\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 2.16rem!important;\n text-align: center;\n line-height: 2.16rem;\n margin: 0.08rem!important;\n -webkit-box-shadow: 0 0.013333rem 0.013333rem #989898;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n}\n\n.keyboard .pos-right-button-num .buttonright:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-left-button-num {\n display: -ms-flexbox;\n display: flex;\n width: 15%;\n height: 93%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter {\n width: 100%;\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 1rem;\n text-align: center;\n line-height: 1rem;\n margin: 0.08rem!important;\n -webkit-box-shadow: 0 0.013333rem 0.013333rem #989898;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-1 {\n height: 97%;\n line-height: 4.48rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-2 {\n height: 46%;\n line-height: 2.15rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-3 {\n height: 29.5%;\n line-height: 1.38rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-4 {\n height: 21.1%;\n line-height: 1rem;\n}\n\n.keyboard .hide-button {\n display: none;\n}\n\n.keyboard .button-num {\n width: 33.33%;\n height: 0.64rem;\n border: 0;\n border: 0.013333rem solid #000000;\n font-size: 0.2rem;\n cursor: pointer;\n}\n\n.keyboard .button-num:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .button-num:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .button-num-two {\n width: 100%;\n height: 1.28rem;\n border: 0;\n border: 0.013333rem solid #000000;\n font-size: 0.2rem;\n cursor: pointer;\n}\n\n.keyboard .button-num-two:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .button-num-two:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter {\n width: 100%;\n margin: 0;\n padding: 0;\n}\n\n.keyboard .keyboard-letter .line-1,\n.keyboard .keyboard-letter .line-2,\n.keyboard .keyboard-letter .line-3,\n.keyboard .keyboard-letter .line-4 {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n\n.keyboard .keyboard-letter .line-1 .button-num-btn {\n width: 10%;\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-1 .button-num-btn:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-1 .button-num-btn:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-2 {\n width: 90%;\n margin: 0 auto;\n}\n\n.keyboard .keyboard-letter .line-2 .button-num-btn {\n width: 10%;\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-2 .button-num-btn:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-2 .button-num-btn:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-3 {\n width: 100%;\n}\n\n.keyboard .keyboard-letter .line-3 .button-num-btn {\n width: 10%;\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-3 .button-num-btn:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-3 .button-num-btn:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-3 .button:nth-child(1) {\n width: 16%!important;\n}\n\n.keyboard .keyboard-letter .line-3 .button:nth-last-child(1) {\n width: 16%!important;\n}\n\n.keyboard .keyboard-letter .line-3 .arrowtop {\n position: absolute;\n width: 0;\n height: 0;\n border-left: 0.133333rem solid transparent;\n border-right: 0.133333rem solid transparent;\n border-bottom: 0.133333rem solid black;\n left: 50%;\n top: 20%;\n transform: translate(-50%);\n}\n\n.keyboard .keyboard-letter .line-3 .arrowbot {\n position: absolute;\n width: 0.08rem;\n height: 0.186667rem;\n background: #000;\n left: 50%;\n top: 42%;\n transform: translate(-50%);\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn,\n.keyboard .keyboard-letter .line-4 .button-num-two {\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn:hover,\n.keyboard .keyboard-letter .line-4 .button-num-two:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn:active,\n.keyboard .keyboard-letter .line-4 .button-num-two:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-4 .specialkey {\n width: 100%!important;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn {\n width: 13%;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-two {\n width: 70%;\n}\n\n.keyboard .input-box {\n font-size: 0.466667rem;\n font-weight: bold;\n height: 0.533333rem;\n border-bottom: 0.013333rem solid #aaa;\n padding: 0.133333rem 0.2rem;\n text-align: right;\n width: 90%;\n}\n\n.keyboard .only-enter {\n background: #157ef7!important;\n color: #fff!important;\n}\n\n.keyboard .del {\n position: relative;\n}\n\n.keyboard .del img.delico {\n width: 100%;\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.keyboard .del img.englishdelico {\n transform: translate(-50%, -50%) scale(0.5);\n}\n\n.keyboard .del img.customNumdelico {\n transform: translate(-50%, -50%) scale(0.4);\n}\n\n.keyboard .del img.numberdelico {\n transform: translate(-50%, -50%) scale(0.25);\n}\n\n.keyboard .iphonex-bottom {\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n}", "", {"version":3,"sources":["/Users/zhaoxiaoyang01/Documents/daydayup/npm/free-keyboard/src/<input css 1>"],"names":[],"mappings":"AAAA;EACE,mBAAmB;CACpB;;AAED;EACE,mBAAmB;EACnB,+CAA+C;EAC/C,mBAAmB;EACnB,SAAS;CACV;;AAED;EACE,YAAY;EACZ,oBAAoB;EACpB,iBAAiB;EACjB,gBAAgB;EAChB,UAAU;EACV,QAAQ;EACR,YAAY;EACZ,uBAAuB;EACvB,0BAA0B;EAC1B,uBAAuB;EACvB,sBAAsB;EACtB,kBAAkB;CACnB;;AAED;EACE,eAAe;CAChB;;AAED;EACE,+BAA+B;CAChC;;AAED;EACE,SAAS;CACV;;AAED;EACE;IACE,WAAW;GACZ;;EAED;IACE,WAAW;GACZ;CACF;;AAED;EACE,gBAAgB;EAChB,YAAY;EACZ,aAAa;EACb,OAAO;EACP,QAAQ;EACR,WAAW;EACX,6BAA6B;CAC9B;;AAED;EACE,iCAAiC;CAClC;;AAED;EACE,mCAAmC;CACpC;;AAED;EACE;IACE,4BAA4B;GAC7B;;EAED;IACE,yBAAyB;GAC1B;CACF;;AAED;EACE;IACE,yBAAyB;GAC1B;;EAED;IACE,4BAA4B;GAC7B;CACF;;AAED;EACE,yBAAyB;EACzB,WAAW;EACX,eAAe;EACf,qBAAqB;EACrB,cAAc;EACd,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,+BAA+B;CAChC;;AAED;EACE,iCAAiC;EACjC,0BAA0B;EAC1B,uBAAuB;EACvB,0BAA0B;EAC1B,mBAAmB;EACnB,yBAAyB;EACzB,sCAAsC;EACtC,8CAA8C;EAC9C,kBAAkB;CACnB;;AAED;;EAEE,qBAAqB;EACrB,cAAc;EACd,YAAY;EACZ,UAAU;EACV,WAAW;EACX,uBAAuB;EACvB,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,+BAA+B;EAC/B,oBAAoB;EACpB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;CACrB;;AAED;EACE,qBAAqB;EACrB,cAAc;EACd,YAAY;EACZ,QAAQ;EACR,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,+BAA+B;EAC/B,oBAAoB;EACpB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;EACpB,oBAAoB;CACrB;;AAED;EACE,iCAAiC;EACjC,0BAA0B;EAC1B,uBAAuB;EACvB,uBAAuB;EACvB,mBAAmB;EACnB,yBAAyB;EACzB,0BAA0B;EAC1B,8CAA8C;EAC9C,kBAAkB;EAClB,2BAA2B;EAC3B,WAAW;CACZ;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,qBAAqB;EACrB,cAAc;EACd,YAAY;EACZ,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,+BAA+B;EAC/B,oBAAoB;EACpB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;EACpB,oBAAoB;CACrB;;AAED;EACE,iCAAiC;EACjC,0BAA0B;EAC1B,uBAAuB;EACvB,uBAAuB;EACvB,mBAAmB;EACnB,yBAAyB;EACzB,0BAA0B;EAC1B,8CAA8C;EAC9C,kBAAkB;EAClB,2BAA2B;EAC3B,WAAW;CACZ;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,qBAAqB;EACrB,cAAc;EACd,WAAW;EACX,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,+BAA+B;EAC/B,oBAAoB;EACpB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;EACpB,oBAAoB;CACrB;;AAED;EACE,YAAY;EACZ,iCAAiC;EACjC,0BAA0B;EAC1B,uBAAuB;EACvB,0BAA0B;EAC1B,mBAAmB;EACnB,qBAAqB;EACrB,0BAA0B;EAC1B,sDAAsD;EACtD,8CAA8C;EAC9C,kBAAkB;EAClB,2BAA2B;CAC5B;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,qBAAqB;EACrB,cAAc;EACd,WAAW;EACX,YAAY;EACZ,wBAAwB;EACxB,oBAAoB;EACpB,uBAAuB;EACvB,+BAA+B;EAC/B,oBAAoB;EACpB,gBAAgB;EAChB,uBAAuB;EACvB,oBAAoB;EACpB,oBAAoB;CACrB;;AAED;EACE,YAAY;EACZ,iCAAiC;EACjC,0BAA0B;EAC1B,uBAAuB;EACvB,aAAa;EACb,mBAAmB;EACnB,kBAAkB;EAClB,0BAA0B;EAC1B,sDAAsD;EACtD,8CAA8C;EAC9C,kBAAkB;EAClB,2BAA2B;CAC5B;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,YAAY;EACZ,qBAAqB;CACtB;;AAED;EACE,YAAY;EACZ,qBAAqB;CACtB;;AAED;EACE,cAAc;EACd,qBAAqB;CACtB;;AAED;EACE,cAAc;EACd,kBAAkB;CACnB;;AAED;EACE,cAAc;CACf;;AAED;EACE,cAAc;EACd,gBAAgB;EAChB,UAAU;EACV,kCAAkC;EAClC,kBAAkB;EAClB,gBAAgB;CACjB;;AAED;EACE,mBAAmB;EACnB,gBAAgB;CACjB;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,YAAY;EACZ,gBAAgB;EAChB,UAAU;EACV,kCAAkC;EAClC,kBAAkB;EAClB,gBAAgB;CACjB;;AAED;EACE,mBAAmB;EACnB,gBAAgB;CACjB;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,YAAY;EACZ,UAAU;EACV,WAAW;CACZ;;AAED;;;;EAIE,qBAAqB;EACrB,cAAc;EACd,wBAAwB;EACxB,oBAAoB;CACrB;;AAED;EACE,WAAW;EACX,oBAAoB;EACpB,kCAAkC;EAClC,uBAAuB;EACvB,4BAA4B;EAC5B,2BAA2B;EAC3B,gBAAgB;CACjB;;AAED;EACE,mBAAmB;EACnB,gBAAgB;CACjB;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,WAAW;EACX,eAAe;CAChB;;AAED;EACE,WAAW;EACX,oBAAoB;EACpB,kCAAkC;EAClC,uBAAuB;EACvB,4BAA4B;EAC5B,2BAA2B;EAC3B,gBAAgB;CACjB;;AAED;EACE,mBAAmB;EACnB,gBAAgB;CACjB;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,YAAY;CACb;;AAED;EACE,WAAW;EACX,oBAAoB;EACpB,kCAAkC;EAClC,uBAAuB;EACvB,4BAA4B;EAC5B,2BAA2B;EAC3B,gBAAgB;CACjB;;AAED;EACE,mBAAmB;EACnB,gBAAgB;CACjB;;AAED;EACE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,qBAAqB;CACtB;;AAED;EACE,qBAAqB;CACtB;;AAED;EACE,mBAAmB;EACnB,SAAS;EACT,UAAU;EACV,2CAA2C;EAC3C,4CAA4C;EAC5C,uCAAuC;EACvC,UAAU;EACV,SAAS;EACT,2BAA2B;CAC5B;;AAED;EACE,mBAAmB;EACnB,eAAe;EACf,oBAAoB;EACpB,iBAAiB;EACjB,UAAU;EACV,SAAS;EACT,2BAA2B;CAC5B;;AAED;;EAEE,oBAAoB;EACpB,kCAAkC;EAClC,uBAAuB;EACvB,4BAA4B;EAC5B,2BAA2B;EAC3B,gBAAgB;CACjB;;AAED;;EAEE,mBAAmB;EACnB,gBAAgB;CACjB;;AAED;;EAEE,iBAAiB;EACjB,kBAAkB;EAClB,0BAA0B;CAC3B;;AAED;EACE,sBAAsB;CACvB;;AAED;EACE,WAAW;CACZ;;AAED;EACE,WAAW;CACZ;;AAED;EACE,uBAAuB;EACvB,kBAAkB;EAClB,oBAAoB;EACpB,sCAAsC;EACtC,4BAA4B;EAC5B,kBAAkB;EAClB,WAAW;CACZ;;AAED;EACE,8BAA8B;EAC9B,sBAAsB;CACvB;;AAED;EACE,mBAAmB;CACpB;;AAED;EACE,YAAY;EACZ,mBAAmB;EACnB,SAAS;EACT,UAAU;CACX;;AAED;EACE,4CAA4C;CAC7C;;AAED;EACE,4CAA4C;CAC7C;;AAED;EACE,6CAA6C;CAC9C;;AAED;EACE,iDAAiD;EACjD,4CAA4C;CAC7C","file":"app.vue","sourcesContent":["#i-dom {\n position: relative;\n}\n\n#pen-img-cursor {\n width: 0.493333rem;\n animation: twinkling 1.5s infinite ease-in-out;\n position: absolute;\n right: 0;\n}\n\n.keyboard {\n width: 100%;\n background: #d8d7df;\n overflow: hidden;\n position: fixed;\n bottom: 0;\n left: 0;\n z-index: 99;\n padding-bottom: 0.6rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.keyboard .i-dom {\n display: block;\n}\n\n.keyboard .pen-obj {\n transform: translate(0, -100%);\n}\n\n.keyboard .pen-obj-flex {\n top: 50%;\n}\n\n@keyframes twinkling {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.keyboard .div-auxiliary-mask {\n position: fixed;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n z-index: 9;\n background: rgba(0, 0, 0, 0);\n}\n\n.keyboard .keyboard-animation-up {\n animation: slideUp 0.2s forwards;\n}\n\n.keyboard .keyboard-animation-down {\n animation: slideDown 0.2s forwards;\n}\n\n@keyframes slideUp {\n 0% {\n transform: translateY(100%);\n }\n\n 100% {\n transform: translateY(0);\n }\n}\n\n@keyframes slideDown {\n 0% {\n transform: translateY(0);\n }\n\n 100% {\n transform: translateY(100%);\n }\n}\n\n.keyboard .keyboard-key {\n padding-top: 0.133333rem;\n width: 96%;\n margin: 0 auto;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n\n.keyboard .button {\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 0.96rem!important;\n text-align: center;\n line-height: 0.986667rem;\n margin: 0.133333rem 0.08rem!important;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n}\n\n.keyboard .keyboard-custom-number,\n.keyboard .keyboard-number {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n margin: 0;\n padding: 0;\n vertical-align: bottom;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.keyboard .pos-mid-button-num {\n display: -ms-flexbox;\n display: flex;\n -ms-flex: 1;\n flex: 1;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-mid-button-num .buttonnum {\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 1rem!important;\n text-align: center;\n line-height: 0.986667rem;\n margin: 0.08rem!important;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n width: 30%;\n}\n\n.keyboard .pos-mid-button-num .buttonnum:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-number-button-num {\n display: -ms-flexbox;\n display: flex;\n width: 100%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-number-button-num .buttonnum {\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 1rem!important;\n text-align: center;\n line-height: 0.986667rem;\n margin: 0.08rem!important;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n width: 30%;\n}\n\n.keyboard .pos-number-button-num .buttonnum:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-right-button-num {\n display: -ms-flexbox;\n display: flex;\n width: 15%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-right-button-num .buttonright {\n width: 100%;\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 2.16rem!important;\n text-align: center;\n line-height: 2.16rem;\n margin: 0.08rem!important;\n -webkit-box-shadow: 0 0.013333rem 0.013333rem #989898;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n}\n\n.keyboard .pos-right-button-num .buttonright:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-left-button-num {\n display: -ms-flexbox;\n display: flex;\n width: 15%;\n height: 93%;\n -ms-flex-direction: row;\n flex-direction: row;\n -ms-flex-pack: justify;\n justify-content: space-between;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n -ms-flex-align: center;\n align-items: center;\n margin: 0.146667rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter {\n width: 100%;\n font-size: 0.373333rem!important;\n background-color: #fefefe;\n border: none!important;\n height: 1rem;\n text-align: center;\n line-height: 1rem;\n margin: 0.08rem!important;\n -webkit-box-shadow: 0 0.013333rem 0.013333rem #989898;\n box-shadow: 0 0.013333rem 0.013333rem #989898;\n font-weight: bold;\n border-radius: 0.133333rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-1 {\n height: 97%;\n line-height: 4.48rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-2 {\n height: 46%;\n line-height: 2.15rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-3 {\n height: 29.5%;\n line-height: 1.38rem;\n}\n\n.keyboard .pos-left-button-num .buttoncharacter-4 {\n height: 21.1%;\n line-height: 1rem;\n}\n\n.keyboard .hide-button {\n display: none;\n}\n\n.keyboard .button-num {\n width: 33.33%;\n height: 0.64rem;\n border: 0;\n border: 0.013333rem solid #000000;\n font-size: 0.2rem;\n cursor: pointer;\n}\n\n.keyboard .button-num:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .button-num:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .button-num-two {\n width: 100%;\n height: 1.28rem;\n border: 0;\n border: 0.013333rem solid #000000;\n font-size: 0.2rem;\n cursor: pointer;\n}\n\n.keyboard .button-num-two:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .button-num-two:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter {\n width: 100%;\n margin: 0;\n padding: 0;\n}\n\n.keyboard .keyboard-letter .line-1,\n.keyboard .keyboard-letter .line-2,\n.keyboard .keyboard-letter .line-3,\n.keyboard .keyboard-letter .line-4 {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: row;\n flex-direction: row;\n}\n\n.keyboard .keyboard-letter .line-1 .button-num-btn {\n width: 10%;\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-1 .button-num-btn:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-1 .button-num-btn:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-2 {\n width: 90%;\n margin: 0 auto;\n}\n\n.keyboard .keyboard-letter .line-2 .button-num-btn {\n width: 10%;\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-2 .button-num-btn:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-2 .button-num-btn:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-3 {\n width: 100%;\n}\n\n.keyboard .keyboard-letter .line-3 .button-num-btn {\n width: 10%;\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-3 .button-num-btn:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-3 .button-num-btn:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-3 .button:nth-child(1) {\n width: 16%!important;\n}\n\n.keyboard .keyboard-letter .line-3 .button:nth-last-child(1) {\n width: 16%!important;\n}\n\n.keyboard .keyboard-letter .line-3 .arrowtop {\n position: absolute;\n width: 0;\n height: 0;\n border-left: 0.133333rem solid transparent;\n border-right: 0.133333rem solid transparent;\n border-bottom: 0.133333rem solid black;\n left: 50%;\n top: 20%;\n transform: translate(-50%);\n}\n\n.keyboard .keyboard-letter .line-3 .arrowbot {\n position: absolute;\n width: 0.08rem;\n height: 0.186667rem;\n background: #000;\n left: 50%;\n top: 42%;\n transform: translate(-50%);\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn,\n.keyboard .keyboard-letter .line-4 .button-num-two {\n height: 0.826667rem;\n border: 0.013333rem solid #000000;\n font-size: 0.293333rem;\n margin: 0.066667rem 0.08rem;\n border-radius: 0.133333rem;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn:hover,\n.keyboard .keyboard-letter .line-4 .button-num-two:hover {\n position: relative;\n cursor: pointer;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn:active,\n.keyboard .keyboard-letter .line-4 .button-num-two:active {\n top: 0.013333rem;\n left: 0.013333rem;\n background-color: #c3c3c3;\n}\n\n.keyboard .keyboard-letter .line-4 .specialkey {\n width: 100%!important;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-btn {\n width: 13%;\n}\n\n.keyboard .keyboard-letter .line-4 .button-num-two {\n width: 70%;\n}\n\n.keyboard .input-box {\n font-size: 0.466667rem;\n font-weight: bold;\n height: 0.533333rem;\n border-bottom: 0.013333rem solid #aaa;\n padding: 0.133333rem 0.2rem;\n text-align: right;\n width: 90%;\n}\n\n.keyboard .only-enter {\n background: #157ef7!important;\n color: #fff!important;\n}\n\n.keyboard .del {\n position: relative;\n}\n\n.keyboard .del img.delico {\n width: 100%;\n position: absolute;\n top: 50%;\n left: 50%;\n}\n\n.keyboard .del img.englishdelico {\n transform: translate(-50%, -50%) scale(0.5);\n}\n\n.keyboard .del img.customNumdelico {\n transform: translate(-50%, -50%) scale(0.4);\n}\n\n.keyboard .del img.numberdelico {\n transform: translate(-50%, -50%) scale(0.25);\n}\n\n.keyboard .iphonex-bottom {\n padding-bottom: constant(safe-area-inset-bottom);\n padding-bottom: env(safe-area-inset-bottom);\n}"],"sourceRoot":""}]);
// exports
/***/ }),
/* 4 */
/***/ (function(module, exports) {
/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
module.exports = function(useSourceMap) {
var list = [];
// return the list of modules as css string
list.toString = function toString() {
return this.map(function (item) {
var content = cssWithMappingToString(item, useSourceMap);
if(item[2]) {
return "@media " + item[2] + "{" + content + "}";
} else {
return content;
}
}).join("");
};
// import a list of modules into the list
list.i = function(modules, mediaQuery) {
if(typeof modules === "string")
modules = [[null, modules, ""]];
var alreadyImportedModules = {};
for(var i = 0; i < this.length; i++) {
var id = this[i][0];
if(typeof id === "number")
alreadyImportedModules[id] = true;
}
for(i = 0; i < modules.length; i++) {
var item = modules[i];
// skip already imported module
// this implementation is not 100% perfect for weird media query combinations
// when a module is imported multiple times with different media queries.
// I hope this will never occur (Hey this way we have smaller bundles)
if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) {
if(mediaQuery && !item[2]) {
item[2] = mediaQuery;
} else if(mediaQuery) {
item[2] = "(" + item[2] + ") and (" + mediaQuery + ")";
}
list.push(item);
}
}
};
return list;
};
function cssWithMappingToString(item, useSourceMap) {
var content = item[1] || '';
var cssMapping = item[3];
if (!cssMapping) {
return content;
}
if (useSourceMap && typeof btoa === 'function') {
var sourceMapping = toComment(cssMapping);
var sourceURLs = cssMapping.sources.map(function (source) {
return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
});
return [content].concat(sourceURLs).concat([sourceMapping]).join('\n');
}
return [content].join('\n');
}
// Adapted from convert-source-map (MIT)
function toComment(sourceMap) {
// eslint-disable-next-line no-undef
var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));
var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64;
return '/*# ' + data + ' */';
}
/***/ }),
/* 5 */
/***/ (function(module, exports) {
// this module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle
module.exports = function normalizeComponent (
rawScriptExports,
compiledTemplate,
scopeId,
cssModules
) {
var esModule
var scriptExports = rawScriptExports = rawScriptExports || {}
// ES6 modules interop
var type = typeof rawScriptExports.default
if (type === 'object' || type === 'function') {
esModule = rawScriptExports
scriptExports = rawScriptExports.default
}
// Vue.extend constructor export interop
var options = typeof scriptExports === 'function'
? scriptExports.options
: scriptExports
// render functions
if (compiledTemplate) {
options.render = compiledTemplate.render
options.staticRenderFns = compiledTemplate.staticRenderFns
}
// scopedId
if (scopeId) {
options._scopeId = scopeId
}
// inject cssModules
if (cssModules) {
var computed = Object.create(options.computed || null)
Object.keys(cssModules).forEach(function (key) {
var module = cssModules[key]
computed[key] = function () { return module }
})
options.computed = computed
}
return {
esModule: esModule,
exports: scriptExports,
options: options
}
}
/***/ }),
/* 6 */
/***/ (function(module, exports, __webpack_require__) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return (_vm.isCallUp) ? _c('div', {
ref: "keyboard",
staticClass: "keyboard",
class: {
'iphonex-bottom': _vm.isIosSystem, 'keyboard-animation-up': _vm.animation, 'keyboard-animation-down': !_vm.animation
},
on: {
"click": function($event) {
$event.stopPropagation();
return _vm.keyboardClick.apply(null, arguments)
}
}
}, [_c('div', {
staticClass: "keyboard-key"
}, [(_vm.keyboardType === 'english') ? _c('div', {
staticClass: "keyboard-letter"
}, [_vm._l((_vm.englishArrList), function(item, index) {
return [_c('div', {
key: index,
class: ("line-" + (index + 1))
}, [_vm._l((_vm.englishArrList[index]), function(items, indexs) {
return [_c('div', {