移动端 --- 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()
},
-
添加完之后可以查看效果
-
点击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},到下面指定位置。
保存后重新点击界面尝试下,报错消除。