|
@@ -44,9 +44,19 @@
|
|
|
<view class="list-main" @click.stop="goEditByIndex(index)">
|
|
<view class="list-main" @click.stop="goEditByIndex(index)">
|
|
|
<view class="list-title">{{ item.name || '未命名' }}</view>
|
|
<view class="list-title">{{ item.name || '未命名' }}</view>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="list-edit" @click.stop="goEditByIndex(index)" @touchstart.stop="noop">编辑</view>
|
|
|
|
|
- <view class="list-switch" @click.stop="noop" @touchstart.stop="noop">
|
|
|
|
|
|
|
+ <view class="list-edit" @click.stop="goEditByIndex(index)" data-drag-ignore="true">
|
|
|
|
|
+ 编辑
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <!--
|
|
|
|
|
+ 注意:这里不能用 @touchstart.stop 之类的 catch 写法拦截触摸事件。
|
|
|
|
|
+ 微信小程序里 catch 会在原生手势层面“吃掉”触摸,导致内置 <switch>
|
|
|
|
|
+ 自身的滑动/点击手势也收不到事件,表现为开关完全点不动;编辑按钮同理点不了。
|
|
|
|
|
+ 所以改为:不拦截事件冒泡,而是给操作区域打上 data-drag-ignore 标记,
|
|
|
|
|
+ 在 dragStart 里识别到该标记后直接放弃进入拖拽,把触摸交还给按钮/switch 自己处理。
|
|
|
|
|
+ -->
|
|
|
|
|
+ <view class="list-switch" data-drag-ignore="true">
|
|
|
<switch
|
|
<switch
|
|
|
|
|
+ data-drag-ignore="true"
|
|
|
:checked="item.enabled == 1"
|
|
:checked="item.enabled == 1"
|
|
|
color="#09C567"
|
|
color="#09C567"
|
|
|
@change="toggleItemEnabledByIndex(index, $event)"
|
|
@change="toggleItemEnabledByIndex(index, $event)"
|
|
@@ -246,8 +256,6 @@ export default {
|
|
|
this.persistDraft()
|
|
this.persistDraft()
|
|
|
this.pageTo('/admin/homePageConfig/navGridEdit')
|
|
this.pageTo('/admin/homePageConfig/navGridEdit')
|
|
|
},
|
|
},
|
|
|
- /** 空事件:阻断拖拽区域点击冒泡,避免小程序空 @click.stop 编译异常 */
|
|
|
|
|
- noop() {},
|
|
|
|
|
/**
|
|
/**
|
|
|
* 按列表下标进入编辑页
|
|
* 按列表下标进入编辑页
|
|
|
* @param {number} index 当前导航项下标
|
|
* @param {number} index 当前导航项下标
|
|
@@ -296,6 +304,21 @@ export default {
|
|
|
this.saving = false
|
|
this.saving = false
|
|
|
})
|
|
})
|
|
|
},
|
|
},
|
|
|
|
|
+ /**
|
|
|
|
|
+ * 判断触摸目标是否位于标记了 data-drag-ignore 的区域(如编辑按钮、开关)。
|
|
|
|
|
+ * 小程序端 e.target 是精简对象,只能直接读 dataset;
|
|
|
|
|
+ * H5/App 端是真实 DOM 节点,兼容用 closest 向上查找,防止触摸到 switch 内部子节点时漏判。
|
|
|
|
|
+ */
|
|
|
|
|
+ isDragIgnoreTarget(target) {
|
|
|
|
|
+ if (!target) return false
|
|
|
|
|
+ if (target.dataset && (target.dataset.dragIgnore === 'true' || target.dataset.dragIgnore === true)) {
|
|
|
|
|
+ return true
|
|
|
|
|
+ }
|
|
|
|
|
+ if (typeof target.closest === 'function') {
|
|
|
|
|
+ return !!target.closest('[data-drag-ignore="true"]')
|
|
|
|
|
+ }
|
|
|
|
|
+ return false
|
|
|
|
|
+ },
|
|
|
transformStyle(index) {
|
|
transformStyle(index) {
|
|
|
if (!this.isDragging || this.draggedIndex < 0) {
|
|
if (!this.isDragging || this.draggedIndex < 0) {
|
|
|
return 'translateY(0upx)'
|
|
return 'translateY(0upx)'
|
|
@@ -318,6 +341,8 @@ export default {
|
|
|
},
|
|
},
|
|
|
dragStart(e) {
|
|
dragStart(e) {
|
|
|
if (this.isDragging) return
|
|
if (this.isDragging) return
|
|
|
|
|
+ // 触摸起点落在编辑/开关区域时不进入拖拽,避免抢占按钮点击和 switch 自身手势
|
|
|
|
|
+ if (this.isDragIgnoreTarget(e.target)) return
|
|
|
const index = parseInt(e.currentTarget.dataset.index, 10)
|
|
const index = parseInt(e.currentTarget.dataset.index, 10)
|
|
|
if (isNaN(index) || index < 0 || index >= this.form.list.length) {
|
|
if (isNaN(index) || index < 0 || index >= this.form.list.length) {
|
|
|
return
|
|
return
|