Vueで一般的に使用されるツール機能

序文

この記事では、Vueプロジェクトで一般的に使用されるツール機能をいくつか記録します。ツール機能を統合管理するために、これらの機能はディレクトリsrcの下のフォルダに均一に配置されますutils。

---

1.カスタムフォーカスコマンド

1.方法1

moutedサイクル、ref + querySelectorは入力タグを取得し、focus（）を呼び出します

2.方法2

カスタムディレクティブ（ローカル）ディレクティブ：fofo（挿入）、ラベルで定義および使用、v-fofo

3.方法3

グローバルカスタムインストラクション、推奨（再利用性が高い）。main.jsにインポートして使用できます。コードは次のとおりです（例）：

import Vue from 'vue'

Vue.directive("fofo",{
  inserted(el) {
    // 判断拿到的元素名称
    if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
      el.focus()
  	} else {
     // 尝试向内层获取一下
      el.querySelector('input').focus()
    }
  }
})
复制代码
复制代码

2.防振入力ボックス

1.需要

ユーザーが入力ボックスにコンテンツを入力すると、ユーザーの入力コンテンツをサーバーに戻すために、入力ボックスの入力イベントを監視する必要がありますが、入力ボックスの値が変更されると、Ajaxリクエストはすぐに送信されるため、一部の不整合が発生します。必要なAjaxリクエスト。ユーザーが入力を停止して一定時間待ってからバックグラウンドにリクエストを送信すると、不要なリクエストを減らすことができます。

2.アイデア

ユーザーが入力を開始すると、タイマーが開始されます。タイマーの期限が切れた後、ユーザーがコンテンツを再度入力しない場合、Ajaxリクエストがバックグラウンドに送信されます。ユーザーが指定された時間内に再度入力すると、最後のタイマーがクリアされ、タイマーが再計測されます。

3.コードの実装

これは、実装の原則を理解した後、コードを抽出できることを示す例です。コードは次のとおりです（例）：

<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
                // 这里可以发送Ajax请求，根据用户输入的关键字拿到后台返回的搜索联想列表
                console.log(this.kw)
            }, 1000) // 当用户停止输入内容一秒后会执行定时器内的逻辑，如果一秒内又写了内容就会重新计时
      	}
   	}
}
</script>
复制代码
复制代码

3.キーワードの強調表示

1.需要

ユーザーが入力ボックスでキーワードを検索すると、表示される関連付けリストのキーワードの色が変更され、ユーザーは目的の結果をより直感的に確認できるようになります。

2.アイデア

lightFn2つの引数を受け取る関数をカプセル化します。最初の引数は変更された文字列を受け取り、2番目の引数は一致するキーワードです。

3.コードデモ

コードは次のとおりです（例）：

export const lightFn = (str, targetStr) => {
    // 忽略大小写且全局匹配
  const reg = new RegExp(targetStr, 'ig')
  return str.replace(reg, match => {
    return `<span style="color:red">${match}</span>`
  })
}
复制代码
复制代码

第四に、Excelテーブルに保存されている時間をフォーマットします

1.需要

インポートするExcelテーブルに保存されている時間をExcel形式から保存形式に変換します。

2.コードデモ

このコードはLanYuxiから引用されています。この大物のおかげで、ここにコードがあります〜コードは次のとおりです（例）：

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)
}
复制代码
复制代码

---