[Intervention] Unable to preventDefault inside passive event listener due to target being treated as

关于[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.报错的解决办法

首先分析原因：

可以看到是mui.js文件的问题，不懂的可以看这个视频传送门，里面讲的很详细，有解决办法，

            <router-link class="mui-tab-item" to="/message">
                <span class="mui-icon mui-icon-chatbubble-filled"></span>
                <span class="mui-tab-label">消息</span>
            </router-link>

原因：主要是mui-tab-item跟js文件有冲突。

 

解决办法：

将mui-tab-item改个类名，这里我在后面加了我名字的缩写，然后将mui-tab-item原本的样式写到你改的类名下。(想偷懒的可以复制下面的代码，注意：类名要一致！！！)

    /*用于解决mui的js文件跟tabbar滑动条的不兼容问题*/
    .mui-bar-tab .mui-tab-item-wy.mui-active {
        color: #007aff;
    }
    .mui-bar-tab .mui-tab-item-wy {
        display: table-cell;
        overflow: hidden;
        width: 1%;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #929292;
    }
    .mui-bar-tab .mui-tab-item-wy .mui-icon {
        top: 3px;
        width: 24px;
        height: 24px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .mui-bar-tab .mui-tab-item-wy .mui-icon ~ .mui-tab-label {
        font-size: 11px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }

然后再到人mui.js文件：

<script>
    import mui from "../../lib/mui/dist/js/mui.js"
    export default {
        data(){
            return {
                isAutoLogin: false,
                username: '',
                password: ''
            }
        },
        methods: {
            autoLogin(){
                console.log('1111');
                this.isAutoLogin = !this.isAutoLogin;
                var autoLoginButton = document.getElementById("autoLogin");
                autoLoginButton.classList[this.isAutoLogin? 'add' : 'remove']('mui-active');
            },
            login(){
                if(this.username === "" || this.password === ""){
                    mui.alert('用户名或密码为空', '警告','确定');
                }else{
                    const patern =/^[a-zA-Z0-9_]{1,18}$/im;
                    if (patern.test(this.username)) {
                        console.log("123")
                    }else{
                        mui.alert('用户名只能由数字、大小写字母、下划线组成', '警告','确定');
                    }
                }
            }
        }
    }
</script>

这时候就可以滑动底下的选项栏，并且可以使用mui.js文件的alert方法，而不报错。

效果图：(gif中最后的警告框就是mui.js文件中的alert方法)，完美解决！！！