vue |
您所在的位置：网站首页 › 手机虚拟键盘使用方法 › vue |
|
2.4 core.js
/**
* 点击除输入框及虚拟键盘外元素时，隐藏虚拟键盘
* @param {e} 点击的元素
*/
export const judgeCloseKeyboard = e => {
e.stopPropagation(); // 阻止事件冒泡
let arr = document.querySelectorAll('.input-keyboard'); // 设置目标区域
let flag = false;
const excludeClassName = [
'input-keyboard', // 带虚拟键盘的输入框
'el-input__inner', // 输入框
'el-input__clear', // 输入框-清除图标
'el-textarea__inner', // 输入框-textarea
'hg-candidate-box', // 中文选择框
'hg-candidate-box-prev', // 中文选择框-上一页
'hg-candidate-box-list', // 中文选择框-内容列表
'hg-candidate-box-list-item', // 中文选择框-内容选项
'hg-candidate-box-next', // 中文选择框-下一页
'hg-theme-default', // 虚拟键盘
'hg-rows', // 虚拟键盘-内容
'hg-row', // 虚拟键盘-行
'hg-button' // 虚拟键盘-按钮
];
let classList = e.target.classList.value.split(' ');
let concatArr = excludeClassName.concat(classList);
arr.forEach(ele => {
// 判断点击事件发生在区域外的条件是：1. 点击事件的对象不是目标区域本身 2. 事件对象同时也不是目标区域的子元素
if (
// 判断当前点击的元素类名，是否包含排除元素
new Set(concatArr).size === concatArr.length &&
!ele.contains(e.target)
) {
flag = true;
}
});
flag && hideKeyboard();
};
/**
* 隐藏虚拟键盘
*/
export const hideKeyboard = () => {
let arr = document.querySelectorAll('.hg-theme-default');
arr.forEach(ele => {
ele.style.visibility = 'hidden';
});
};
2.5 mixins.js
// 虚拟键盘输入公用方法
export const keyboardInputMixin = {
methods: {
// 对部分表单字段进行校验
validataForm(field, formname = 'form') {
this.$refs[formname].validateField(field);
},
// 虚拟键盘输入
formItemChange(val, formItemField) {
this.form[formItemField] = val;
this.validataForm(formItemField);
},
},
};
3.遇到的问题
3.1 列表可复合搜索，搜索部分是组件ref为search，虚拟键盘输入后，直接修改输入框绑定的值，发现变量值改变，但页面未更新
解决方法： 使用$set方法修改复合搜索条件值 keyWordsChange(val) { this.$set(this.$refs.search.form, 'keyWords', val); // 响应式对象修改数据 ...} 3.2 表单内有两个输入框表单项，切换radio通过v-if判断显示其中一个，发现在切换radio后，虚拟键盘的样式错乱解决方法： 使用v-show判断，但我的两个表单项是必填的，校验时就有问题，这个问题可通过单独给两个表单项写校验规则解决 ... { if (this.form.typeRadio === 1) { if (value === '') { return callback(new Error('请输入名称')); } else { callback(); } } else { callback(); } }; ... 3.3 点击虚拟键盘报错：Uncaught TypeError: t.slice is not a function，输入无效原因： 输入框的值是后端返回的数字，是number类型 解决方法： 使用toString()转换返回值
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |