code-image-backup-public/lilishop-uniapp
1
0
Fork 0
mirror of https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git synced 2026-11-13 20:38:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(uniapp): 修复滑块验证 movable-area 嵌套塌陷导致无法拖动

Browse Source
This commit is contained in:
pikachu1995@126.com
2026-10-20 14:14:46 +08:00
parent eba79a78e8
commit a41936dc00
1 changed files with 28 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/verification/verification.vue
View File

@@ -4,7 +4,7 @@
v-if="!state.hid" v-if="!state.hid"
class="flex-row-center" class="flex-row-center"
:style="{ top: state.scHight }" :style="{ top: state.scHight }"
style="width: 750rpx; position: fixed; z-index: 100; left: 0" style="width: 750rpx; position: fixed; z-index: 100; left: 0; background-color: #ffffff; padding: 40rpx 0"
> >
<view class="flex-column-center"> <view class="flex-column-center">
<movable-area <movable-area
@@ -44,12 +44,11 @@
></image> ></image>
</movable-area> </movable-area>
<view class="v-track"> <movable-area class="v-track" animation="false">
<view class="v-fill" :style="{ width: fillWidth }"></view> <view class="v-fill" :style="{ width: fillWidth }"></view>
<text class="v-track-text" :style="{ color: state.col }">{{ <text class="v-track-text" :style="{ color: state.col }">{{
state.hasImg state.hasImg
}}</text> }}</text>
<movable-area class="v-area" animation="false">
<movable-view <movable-view
scale-value="1" scale-value="1"
animation="false" animation="false"
@@ -70,7 +69,6 @@
<u-icon color="#ffffff" size="38" v-else name="reload"></u-icon> <u-icon color="#ffffff" size="38" v-else name="reload"></u-icon>
</movable-view> </movable-view>
</movable-area> </movable-area>
</view>
<view class="v-foot"> <view class="v-foot">
<view class="v-icon-btn" @click="getCode"> <view class="v-icon-btn" @click="getCode">
@@ -116,7 +114,7 @@ const phone = uni.getSystemInfoSync()
const l = phone.screenWidth / 750 const l = phone.screenWidth / 750
const mainColor = computed(() => store.getters.mainColor) const mainColor = computed(() => store.getters.mainColor)
const fillWidth = computed(() => `calc(${state.moveX}px + 42rpx)`) const fillWidth = computed(() => `${state.moveX + 42 * l}px`)
const handleStyle = computed(() => { const handleStyle = computed(() => {
const glow = /^#[0-9a-fA-F]{6}$/.test(mainColor.value) const glow = /^#[0-9a-fA-F]{6}$/.test(mainColor.value)
? mainColor.value + '59' ? mainColor.value + '59'
@@ -282,9 +280,6 @@ defineExpose({
margin-top: 36rpx; margin-top: 36rpx;
background-color: #f7f7f8; background-color: #f7f7f8;
border-radius: 42rpx; border-radius: 42rpx;
display: flex;
align-items: center;
justify-content: center;
} }
.v-fill { .v-fill {
@@ -297,17 +292,14 @@ defineExpose({
} }
.v-track-text { .v-track-text {
font-size: 26rpx;
letter-spacing: 2rpx;
}
.v-area {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0;
top: 0; top: 0;
width: 100%; line-height: 84rpx;
height: 100%; text-align: center;
background-color: transparent; font-size: 26rpx;
letter-spacing: 2rpx;
} }
.v-handle { .v-handle {