Vue 引入better-scroll导致点击事件失效的原因和解决方法

在vue项目重引入了better-scroll，但是在增加点击事件的时候 ，点击失效

在官方文档中查到原因

在better-scroll的属性中默认以下：

click

• 类型: Boolean
• 默认值:false
• 作用: better-scroll默认会阻止浏览器的原生cick事件。 当设置为true, better-scroll会派发一个 click事件,我们会给派发的 event参数加一个私有属性 _constructed,值为true

tap

• 类型: Boolean | String
• 默认值: false
• 作用:因为 better-scroll会阻止原生的cick事件,我们可以设置tap为tnue,它会在区域被点击的时候派发一个tap事件,你可以像监听原生事件那样去监听它,如element.addEventListener('tap', doSomething, false):。如果tap设置为字符串,那么这个字符串就作为自定义事件名称。如tap:'myCustomTapEvent'。

解决办法：加上以下代码即可：

    <div ref='wrapper'>
       <ul>
           <li></li>
           ... ...
       </ul>
   </div>
   // ref的wrapeer  要对应下面的$refs.wrapper,也可以自己命名
    mounted () {
       const options = {
           click:true,
           tap: true
       }
       this.scroll = new Bscroll( this.$refs.wrapper , options );
   },