脚本宝典收集整理的这篇文章主要介绍了vue拖拽排序(vue-slicksort)点击失效的解决方式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最近有个需求是常用应用模块,应用可拖拽进行排序,也可以点击进入新的页面,但是发现
<!-- 拖拽 --> <SlickList v-model="alwaysList" :lock-to-container-edges="true" axis="xy" lock-axis="xy" class="slicksort_wrap" @input="getChangeList" @sort-start="moveStart" @sort-end="moveEnd" > <!-- slick_item_' + (index + 1) --> <SlickItem v-for="(item, index) in alwaysList" :key="index" :index="index" class="slick_item appli"> <div class="iconBlock" :style="{background: item.color}"> <svg-icon class="img" :icon-class="item.icon ? item.icon : '#'" /> </div> <div class="text">{{ item.menuName }}</div> </SlickItem> <div class="edit" @click="addMenu">编辑</div> </SlickList>
<script> import { SlickList, SlickItem } from 'vue-slicksort'; export default { components: { SlickList, SlickItem }, data() { return { alwaysList: [], startX: 0, startY: 0, endX: 0, endY: 0, lastIndex: 0 }; }, methods: { moveStart(e) { this.startX = e.event.x; this.startY = e.event.y; this.lastIndex = e.index; }, moveEnd(e) { this.endX = e.event.x; this.endY = e.event.y; }, // 拖拽完成后重新排序 getChangeList(list) { // 判断点击或者拖拽 if (this.startX === this.endX && this.startY === this.endY) { this.$router.push(this.alwaysList[this.lastIndex].parentPath + '/' + this.alwaysList[this.lastIndex].path); } else { console.log(list); } } } }; </script>
以上是脚本宝典为你收集整理的vue拖拽排序(vue-slicksort)点击失效的解决方式全部内容,希望文章能够帮你解决vue拖拽排序(vue-slicksort)点击失效的解决方式所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。