Vueのカスタムディレクティブの詳細なガイド

// コマンドをインスタンス化しますが、このコマンドにはパラメータ `v-xxx` がありません
 
// -- 値を命令 `v-xxx="value"` に渡します  
 
// -- `v-html="'<p>Content</p>'"` などの文字列をディレクティブに渡します。
`v-xxx="'文字列'"` 
 
// -- `v-bind:class="className"` などのパラメータ (`arg`) を渡します
`v-xxx:arg="値"` 
 
// -- 修飾子を使用する (`modifier`)
`v-xxx:arg.modifier="値"` 

// グローバルカスタムディレクティブ `v-focus` を登録します
Vue.directive('focus', {
  // バインドされた要素が DOM に挿入されると...
  挿入: 関数 (el) {
    // 要素にフォーカス el.focus() // ページが読み込まれた後に入力ボックスに自動的にフォーカスする小さな関数}
})

ディレクティブ: {
  集中：
    // 挿入された命令の定義: function (el) {
      el.focus() // ページが読み込まれた後に入力ボックスに自動的にフォーカスする小さな関数}
  }
}

<入力vフォーカス />

<div v-demo="{ color: 'white', text: 'hello!' }"></div>
<スクリプト>
    Vue.directive('demo', 関数(el, バインディング) {
    console.log(binding.value.color) // "白"
    console.log(binding.value.text) // "こんにちは!"
    })
</スクリプト>

// 1. v-throttleカスタムディレクティブを設定する Vue.directive('throttle', {
  バインド: (el, バインディング) => {
    let throttleTime = binding.value; // 手ぶれ補正時間if (!throttleTime) { // ユーザーが手ぶれ補正時間を設定していない場合、デフォルトは2秒です
      スロットル時間 = 2000;
    }
    cbFun を実行します。
    el.addEventListener('クリック', イベント => {
      if (!cbFun) { // 最初の実行 cbFun = setTimeout(() => {
          cbFun = null;
        }, スロットル時間);
      } それ以外 {
        イベント && event.stopImmediatePropagation();
      }
    }、 真実）;
  },
});
// 2. ボタン タグに v-throttle カスタム命令を設定します <button @click="sayHello" v-throttle>Submit</button>

定数LazyLoad = {
    // インストールメソッド install(Vue,options){
       // image の代わりに画像を読み込みます let defaultSrc = options.default;
        Vue.directive('lazy',{
            バインド(el,バインディング){
                LazyLoad.init(el、binding.value、defaultSrc);
            },
            挿入された(el){
                // 互換性処理 if('InterpObserver' in window){
                    LazyLoad.observe(el);
                }それ以外{
                    LazyLoad.listenerScroll(el);
                }
                
            },
        })
    },
    // 初期化 init(el,val,def){
        // src は実際の src を格納します
        el.setAttribute('src',val);
        // src を読み込み画像に設定します el.setAttribute('src',def);
    },
    // InterpObserverを使用してelを監視する
    観察する{
        io = new InterpObserver(エントリ => {
            realSrc = el.dataset.src; とします。
            エントリ[0]が交差している場合
                if(realSrc){
                    el.src = 実Src;
                    el.removeAttribute('src');
                }
            }
        });
        io.observe(el);
    },
    // スクロールイベントをリッスンする listenerScroll(el){
        ハンドラをLazyLoad.throttle(LazyLoad.load,300);
        LazyLoad.load(el);
        window.addEventListener('スクロール',() => {
            ハンドラ(el);
        });
    },
    // 実画像を読み込む load(el){
        windowHeight = document.documentElement.clientHeight とします。
        elTop を el.getBoundingClientRect().top とします。
        elBtm = el.getBoundingClientRect().bottom; とします。
        realSrc = el.dataset.src; とします。
        if(elTop - windowHeight<0&&elBtm > 0){
            if(realSrc){
                el.src = 実Src;
                el.removeAttribute('src');
            }
        }
    },
    // スロットル(fn,遅延){
        タイマーを設定します。 
        prevTime を設定します。
        関数(...引数)を返す{
            currTime = Date.now() とします。
            コンテキストを this とします。
            前の時刻が現在の時刻と等しい場合、前の時刻は現在の時刻と等しくなります。
            タイマーをクリアします。
            
            (現在の時刻 - 前の時刻 > 遅延) の場合 {
                前回の時刻 = 現在の時刻;
                fn.apply(コンテキスト、引数);
                タイマーをクリアします。
                戻る;
            }
 
            タイマー = setTimeout(関数(){
                前の時刻 = Date.now();
                タイマー = null;
                fn.apply(コンテキスト、引数);
            }、遅れ）;
        }
    }
 
}
デフォルトのLazyLoadをエクスポートします。

'ant-design-vue' から { Message } をインポートします。
 
const vCopy = { //
  /*
    バインドフック関数は、初めてバインドするときに呼び出され、初期化設定を行うために使用できます。el: 操作する DOM オブジェクト。value: 命令に渡される値、つまりコピーしたい値*/
  バインド(el, { 値 }) {
    el.$value = value; // この値は他のフック関数で使用されるため、渡された値を格納するためにグローバルプロパティを使用します。el.handler = () => {
      if (!el.$value) {
      // 値が空の場合、プロンプトを表示します。ここで使用しているプロンプトは ant-design-vue のプロンプトです。自由に使用できます。Message.warning('No copy content');
        戻る;
      }
      // textarea タグを動的に作成します。const textarea = document.createElement('textarea');
      // iOS 上でキーボードが自動的に表示されないようにするために textarea を読み取り専用に設定し、textarea を表示領域から移動します。textarea.readOnly = 'readonly';
      textarea.style.position = '絶対';
      textarea.style.left = '-9999px';
      // コピーする値を textarea タグの value 属性に割り当てます。textarea.value = el.$value;
      // 本文にテキストエリアを挿入します。 document.body.appendChild(textarea);
      // 値を選択してコピーします textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('コピー');
      if (結果) {
        Message.success('コピーが成功しました');
      }
      document.body.removeChild(テキストエリア);
    };
    // クリック イベント (いわゆるワンクリック コピー) をバインドします。el.addEventListener('click', el.handler);
  },
  // 入力値が更新されると、componentUpdated(el, { value }) がトリガーされます。
    el.$value = 値;
  },
  // 命令が要素からアンバインドされたら、イベントバインディングを削除します unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};
 
デフォルトの vCopy をエクスポートします。

<div ref="a" id="bg" v-drag></div>

  ディレクティブ: {
    ドラッグ: {
      バインド() {},
      挿入(el) {
        el.onmousedown = (e) => {
          x = e.clientX - el.offsetLeft とします。
          y = e.clientY - el.offsetTop とします。
          ドキュメント.onmousemove = (e) => {
            xx = e.clientX - x + "px" とします。
            yy = e.clientY - y + "px" とします。
            el.style.left = xx;
            el.style.top = yy;
          };
          el.onmouseup = (e) => {
            ドキュメント.onmousemove = null;
          };
        };
      },
    },
  },