|
|
@@ -45,7 +45,7 @@
|
|
|
<!-- 删除按钮(在内容右侧) -->
|
|
|
<view v-if="showDelete" class="delete-action" @click.stop="handleDelete">
|
|
|
<view class="delete-icon-wrapper">
|
|
|
- <text class="delete-icon">✕</text>
|
|
|
+ <text class="delete-icon">−</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -55,7 +55,7 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, nextTick, getCurrentInstance, ref, watch } from 'vue'
|
|
|
+import { onMounted, onUnmounted, nextTick, getCurrentInstance, ref, watch } from 'vue'
|
|
|
|
|
|
const props = defineProps({
|
|
|
stock: {
|
|
|
@@ -77,6 +77,25 @@ let componentInstance = null
|
|
|
const deleteWidth = 60 // 删除按钮宽度(px)
|
|
|
const moveX = ref(0)
|
|
|
let currentX = 0
|
|
|
+let autoResetTimer = null // 自动还原计时器
|
|
|
+const AUTO_RESET_DELAY = 2000 // 自动还原延迟时间(ms)
|
|
|
+
|
|
|
+// 启动自动还原计时器
|
|
|
+const startAutoResetTimer = () => {
|
|
|
+ clearAutoResetTimer()
|
|
|
+ autoResetTimer = setTimeout(() => {
|
|
|
+ moveX.value = 0
|
|
|
+ currentX = 0
|
|
|
+ }, AUTO_RESET_DELAY)
|
|
|
+}
|
|
|
+
|
|
|
+// 清除自动还原计时器
|
|
|
+const clearAutoResetTimer = () => {
|
|
|
+ if (autoResetTimer) {
|
|
|
+ clearTimeout(autoResetTimer)
|
|
|
+ autoResetTimer = null
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
// 生成稳定的 canvas ID(只在组件创建时生成一次)
|
|
|
const canvasId = ref(`chart-${props.stock.code}-${Math.random().toString(36).slice(2, 11)}`)
|
|
|
@@ -221,6 +240,10 @@ const generateMockTrendData = () => {
|
|
|
// 滑动变化
|
|
|
const handleMoveChange = (e) => {
|
|
|
currentX = e.detail.x
|
|
|
+ // 如果滑动到了删除按钮位置,启动计时器
|
|
|
+ if (props.showDelete && currentX <= -deleteWidth / 2) {
|
|
|
+ startAutoResetTimer()
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 滑动结束
|
|
|
@@ -230,13 +253,19 @@ const handleMoveEnd = () => {
|
|
|
// 滑动超过三分之一就显示删除按钮
|
|
|
if (currentX < -deleteWidth / 3) {
|
|
|
moveX.value = -deleteWidth
|
|
|
+ // 启动自动还原计时器
|
|
|
+ startAutoResetTimer()
|
|
|
} else {
|
|
|
moveX.value = 0
|
|
|
+ currentX = 0
|
|
|
+ // 滑回初始位置,清除计时器
|
|
|
+ clearAutoResetTimer()
|
|
|
}
|
|
|
}
|
|
|
|
|
|
// 处理删除
|
|
|
const handleDelete = () => {
|
|
|
+ clearAutoResetTimer() // 点击删除时清除计时器
|
|
|
moveX.value = 0
|
|
|
emit('delete')
|
|
|
}
|
|
|
@@ -271,6 +300,24 @@ watch(() => props.stock.changePercent, () => {
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
+
|
|
|
+// 监听滑动位置变化,确保自动还原计时器正确工作
|
|
|
+watch(moveX, (newVal) => {
|
|
|
+ if (newVal < 0 && props.showDelete) {
|
|
|
+ // 滑动到删除位置,确保计时器在运行
|
|
|
+ if (!autoResetTimer) {
|
|
|
+ startAutoResetTimer()
|
|
|
+ }
|
|
|
+ } else if (newVal === 0) {
|
|
|
+ // 已还原,清除计时器
|
|
|
+ clearAutoResetTimer()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+// 组件销毁时清理计时器
|
|
|
+onUnmounted(() => {
|
|
|
+ clearAutoResetTimer()
|
|
|
+})
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|