以下是一个简单的示例，展示如何在 Vue.js 中使用 Vant4 的 useClickAway：
1. 安装 Vant4 和 Vue 3：
确保你已经安装了 Vant4 和 Vue 3，可以使用 npm 或 yarn 安装：
npm install vant@next vue@next --save
# 或
yarn add vant@next vue@next
2. 在你的 Vue 组件中使用 useClickAway：
<template>
<div>
<button @click="togglePopup">Toggle Popup</button>
<!-- 弹出层 -->
<div v-show="showPopup" ref="popup" class="popup">
<p>点击外部区域关闭我</p>
</div>
</div>
</template>
<script>
import { ref, onMounted, useClickAway } from 'vue';
export default {
setup() {
// 使用 ref 创建响应式数据
const showPopup = ref(false);
// 使用 ref 创建 DOM 引用
const popupRef = ref(null);
// 使用 useClickAway 处理点击外部区域事件
useClickAway(popupRef, () => {
// 点击外部区域时触发的逻辑
showPopup.value = false;
});
// 定义切换弹出层显示状态的函数
const togglePopup = () => {
showPopup.value = !showPopup.value;
};
// 在组件挂载后获取 DOM 引用
onMounted(() => {
console.log(popupRef.value);
});
// 返回组件的属性和函数
return {
showPopup,
togglePopup,
popupRef
};
}
};
</script>
<style scoped>
.popup {
position: absolute;
top: 50px;
left: 50px;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
</style>
在上述示例中，我们使用 useClickAway 处理了点击弹出层以外区域的事件，当点击外部区域时，会触发 showPopup 的状态变更，从而关闭弹出层。
这只是一个简单的示例，你可以根据实际需求进行相应的逻辑处理。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5867/Vant