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)
}
}
