Summary of Common Tools and Functions in Vue Project

  • 2021-11-14 04:53:02
  • OfStack

Preface to the table of contents
1. Customize the Focus Directive
1. Mode 1
2. Mode 2
3. Mode 3
2. Input box anti-shake
1. Requirements
2. Ideas
3. Code implementation
3. Keyword highlighting
1. Requirements
2. Ideas
3. Code demonstration
4. Formatting the time stored in the Excel table
1. Requirements
2. Code demonstration
Summarize

Preface

This paper records some common tool functions in Vue project. In order to manage the tool functions, we put these functions into the utils folder under the src directory

1. Customize the Focus Directive

1. Mode 1

mouted cycle, ref+querySelector gets the input tag and calls focus ()

2. Mode 2

Custom instruction (local) directives: fofo (inserted), which is used on the label after being defined, v-fofo

3. Mode 3

Global custom instructions, recommended to use (high reusability). Imported in main. js. The code is as follows (example):


import Vue from 'vue'

Vue.directive("fofo",{
  inserted(el) {
    //  Determine the name of the obtained element 
    if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
      el.focus()
  	} else {
     //  Try to get inward 1 Under 
      el.querySelector('input').focus()
    }
  }
})

2. Input box anti-shake

1. Requirements

When the user inputs the content in the input box, he needs to listen to the input event in the input box to get the content input by the user and feed it back to the server. However, when the value of the input box changes, he immediately sends an Ajax request, which will cause some unnecessary Ajax requests. When the user stops inputting and waits for 1 fixed time, then sends the request to the background, which can reduce 1 unnecessary request.

2. Ideas

When the user starts to input, a timer is started. If the user does not input the content again after the timing is finished, the Ajax request is sent to the background. If the user enters again within the specified time, the timer of the previous time will be cleared and timed again.

3. Code implementation

Here is an example to demonstrate that after understanding the implementation principle, the code can be pulled out. The code is as follows (example):


<template>
	<div>
        <input type="text" v-model="kw" @input="inputFn"/>
    </div>
</template>
<script>
export default{
    data(){
        return{
            kw:'',
            timer:null
        }
    },
    methods:{
        inputFn(){
            clearTimeout(this.timer)
      		this.timer = setTimeout(() => {
                if(this.kw === '') return
                //  You can send it here Ajax Request, get the search association list returned from the background according to the keywords input by the user 
                console.log(this.kw)
            }, 1000) //  When the user stops entering content, 1 The logic in the timer will be executed after seconds, if 1 If you write something again in seconds, you will re-time it 
      	}
   	}
}
</script>

3. Keyword highlighting

1. Requirements

When the user searches for a certain keyword in the input box, the keywords in the association list will be displayed and changed in color, so that the user can see the desired result more intuitively.

2. Ideas

Encapsulates an lightFn function that takes two arguments, the first is to take the modified string, and the second is the key to match

3. Code demonstration

The code is as follows (example):


export const lightFn = (str, targetStr) => {
    //  Ignore case and match globally 
  const reg = new RegExp(targetStr, 'ig')
  return str.replace(reg, match => {
    return `<span style="color:red">${match}</span>`
  })
}

4. Formatting the time stored in an Excel table

1. Requirements

Convert the time stored in the Excel table to be imported from the format of Excel to the format at the time of storage.

2. Code demonstration

This code is quoted from Lan Yuxi. Thanks to this big brother, here is included 1 ~ the code is as follows (example):


export function formatExcelDate(numb, format = '/') {
  const time = new Date((numb - 25567) * 24 * 3600000 - 5 * 60 * 1000 - 43 * 1000 - 24 * 3600000 - 8 * 3600000)
  time.setYear(time.getFullYear())
  const year = time.getFullYear() + ''
  const month = time.getMonth() + 1 + ''
  const date = time.getDate() + ''
  if (format && format.length === 1) {
    return year + format + month + format + date
  }
  return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date)
}

Summarize


Related articles: