在 *.vue 文件中的script标签上有指定 lang 参数吗？
<script lang="ts">
</script>
- 如果你喜欢手动vue片段来生成结构的话,可能会出现这个问题
- 属实离谱…
<template>
<div class="dropdown" ref="dropdownRef">
<a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="toggleOpen">
{{title}}
</a>
<ul class="dropdown-menu" :style="{display: 'block'}" v-if="isOpen">
<slot></slot>
</ul>
</div>
</template>
<script lang="ts">
import { ref, onMounted, onUnmounted,Ref } from 'vue'
export default {
name:'Dropdown',
props:{
title:{
type:String,
required:true
}
},
setup(){
const isOpen = ref(false)
const dropdownRef = ref<null | HTMLElement>(null)
const toggleOpen=()=>{
isOpen.value = !isOpen.value
}
const handler = (e: MouseEvent)=>{
if(dropdownRef.value){
if(!dropdownRef.value.contains(e.target as HTMLElement) && isOpen){
isOpen.value = false
}
}
}
onMounted(()=>{
document.addEventListener('click',handler)
})
onUnmounted(()=>{
document.removeEventListener('click',handler)
})
return {
isOpen,
toggleOpen,
dropdownRef,
}
}
}
</script>
<style>
</style>
