VUE-ElementUI,DatePicker组件在移动端阻止键盘弹出
由于公司的项目需要运行平板上。但是DateTimePicker的时间输入框在平板上弹出的键盘会挡住时间的选择,最近公司的前端小伙伴一直在头疼这件事。我就看了一下DateTimePicker组件的源码,结合自己对Vue的浅显认知,添加了下面的代码// 由于DatePicker本身是可以输入的,将该props置为false,点击时也不会弹出输入框// 需要在Vue.use前覆盖属性Element.Da
·
由于公司的项目需要运行平板上。但是DateTimePicker的时间输入框在平板上弹出的键盘会挡住时间的选择,最近公司的前端小伙伴一直在头疼这件事。
我就看了一下DateTimePicker组件的源码,结合自己对Vue的浅显认知,添加了下面的代码
// 由于DatePicker本身是可以输入的,将该props置为false,点击时也不会弹出输入框
// 需要在Vue.use前覆盖属性
Element.DatePicker.props.editable = false
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})
// 需在Vue.use后使用,否则此时的DatePicker对象还没有被Extend,也就不会有_Ctor属性
// 如果是按需引入,则在Vue.use(DatePicker)后使用
// 下面使用到了jquery,如果项目中没有引入jquery,自己通过原生domApi获取即可
Element.DatePicker._Ctor["0"].options.created.push(function () {
this.$on("focus", () => {
if (this["init" + this._uid]) {
return
}
this["init" + this._uid] = true
// 由于Vue的渲染默认是在微队列执行的
// 而setTimeout属于宏队列,且延迟了100ms,所以可以获取到dom元素
setTimeout(() => {
const inputs = $(".el-input--small > .el-input__inner[type='text']")
if (inputs && inputs.length) {
inputs.each((idx, item) => {
if (item.bound) {
return
}
item.bound = true
item.addEventListener("focus", (ev) => {
ev.target.blur()
})
})
}
}, 100)
})
})
DatePicker.props.editable = false可以使DateTimePicker组件不弹出输入框
而操作DOM节点则是针对DatePicker和TimePicker
如果有哪里不对,请指出,共同进步~~~
更多推荐
已为社区贡献1条内容
所有评论(0)