如何新增自定义指令？

csdn--fuzuxian--自定义指令 (opens new window)

• 创建局部指令

<div id="app" class="demo">
  <input type="text" placeholder="我是局部自定义指令" v-focus2>
</div>
<script>
    new Vue({
        el: "#app",
        directives: {
            focus2: {  inserted: function(el){  el.focus();  }   }
        }
    })
</script>

• 创建全局指令

<div id="app" class="demo">
    <input type="text" placeholder="我是全局自定义指令" v-focus>
</div>
<script>
    Vue.directive("focus", { inserted: function(el){ el.focus();  }  })
    new Vue({ el: "#app" })
</script>

• 钩子函数

• • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
• • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
• • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• • unbind：只调用一次，指令与元素解绑时调用。

下拉懒加载指令v-lazy-loading

element-ui 自定义el-select的下拉懒加载指令v-lazy-loading

注册

import Vue from 'vue'
import _lazyLoading from './lazyLoading'

const lazyLoading = Vue.directive('lazyLoading', _lazyLoading)
export { lazyLoading }

v-lazy-loading 源码

export default {
  bind(el, binding) {
    const { value } = binding
    let elementClass = null
    let lazyFun = null
    if (typeof value ==  'object') {
      //elementClass元素的class,  lazyFun 调用的函数
      const { elementClass: _elementClass, lazyFun: _lazyFun } = value  
      elementClass = _elementClass
      lazyFun = _lazyFun
    } else if (typeof value == 'function'){
      lazyFun = value
    } else {
      console.err('传参错误')
      return
    }
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector(elementClass || '.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      let {clientHeight, scrollTop, scrollHeight} = this
      const CONDITION = Math.round(clientHeight + scrollTop) >= scrollHeight
      if (CONDITION) {
        debounce(lazyFun(),300)
      }
    })
  }
}
function debounce(fn,delay) {         //  防抖
  var timeout = null; // 创建一个标记用来存放定时器的返回值
  return  (e) => {
      clearTimeout(timeout);   
      // 然后又创建一个新的setTimeout, 这样就能保证interval间隔内如果时间持续触发，就不会执行 fn 函数
      timeout = setTimeout(() => {
          fn.apply(this, arguments);
      }, delay);
  };
}

搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop (opens new window)

• scrollTop 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置；
• scrollHeight 当前不可见部分的元素的高度，，(只读)
• clientHeight 可见部分的高度，，(只读)

scrollHeight>=clientHeight恒成立，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素

如果元素滚动到底, 下面等式返回true, 没有则返回false Math.round(clientHeight + scrollTop) >= scrollHeight

在el-select使用v-lazy-loading

<el-select class="condition" v-model="filterBoxData" 
  v-lazy-loading="lazyLoadingFun" :filter-method="podSearch"
><el-option
    v-for="item in selectLists" :key="item.id"
    :label="item.name"  :value="item.id"
  ></el-option>
</el-select>

lazyLoadingFun() {
  this.formData.pageIndex++;
  this.getList(this.formData);
},

案例四：缩放 v-resize

vue中监听元素的宽高变化(强大的自定义指令) (opens new window)

directives: {  // 使用局部注册指令的方式
  resize: { // 指令的名称
    bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
      let width = '', height = '';
      function isReize() {
        const style = document.defaultView.getComputedStyle(el);
        if (width !== style.width || height !== style.height) {
          binding.value();  // 关键
        }
        width = style.width;
        height = style.height;
      }
      el.__vueSetInterval__ = setInterval(isReize, 300);
    },
    unbind(el) {
      clearInterval(el.__vueSetInterval__);
    }
  }
}
//然后在html中
<div v-resize="resize"></div> // 绑定的resize是一个函数
//在methods中
resize() {  // 当宽高变化时就会执行
  //执行某些操作
}

const myChart = echarts.init(document.getElementById(id))
****
myChart.resize()

案例五：复制 v-copy

import { Message } from 'element-ui'
const _copy = {
  bind (el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        Message.warning('无复制内容')
        return
      }
      const textarea = document.createElement('textarea')
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      textarea.value = el.$value
      document.body.appendChild(textarea)
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        Message.success('已复制到剪切板')
      }
      document.body.removeChild(textarea)
    }
    el.addEventListener('click', el.handler)
  },
  // 当传进来的值更新的时候触发
  componentUpdated (el, { value }) {
    el.$value = value
  },
  // 指令与元素解绑的时候，移除事件绑定
  unbind (el) {
    el.removeEventListener('click', el.handler)
  }
}
export default _copy

案例六：拖拽 v-drag

Vue 指令实现拖拽功能 (opens new window)

clientX ：表示鼠标当前的 X 坐标 clientY ：表示鼠标当前的 Y 坐标 那么伪代码就是： disX = 鼠标按下时的 clientX - 鼠标松开时的 clientX disY = 鼠标按下时的 clientY - 鼠标松开时的 clientY

import { pauseEvent } from '@/utils/performanceOptimization'
export default {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    //dialogHeaderEl.style.cursor = 'move';
    dialogHeaderEl.style.cssText += ';cursor:move;'
    dragDom.style.cssText += ';top:0px;'
    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = (function () {
      if (window.document.currentStyle) {
        return (dom, attr) => dom.currentStyle[attr]
      }
      return (dom, attr) => getComputedStyle(dom, false)[attr]
    })()
    dialogHeaderEl.onmousedown = (e) => {
      e = e || window.event
      pauseEvent(e)
      // 禁止关闭弹框
      vnode.context.dragNotCloseDialog = false

      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - dialogHeaderEl.offsetLeft
      const disY = e.clientY - dialogHeaderEl.offsetTop

      const screenWidth = document.body.clientWidth // body当前宽度
      const screenHeight = document.documentElement.clientHeight // 可见区域高度(应为body高度，可某些环境下无法获取)

      const dragDomWidth = dragDom.offsetWidth // 对话框宽度
      const dragDomheight = dragDom.offsetHeight // 对话框高度

      const minDragDomLeft = dragDom.offsetLeft
      const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth

      const minDragDomTop = dragDom.offsetTop
      const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight

      // 获取到的值带px 正则匹配替换
      let styL = sty(dragDom, 'left')
      let styT = sty(dragDom, 'top')
      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (styL.includes('%')) {
        styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
      } else {
        styL = +styL.replace(/\px/g, '')
        styT = +styT.replace(/\px/g, '')
      }
      let left, top
      // 防抖-性能优化
      let timeout = null
      dialogHeaderEl.onmousemove = function mouseMove(e) {
        if (timeout) { clearTimeout(timeout)  }
        timeout = setTimeout(() => {
          e = e || window.event
          pauseEvent(e)
          // 计算移动的距离
          left = e.clientX - disX
          top = e.clientY - disY
          // 移动当前元素
          dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
        }, 1)
      }

      document.onmouseup = function (e) {
        clearTimeout(timeout)
        dialogHeaderEl.onmousemove = null
        // 边界处理
        if (-left > minDragDomLeft) { left = -minDragDomLeft } 
        else if (left > maxDragDomLeft) {  left = maxDragDomLeft }
        if (-top > minDragDomTop) { top = -minDragDomTop } 
        else if (top > maxDragDomTop) { top = maxDragDomTop  }
        // 移动当前元素
        dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
        // 可以关闭弹框
        setTimeout(() => {
          vnode.context.dragNotCloseDialog = true
        }, 100)
        document.onmouseup = null
      }
    }
  },
  // 卸载时，清除事件绑定
  unbind(el) {
    const header = el.children[0].children[0]
    header.onmousedown = null
  }
}

<el-dialog v-drag title="对话框" :visible.sync="dialogVisible"></el-dialog>