vue ref属性
- 场景 。如果我们想获取一个dom节点可以用ref属性。在vue 里面每一个标签都有一个ref属性。 可以获取该节点的html 类似于document.getElementById("#dom")
看代码<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" aria-labelledby="dropdownMenuLink"> <slot></slot> </ul> </div> </template> <script lang="ts"> import { defineComponent, ref, onMounted, onUnmounted } from 'vue' export default defineComponent({ name: 'Dropdown', props: { title: { type: String, required: true } }, setup () { const isOpen = ref(false) // dom节点和null联合类型 在 dom挂在的时候会变成dom节点 const dropdownRef = ref<null | HTMLElement>(null) //在组件挂载的时候会像 getElementById获取 html的dom节点。默认值是null 这里用到ts的 泛型。联合类型 const toggleOpen = () => { isOpen.value = !isOpen.value } const handler = (e: MouseEvent) => { if (dropdownRef.value) { console.log(dropdownRef.value) if (!dropdownRef.value.contains(e.target as HTMLElement) && isOpen.value) { isOpen.value = false } } } onMounted(() => { document.addEventListener('click', handler) }) onUnmounted(() => { document.removeEventListener('click', handler) }) return { isOpen, toggleOpen, dropdownRef } } }) </script>
原创文章，作者：星辰，如若转载，请注明出处：http://www.z88j.com/416.html
微信扫一扫 
