vue里a标签与mui里的mui.js冲突问题 踩坑!!!

发布时间:2018年12月16日 阅读:397 次

  今天在vue项目中引入了mui.js

  引入方法:在main.js中

import mui from '@/assets/js/mui.js'
Vue.prototype.mui = mui;

  这样一来底部的导航点击无效,并且浏览器里console里显示滑动冲突的问题。

随后在https://www.jianshu.com/p/1484734b0fa4 发现了能解决问题的答案。


我在底部导航.vue里加入:

mounted(){
  this.mui('body').on('tap','a',function () {
    window.location.href = this.href;
  })
}

这样一来问题就似乎解决了,随后我在一个页面内部点击了一个按钮,直接给跳到404了,于是再次出现问题,由于底部导航的标签是nav,所以改了一下body

如下:

mounted(){
  this.mui('nav').on('tap','a',function () {
    window.location.href = this.href;
  })
}

这样一来页面功能就没有问题了。


但是在console里仍然提示

[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example becaus

,虽然不影响使用,但看着很是不爽,其实加一个css就可以了:

<style scoped>
.mui-bar{
  touch-action: none;
}

如果其他a标签或按钮标签有问题的话css里加

touch-action: none;

就可以解决问题了。

Tag:踩坑 vue学习
相关文章
发表评论

发表评论: