Shulou(Shulou.com)06/03 Report--

Editor to share with you how vue3.0 implements the encapsulation of drop-down menus. I hope you will get something after reading this article. Let's discuss it together.

Let's take a look at what we want to achieve.

It is very common to expand and display the contents of menu items. How to develop them in vue3.0? here we use the default style of bootstrap.

Idea 1: idea 2: create a new article and edit the personal information of the article

Both ideas work. Comparatively speaking, the second way of thinking is relatively clear, knowing the specific level when using it, which is also the mode of elementUI component development.

Now analyze the second idea of component development.

DropDown.ts

{{title}}

Js part

Import {defineComponent, ref, onMounted, onUnmounted, watch} from "vue"; import useClickOutside from ".. / hooks/useClickOutside"; export default defineComponent ({name: "DropDown", props: {title: {type: String, required: true,},}, setup (context) {const isOpen = ref (false); / / vue3.0 gets the reference const dropDownRef = ref (null) of the dom object Const toggleOpen = () = > {isOpen.value =! isOpen.value;}; const handleClick = (e: MouseEvent) = > {console.log (e.target, "e"); if (dropDownRef.value) {console.log (dropDownRef.value) If (/ / contains determines whether a node contains nodes! dropDownRef.value.contains (e.target as HTMLElement) & & isOpen.value) {isOpen.value = false;}}; onMounted (() = > {/ / register global click event document.addEventListener ("click", handleClick);}) OnUnmounted (() = > {/ / unbind document.removeEventListener ("click", handleClick);}); return {isOpen, toggleOpen, dropDownRef,};},})

DropDownItem.ts

/ * here is the slot to penetrate * / .dropdowm-option.is-disabled > * {color: # 6c757d; pointer-events: none; background-color: transparent;} import {defineComponent} from "vue"; export default defineComponent ({props: {disabled: {type: Boolean, default: false,},}, setup () {return {};},})

At this point, the component is complete. But... We can see that clicking on the entire document to hide this event has little to do with the whole component, so we can extract it into a hooks

UseClickOutside.ts

Import {ref, onMounted, onUnmounted,Ref} from 'vue'const useClickOutside = (elementRef:Ref) = > {const isClickOutside = ref (false) const handler = (e: MouseEvent) = > {console.log (elementRef.value) If (elementRef.value) {if (elementRef.value.contains (e.target as HTMLElement)) {isClickOutside.value = false} else {isClickOutside.value = true}} onMounted (() = > {document.addEventListener ("click", handler);}) OnUnmounted (() = > {document.removeEventListener ("click", handler);}); return isClickOutside} export default useClickOutside

And then rewrite our DropDown.ts component.

/ / delete the existing event logic. Const isClickOutside = useClickOutside (dropDownRef); / * console.log (isClickOutside.value, "isClickOutside"); * / / introduce a listening method. When the data changes, we change the value of isOpen to false watch (isClickOutside, (newValue) = > {if (isOpen.value & & isClickOutside.value) {isOpen.value = false;}});. After reading this article, I believe you have a certain understanding of "how vue3.0 implements the encapsulation of drop-down menus". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.