移动端 --- vue使用mint ui底部日期选择后 点击日期报错等解决办法

1.安装mint ui
cnpm install mint-ui -S
2. 引入
打开main.js文件，加入以下代码

import { DatetimePicker } from “mint-ui”;
Vue.component(DatetimePicker.name, DatetimePicker);
import “mint-ui/lib/style.css”;
（注意：上述css文件引入是为了让其样式正常）
3. vue组件打开，添加点击事件，openPicker事件点击后，日期框弹出

<li @click="openPicker()"> <li>

添加日期组件，visibleItemCount属性是显示五行，去掉属性默认为十行，根据需要来。

  <mt-datetime-picker
            ref="picker"
            type="date"
            :visibleItemCount="5"
            v-model="pickerValue"
            @confirm="confirmTime"
        ></mt-datetime-picker>

方法中添加

 methods: {
        openPicker() {
            this.$refs.picker.open()
        },

4. 添加完之后可以查看效果

5. 点击openPicker事件后，界面展示为，底部弹出日期选择框，样式可以自己修改

5. 但是点击时候出现报错，mint-ui.common.js?c127:6987 Unable to preventDefault inside passive event listener invocation。
这是因为谷歌浏览器对event.preventDefault()（默认事件阻止）的检测机制变化导致的，详细信息请看这个链接: https://blog.csdn.net/zctsir/article/details/105553444.
如果报错怎么解决呢，打开控制台报错的具体位置，看下是哪个事件报错的，我是这个问题，按照上述参考链接，我打开这个文件的具体位置，我在这个监听事件后面，加了一个 ,{ passive: false}

报错

解决，打开报错的文件所在的位置：

添加代码：,{ passive: false}，到下面指定位置。

保存后重新点击界面尝试下，报错消除。