uniapp uni-app中同一个页面如何设置多个弹出层（弹框

问题

• 由于多个弹出层，导致混掉了。

解决

• 原写法

<view>
                <!-- 普通弹窗 -->
                <uni-popup ref="popup" background-color="#fff" @change="change">
                    <view class="popup-content" style="width: 260px;" :class="{ 'popup-height': type === 'left' }">
                    </view>
                    <view>
                        <template>
                            <uni-indexed-list style="margin-top: 50px;" :options="townList" :show-select="true"
                                @click="bindClick" />
                        </template>
                    </view>
                </uni-popup>
            </view>
            <view>
                <!-- 普通弹窗 -->
                <uni-popup ref="popup" background-color="#fff" @change="change" style="z-index: 10000;">
                    <view class="popup-content" style="width: 260px;" :class="{ 'popup-height': type === 'right' }">
                    </view>
                    <view>
                        <template>
                            <!-- <uni-indexed-list style="margin-top: 50px;" :options="returnList" :show-select="true"/> -->
                            <uni-section title="历史记录" type="line" padding>
                                    <uni-steps :options="returnList" active-color="#007AFF" :active="returnList.length-1" direction="column" />
                            </uni-section>
                        </template>
                    </view>
                </uni-popup>
            </view>

ref 改写成， ref="popup" , ref="popup2"，如下面

<view>
                <!-- 普通弹窗 -->
                <uni-popup ref="popup" background-color="#fff" @change="change">
                    <view class="popup-content" style="width: 260px;" :class="{ 'popup-height': type === 'left' }">
                    </view>
                    <view>
                        <template>
                            <uni-indexed-list style="margin-top: 50px;" :options="townList" :show-select="true"
                                @click="bindClick" />
                        </template>
                    </view>
                </uni-popup>
            </view>
            <view>
                <!-- 普通弹窗 -->
                <uni-popup ref="popup2" background-color="#fff" @change="change" style="z-index: 10000;">
                    <view class="popup-content" style="width: 260px;" :class="{ 'popup-height': type === 'right' }">
                    </view>
                    <view>
                        <template>
                            <!-- <uni-indexed-list style="margin-top: 50px;" :options="returnList" :show-select="true"/> -->
                            <uni-section title="历史记录" type="line" padding>
                                    <uni-steps :options="returnList" active-color="#007AFF" :active="returnList.length-1" direction="column" />
                            </uni-section>
                        </template>
                    </view>
                </uni-popup>
            </view>

• taggle 写法

            toggle(type) {
                this.type = type
                //this.getTownOptions();
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                this.$refs.popup.open(type)
            },
            toggleEx(type,idCard) {
                this.type = type
                this.getReturnOptions(idCard);
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                this.$refs.popup2.open(type)
            },
            toggleEstimateEx(type,idCard){
                this.type = type
                this.getEstimateOptions(idCard);
                // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
                this.$refs.popup2.open(type)
            }

• 如果通用一个toggle 方法

  
  image.png