Vue3组件开发:点击按钮导致弹窗显示
发布时间
阅读量:
阅读量
基于Vue3框架的组件开发中,实现通过点击按钮外部区域来触发弹窗事件的功能
1. 环境配置:
vscode
TS
“bootstrap”: “^5.1.3”,
“core-js”: “^3.6.5”,
“vue”: “^3.0.0”,
“vue-class-component”: “^8.0.0-0”
2. 代码:
useOutclick.TS
import { ref, onMounted, onUnmounted, Ref } from 'vue'
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
const isClickOutside = ref(false)
const handler = (e:MouseEvent) => {
if (elementRef.value) {
if (elementRef.value.contains(e.target as HTMLElement)) {
isClickOutside.value = false
} else {
isClickOutside.value = true
全部评论 (0)
还没有任何评论哟~
