aurora-admin/frameworks-mobile/SwipeCell.uniapp.vue

<template>
  <view
    class="kole-m-swipecell"
    :class="[direction === 'right' ? 'kole-m-swipecell--right' : '', dragging ? 'is-dragging' : '', open ? 'is-open' : '']"
    :style="'--kole-m-swipecell-offset:' + appliedOffset + 'rpx'"
    :data-state="open ? 'open' : 'closed'"
    @touchstart="onStart"
    @touchmove="onMove"
    @touchend="onEnd"
    @touchcancel="onEnd"
  >
    <view class="kole-m-swipecell__actions">
      <view
        v-for="(a, i) in actions"
        :key="a.key || i"
        class="kole-m-swipecell__action"
        :class="a.tone === 'danger' ? 'kole-m-swipecell__action--danger' : ''"
        role="button"
        :aria-label="a.ariaLabel || a.label"
        @tap="emit('action', a.key, a)"
      >
        <text>{{ a.label }}</text>
      </view>
    </view>
    <view class="kole-m-swipecell__content" role="button" @tap="onContentTap">
      <slot></slot>
    </view>
  </view>
</template>

<script setup>
/* uni-app 端 · 滑动单元格（移动端）— 规格 §5
   跨端差异：手势用 @touchstart/@touchmove/@touchend（小程序与 App 端无 PointerEvent）；
   位移以 px 判定（阈值 10px），展开位移换算为 rpx（2rpx = 1px @375pt）。
   规格 §5.4「多行同时展开的互斥规则」未定，故本组件只管自身开合。 */
import { computed, ref } from 'vue';

const ACTION_WIDTH_RPX = 144;   /* 72px × 2 */
const OPEN_THRESHOLD_PX = 10;

const props = defineProps({
  direction: { type: String, default: 'left' },
  actions: { type: Array, default: () => [] },
  open: { type: Boolean, default: false }
});
const emit = defineEmits(['action']);

const offset = ref(0);          /* 单位 rpx */
const dragging = ref(false);
const startX = ref(0);
const startY = ref(0);
const dx = ref(0);
const decided = ref(false);
const isDragging = ref(false);

const openOffset = computed(() => {
  var sign = props.direction === 'right' ? 1 : -1;
  return sign * ACTION_WIDTH_RPX * Math.max(1, props.actions.length);
});
const appliedOffset = computed(() => (isDragging.value || offset.value !== 0 ? offset.value : props.open ? openOffset.value : 0));

function touch(e) {
  var t = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || {};
  return { x: t.clientX != null ? t.clientX : t.pageX, y: t.clientY != null ? t.clientY : t.pageY };
}
function onStart(e) {
  var p = touch(e);
  startX.value = p.x;
  startY.value = p.y;
  dx.value = 0;
  decided.value = false;
  isDragging.value = false;
}
function onMove(e) {
  var p = touch(e);
  dx.value = p.x - startX.value;
  var dy = p.y - startY.value;
  if (!decided.value) {
    if (Math.abs(dx.value) < OPEN_THRESHOLD_PX && Math.abs(dy) < OPEN_THRESHOLD_PX) return;
    decided.value = true;
    if (Math.abs(dy) > Math.abs(dx.value)) return;    /* 纵向为主：让位给页面滚动 */
    isDragging.value = true;
    dragging.value = true;
  }
  if (!isDragging.value) return;
  var limit = ACTION_WIDTH_RPX * Math.max(1, props.actions.length);
  offset.value = Math.max(-limit, Math.min(limit, dx.value * 2));
}
function onEnd() {
  if (isDragging.value) {
    isDragging.value = false;
    dragging.value = false;
    var limit = ACTION_WIDTH_RPX * Math.max(1, props.actions.length);
    var isOpen = Math.abs(offset.value) > limit / 2;
    offset.value = isOpen ? (props.direction === 'right' ? limit : -limit) : 0;
  }
  decided.value = false;
}
function onContentTap() {
  /* 规格 §5.5：展开状态下点击内容区先收起，不触发内容点击 */
  if (props.open || offset.value !== 0) offset.value = 0;
}
</script>

<style>
.kole-m-swipecell {
  --kole-m-swipecell-offset: 0rpx;
  --kole-m-touch-target: 88rpx;
  --kole-m-font-size-body: 32rpx;
  --kole-m-font-size-label: 28rpx;
  --kole-m-gutter: 32rpx;
  position: relative;
  overflow: hidden;
  background-color: var(--kole-color-card-bg);
}

.kole-m-swipecell__actions {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
}

.kole-m-swipecell--right .kole-m-swipecell__actions {
  right: auto;
  left: 0;
}

.kole-m-swipecell__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 144rpx;
  background-color: var(--kole-color-table-header-bg);
  color: var(--kole-color-text-body);
  font-size: var(--kole-m-font-size-label);
}

.kole-m-swipecell__action--danger {
  background-color: var(--kole-color-error);
  color: var(--kole-color-text-inverse);
}

.kole-m-swipecell__content {
  position: relative;
  z-index: 1;
  display: block;
  padding: 24rpx var(--kole-m-gutter);
  background-color: var(--kole-color-card-bg);
  transform: translateX(var(--kole-m-swipecell-offset));
  transition: transform 240ms cubic-bezier(.32, .72, 0, 1);
}

.kole-m-swipecell.is-dragging .kole-m-swipecell__content { transition: none; }
</style>