uni-app picker-view 中的@pickend，@pickstart，immediate-change希望可以做到全端支持

uni-app picker-view 中的@pickend，@pickstart，immediate-change希望可以做到全端支持

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.27

手机系统：Android

手机系统版本号：Android 15

手机厂商：华为

手机机型：16161616161

页面类型：vue

vue版本：vue2

打包方式：云端

App下载地址或H5网址：z

示例代码：

<template>  
<uni-popup  
ref="popupRef"  
is-mask-click="false"
@maskClick="onCancel"
type="bottom"
>
<view class="custom-picker-popup">
  <view class="page-header">
    <view class="page-header-content-text">{{ title }}</view>
    <view class="close-icon" @click="onCancel">
      <custom-icon
        icon="/static/images/psychological-test/icon-closelist@2x.png"
        size="24rpx"
      />
    </view>
  </view>
  <view class="page-content">
    <picker-view  
value="[insideSelectedIndex]"
      @change="onPickerViewChange"
      indicator-style="height: 112rpx"
      class="picker-view"
    >
      <picker-view-column>
        <view
          class="picker-view-item"
          v-for="(item, index)  
key="index"
        >
          {{ item.label }}
        </view>
      </picker-view-column>
    </picker-view>
  </view>
  <view class="page-footer">
    <button @click="onOk">确定</button>
  </view>
</view>
</uni-popup>
</template>  

<script setup>
import { ref, watch, nextTick } from 'vue'  

const emit = defineEmits([
'update:visible',
'update:selectedValue',
'change',
'ok',
'cancel',
])  

const props = defineProps({
title: {
type: String,
default: '',
},
visible: {
type: Boolean,
default: false,
},
selectedValue: {
type: [String, Number],
default: 0,
},
options: {
type: Array,
default: () => [],
},
isRow: {
type: Boolean,
default: false,
},
})

const popupRef = ref()

const insideVisible = ref(false)
const insideSelectedIndex = ref(undefined)

const findSelectedIndex = (value) => {
const resIndex = props.options.findIndex((item) => item.value === value)
return resIndex > -1 ? resIndex : 0
}

watch(
[() => props.visible],
([newval]) => {
console.log('props: ', props)
insideVisible.value = newval
},
{ immediate: true }
)
watch(
[() => insideVisible.value],
([newval]) => {
if (!popupRef.value) return  

if (newval) open()
else close()
})
watch(
[() => props.selectedValue],
([newval]) => {
insideSelectedIndex.value = findSelectedIndex(newval)
},
{ immediate: true }
)
watch(
[() => insideSelectedIndex.value],
([newval]) => {
emit('update:selectedValue', props.options[newval].value)
emit('change', props.options[newval].value)
})

const computedSelectedValue = () => {
const row = props.options[insideSelectedIndex.value]
const res = props.isRow ? row : row?.value
return res
}

const onPickerViewChange = (e) => {
const val = e.detail.value
insideSelectedIndex.value = val[0]
}

const open = () => {
popupRef.value.open()
}
const close = () => {
popupRef.value.close()
}

const onOk = () => {
emit('ok', computedSelectedValue())
}
const onCancel = () => {
emit('cancel')
}
</script>  

<style lang="scss" scoped>
.custom-picker-popup {
border-radius: 36rpx 36rpx 0rpx 0rpx;
padding: 28rpx 0 0 0;
background-color: #fff;
.page-header {
position: relative;
margin: 0 34rpx 56rpx;
display: flex;
align-items: center;
.page-header-content-text {
margin: 0 auto;
display: flex;
flex-wrap: wrap;
font-size: 36rpx;
color: #131313;
}
.close-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 34rpx;
display: flex;
}
}
.page-content {
margin-bottom: 26rpx;
height: 508rpx;
.picker-view {
height: 508rpx;
.picker-view-item {
display: flex;
justify-content: center;
align-items: center;
font-size: 36rpx;
}
}
}
.page-footer {
margin: 0 32rpx;
padding-bottom: 20rpx;
button {
border: none;
height: 88rpx;
background: linear-gradient(90deg, #957ffe 0%, #bf9be8 100%);
border-radius: 44rpx 44rpx 44rpx 44rpx;
font-size: 32rpx;
color: #ffffff;
}
}
}
</style>

操作步骤：

picker-view 中的[@pickend](/user/pickend)，[@pickstart](/user/pickstart)，immediate-change希望可以做到全端支持，当在弹窗中使用这个组件时，由于app端不支持这个属性，拿不到动画开始时的状态，导致弹窗关闭时picker-view的onchange事件没有触发

预期结果：

picker-view 中的[@pickend](/user/pickend)，[@pickstart](/user/pickstart)，immediate-change希望可以做到全端支持

实际结果：

picker-view 中的[@pickend](/user/pickend)，[@pickstart](/user/pickstart)，immediate-change希望可以做到全端支持，当在弹窗中使用这个组件时，由于app端不支持这个属性，拿不到动画开始时的状态，导致弹窗关闭时picker-view的onchange事件没有触发

bug描述：

picker-view 中的[@pickend](/user/pickend)，[@pickstart](/user/pickstart)，immediate-change希望可以做到全端支持，当在弹窗中使用这个组件时，由于app端不支持这个属性，拿不到动画开始时的状态，导致弹窗关闭时picker-view的onchange事件没有触发
`