treemenu

  • Principle: the use of VUE recursive components, to achieve infinite menu, three components, the difficulty is the implementation of UI.
  • item

  • subitem

  • Named slot syntax sugar
<template v-slot:title> == <template #title>
Copy the code
  • Unnamed slots can use V-for, but named slots cannot use V-for
  • Template can be used as a placeholder and will not be rendered, www.cnblogs.com/tu-0718/p/1…
  • V – the location of the show
<template> <div class="wrap" @mouseenter="mouseenter" @mouseleave="mouseleave"> <slot name='title'></slot> <span class="icon">&gt; </span> <div class="sub-item" v-show="detailShow"> <slot></slot> </div> </div> </template> // Mouseenter and mouseleave should not be in the icon, they should be in the wrap, otherwise when the sub-item is moved, the entire div will disappear. General use enterCopy the code

selector

  • Principle: transform the input box, add a DIV dropdown box, achieve memory, filter content UI

  • The use of the filter

Var arr1 = arr.filter((item)=>item === 2) = arr.filter((item)=>{ return item === 2 })Copy the code
  • map
// Map must call each item of the original array, otherwise the array of returned values will be undefined. // The array contains the processed values of each original array. If not, undefined will be used. Var arr1 = arr.map((item)=>{if(item === 2){return item *2} return item}) var arr1 = arr.map((item)=>item*2)Copy the code

  • ToLowerCase /toUpperCase: Note to use uppercase and only for strings

  • includes

The includes() method is used to determine whether a string contains a specified substring. Returns true if a matching string is found, false otherwise. Note: the includes() method is case sensitive. So you have to use case in advanceCopy the code
  • Click events disappear
After writing the logic, I found that the optional click on item did not trigger the click event. // By searching the source, I found that even the original click event did not trigger. // Reason: div disappeared too quickly and did not trigger. Oinput.addeventlistener ('blur',function(){oicon.className = SetTimeout (()=>{omenu.style. display = 'none' if(this.value.length === 0){omenu.style. display = 'none' if(this.value.length === 0){ oPlaceholder.style.display = 'block' } },150) },false)Copy the code
  • Memory function
Trigger the Blur event, // oldValue can be a variable in props or setup. <input type="text" class="input" :value="oldValue" @input="itemInput" @focus="itemInput" ref="InputValue" @blur="rememberValue(oldValue)" > const // rememberValue = (oldValue)=>{// rememberValue = (oldValue)=>{/ const _input = instance.refs.InputValue; console.log(instance.refs,instance); console.dir(instance.refs.InputValue); if(_input.value.length>0){ console.log( _input.value); _input.value = oldValue } }Copy the code
  • Two ways to get el
Vue3 API <div class=" UI-modal "// Set the ref attribute ref="uiModal" > const instance = getCurrentInstance () The refs below the instance holds el 2. Principle: <div class=" UI-modal "// Set the ref attribute ref="uiModal" > set(){// Must have the same name, UiModal = ref(null) onMounted(()=>{// Get a value! console.log(uiModal) }) return { uiModal } }Copy the code

carousel

  • How to do it: All images are stacked in one place via position, controlled by the V-if attribute, and then animated by transfrom= translateX and VUe3 to move. X is 0-100% for vanishing images and -100%-0 for incoming images. If you get to the end of a group of images, jump straight to the first one (in effect, v-if shows the first one).

  • Dynamic introduction of picture paths

<img: SRC ="require('./assets/${item.img_name} ')">Copy the code
  • The use and elimination of timer
In Vue3 the timer must be cleared before the DOM is cleared, that is, onBeforeUnmount hook function uses // to set the timer let t; OnMounted (()=>{if(props. AutoPlay){t = setInterval(()=>{autoPlay (state.dir)},props. Duration)}}) // Clears the timer onBeforeUnmount(()=>{ clearInterval(t) t = null; })Copy the code
  • Gets the length of slot
Need to obtain the number of components to be replaced by this slot in the parent component. Get the instance, the slots property under the instance is a function that we're going to execute, and then an array, Let instance = getCurrentInstance() let length = instance.slots.default()[0].children.length,Copy the code
  • For the display of pictures
Requirements: I'm going to show this div with v-if, <div v-if="currentIndex === selfIndex" class="carousel-item"> <slot></slot> </div> Because it's v-for traversal, Const instance = getCurrentInstance() const state = reactive({//) SelfIndex: instance.vnode.key = selfIndex: instance.vnode.key = currentIndex; The instance. The parent. CTX. CurrentIndex}) / / parent component set properties, the initial value of the incoming is beginning As the change of value to achieve the effect of shuffling back const state = reactive ({currentIndex: props. Initial})Copy the code
  • The responsive value of props
Causes: Const state = reactive({// currentIndex is non-reactive,}) {// currentIndex = reactive({// currentIndex is non-reactive,}); It has nothing to do with being created in Reactive. Special currentIndex: Instance. Parent. CTX. CurrentIndex}) / / so you need to watch to monitor the parent component change to change the state. The value of currentIndex watch (() = > {return The instance. The parent. CTX currentIndex}, (value) = > {state. CurrentIndex = value}) / / similar to vue2, have to use the change of the watch to monitor the value of the props, Using it directly on the page is non-responsive.Copy the code
  • Use of transition for VUe3
<template> <transition> <div v-if="currentIndex === selfIndex" Class ="carousel-item"> <slot></slot> </div> </transition> </template V -enter-active, V -enter, V -enter-to, V -leave-active, V -leave, V -leave-to V-enter -to // Set the shift to achieve the animation effect. V-enter -active,. V-leave-active {transition: all.2s linear; } // vue3: translateX {transform: translateX(100%);} // vue3: translateX(100%); } .v-enter-to{ transform: translateX(0); } // vue3 {v-enter-active; v-leave-active{transform: translateX(0); v-enter-active {v-leave-active: translateX(0); } .v-leave-to{ transform: translateX(-100%); }Copy the code