Vue の 4 つのカスタム命令の説明と使用例

Vue.directive('ドラッグ', {
  挿入(el) {
    ヘッダーをel.querySelector('.dialog_header')にします。
    header.style.cssText += ';cursor:move;'
    header.onmousedown = 関数 (e) {
      //現在の表示領域の幅と高さを取得します。let clientWidth = document.documentElement.clientWidth
      clientHeight = document.documentElement.clientHeight とします。
 
      // 独自の幅と高さを取得します。let elWidth = el.getBoundingClientRect().width
      elHeight = el.getBoundingClientRect().height とします。
 
      //現在の距離表示領域の上端と左端を取得します
      elTop = el.getBoundingClientRect().top とします。
      elLeft = el.getBoundingClientRect().left とします。
 
      //クリック時の座標を取得するlet startX = e.pageX
      startY = e.pageYとします。
 
      document.onmousemove = 関数 (e) {
        //要素のオフセット = マウスのスライド後の座標 - マウスが最初に要素をクリックしたときの座標 + 最初のクリック時の表示領域からの要素の上と左の距離
        moveX = e.pageX - startX + elLeft とします。
        moveY = e.pageY - startY + elTop とします。
 
        // 表示領域を境界として使用し、ドラッグを表示領域内に制限します if ((moveX + elWidth) > clientWidth || moveX < 0 || (moveY + elHeight) > clientHeight || moveY < 0) {
          戻る
        }
 
        el.style.cssText += '上:' + 移動Y + 'px;左:' + 移動X + 'px;'
      }
      document.onmouseup = 関数（）{
        ドキュメント.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

Vue.directive('wordlimit',{
  バインド(el,バインディング){
    コンソールにログ出力します。
    let { 値 } = バインディング
    Vue.nextTick(() => {
      //入力ボックスがテキストエリアボックスか入力ボックスかを調べる let current = 0
      arr = Array.prototype.slice.call(el.children) とします。
      (i = 0 とします; i < arr.length; i++) {
        if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
          電流 = i
        }
      }
   
      //現在の入力ボックスのバイト数を更新します el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
    })
  },
  更新(el,バインディング){
    console.log('更新');
    let { 値 } = バインディング
    Vue.nextTick(() => {
      //入力ボックスがテキストエリアボックスか入力ボックスかを調べる let current = 0
      arr = Array.prototype.slice.call(el.children) とします。
      (i = 0 とします; i < arr.length; i++) {
        if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
          電流 = i
        }
      }
   
      //現在の入力ボックスのバイト数を更新します el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
    })
  },
  挿入(el,binding){
    console.log('挿入されました');
    let { 値 } = バインディング
 
    //入力ボックスがテキストエリアボックスか入力ボックスかを調べる let current = 0
    arr = Array.prototype.slice.call(el.children) とします。
    (i = 0 とします; i < arr.length; i++) {
      if(arr[i].tagName=='TEXTAREA' || arr[i].tagName=='INPUT'){
        電流 = i
      }
    }
 
    // 単語制限を囲む要素を作成し、それをテキストエリアと入力ボックスに配置する let div = document.createElement('div')
    if(el.children[current].tagName=='TEXTAREA'){//これはテキストエリアで、右下隅に配置されています div.style = 'color:#909399;position:absolute;font-size:12px;bottom:5px;right:10px;'
    }それ以外{
      styStr = '' とします
      if(!el.classList.contains('is-disabled')){//入力ボックスがグレー表示されていない場合は、背景色を追加します styStr = 'background:#fff;'
      }
      div.style = 'color:#909399;position:absolute;font-size:12px;bottom:2px;right:10px;line-height:28px;height:28px;'+styStr
    }
 
    div.innerHTML = '0/' + 値
    el.appendChild(div)
    el.children[current].style.paddingRight = '60px'
 
    el.oninput = () => {
      val = el.children[current].valueとします
      val = val.replace(/[^\x00-\xff]/g,'**') //eslint 無効行
      // 単語制限ボックスは、el の最後の要素として挿入されます el.children[el.children.length-1].innerHTML = val.length + '/' + value
      if(val.length>値){
        let cnLen = 0 //1バイトワードの数 let enLen = 0 //2バイトワードの数 if(val.match(/[^**]/g) && val.match(/[^**]/g).length){
          enLen = val.match(/[^**]/g).length // バイト内の単語数を計算する // バイトには両方のバイトが含まれる if((value - val.match(/[^**]/g).length)>0){
            cnLen = Math.floor((値 - val.match(/[^**]/g).length)/2)
          }それ以外{
            cnLen = 0
          }
        }else{ //両方のバイトについてenLen = 0
          cnLen = Math.floor(値/2)
        }
 
        if(enLen>値){
          enLen = 値
        }
 
        // バイト数が制限を超えた場合は、 el.children[current].value = el.children[current].value.substr(0,enLen+cnLen) をインターセプトします。
 
        //現在の入力ボックスのバイト数を更新します el.children[el.children.length-1].innerHTML = el.children[current].value.replace(/[^\x00-\xff]/g,'**').length +'/'+value//eslint-disable-line
 
      }
    }
 
  },
})

<el-input type="textarea" 行数="3" v-wordlimit="20" v-model="値"></el-input>

Vue.directive('アンカー',{
  挿入(el,binding){
    let { 値 } = バインディング
    タイマーを null にする
    el.addEventListener('クリック',function(){
      // 現在の要素と表示領域の上端の間の距離 let currentTop = el.getBoundingClientRect().top
      アニメーションスクロール(現在のトップ)
    }、間違い）
     
    関数 animateScroll(currentTop){
      if(タイマー){
        クリアインターバル(タイマー)
      }
      c = 9とする
      タイマー = setInterval(() => {
        c==0の場合{
          クリアインターバル(タイマー)
        }
        ちー
        window.scrollBy(0,(現在のトップ値)/10)
      },16.7)
    }
 
  }
})

<div class="box" v-anchor="20" style="color:red;">はい</div>

Vue.directive('hasRole',{
  挿入(el,binding){
    let { 値 } = バインディング
    roles = JSON.parse(sessionStorage.getItem('userInfo')).roleIds とします。
 
    if(値 && 値インスタンス配列 && 値.length>0){
 
      hasPermission = value.includes(roles) とします。
 
      if(!hasPermission){
        el.parentNode && el.parentNode.removeChild(el)
      }
    }それ以外{
      throw new Error(`命令にバインドされた式を確認してください。正しい形式は v-hasRole="['admin','reviewer']"` などです)
    }
  }
})