【踩坑cube-ui】关于项目中遇到的与cube-ui相关的问题总结

1、解决better-scroll和textarea滚动冲突，导致textarea内部无法滑动的问题

（cube-ui的滚动组件<cube-scroll></cube-scroll>是基于better-scroll）

window.addEventListener('touchmove', 
(e) =>  {
  let target = e.target
  // textarea阻止冒泡
  if (target && target.tagName === 'TEXTAREA') { 
    e.stopPropagation()
  }
}, true);

2、cube-ui组件cube-slide下点击事件执行两次的问题

项目中遇到包裹在cube-slide组件内的点击事件会触发两次，这是触发了组件自带的点击事件，如下：

<cube-slide ref="slide" :data="items" :showDots="showDots" :auto-play="true">
   <cube-slide-item v-for="(item, index) in items" :key="index">
      <div @click.stop="userBook(item.url)">
         <img :src="item.image">
      </div>
   </cube-slide-item>
</cube-slide>
...
methods: {
  userBook(url) {
    console.log(url); // 点击会打印两次
  }
}

• 解决方案1：给组件添加options，阻止组件的点击事件。这样就只会触发内部的点击事件。

<cube-slide ref="slide" :data="items" :showDots="showDots" :auto-play="true" 
  :options='optionsSlide'>
...
</cube-slide>
...
data(){
  return {
    optionsSlide: {
        click: false // 设置为false
    }
  }
}

• 解决方案2：用定时器，点击后马上关掉定时器，这样就能控制每次只点击一次

methods: {
  userBook(url) {
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
       // 此处进行相关操作
       console.log(url); 
    }, 200)
  }
}