vue3+vant中自定义隐藏DropdownMenu下拉菜单

一、概述

需求：当点击确定按钮时隐藏下拉菜单。

主要使用的方法：ref 标识当前组件 van-dropdown-item ，当点击确定按钮时通过 getCurrentInstance 来获取组件身上的属性方法。

效果图：

二、实现方式

<template>
  <van-dropdown-menu>
      <van-dropdown-item title="更多筛选" ref="sureScreen">
          此处代码省略............
          <div class="shiftBtn">
            <div class="defaultBtn btn">
              <van-button type="default" block round @click="resetMoreScreen">
                重置
              </van-button>
            </div>
            <div class="primaryBtn btn">
              <van-button type="primary" block round @click="onSureMoreScreen">
                确定
              </van-button>
            </div>
          </div>
       </van-dropdown-item>
    </van-dropdown-menu>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
// 获取当前组件实例
const instance = getCurrentInstance();
// 确定更多筛选
const onSureMoreScreen = () => {
   // 隐藏更多筛选
  instance.proxy.$refs.sureScreen.toggle();
}
</script>

<style>
</style>