Vue2及以下使用elementUI的DatePicker在移动端弹起输入框的问题

认真写代码的小岚

已于 2022-03-23 09:19:43 修改

阅读量1.2k

点赞数

文章标签： elementui vue.js javascript

于 2021-12-03 09:40:31 首次发布

本文链接：https://blog.csdn.net/m0_52516015/article/details/121691693

版权

本文介绍了如何在Vue2的Element UI DatePicker组件中避免在移动端弹起输入框的问题，通过修改组件属性和添加自定义事件处理，实现在聚焦时自动隐藏输入框。解决方案包括设置`editable`为`false`，并在组件创建时添加焦点事件监听，利用Vue的微任务和宏任务特性来确保DOM操作的正确执行。

摘要由CSDN通过智能技术生成

Vue2及以下DatePicker在移动端弹起输入框的问题

解决办法

解决办法

main.js

import ElementUI from 'element-ui';
ElementUI.DatePicker.props.editable = false
Vue.use(ElementUI)
ElementUI.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)
    })
})