Vue自定义组件component与自定义指令directive的应用

自定义组件

业务场景： 自定义一个全局的loading页面，在需要请求数据的地方呈现。

在项目中 创建一个common文件夹（放置全局的组件），创建loading.vue
(以element-ui为例)

<template>
  <div class="loading-page">
    	<i class="el-icon-loading"/>
  </div>
</template>

<script>
    export default {
        name: 'VueLoading',
        components: {},
        data() {
            return {
            }
        }
    }
</script>

// 样式省略

在main.js中引入，并注册全局组件

import Vue from 'vue'
import VueLoading from './loading'

// 注册全局组件 
// 第一个参数为使用名称， 第二个参数为组件
Vue.component('Vue-loading', VueLoading)

在需要使用的页面中直接使用

<template>
  <div class="page">
    	<Vue-loading  />
  </div>
</template>

自定义指令

官方例子：

// 注册
Vue.directive('my-directive', {
  bind: function () {},
  inserted: function () {},
  update: function () {},
  componentUpdated: function () {},
  unbind: function () {}
})

// 注册 (指令函数)
Vue.directive('my-directive', function () {
  // 这里将会被 `bind` 和 `update` 调用
})

根据官方的例子，我们制作一个简单的案例：
实现一个自定义的点击指令:
在项目中 创建一个util文件夹（放置工具文件），创建myClick.js

import Vue from 'vue'

Vue.directive('my-click',{
    bind:function(el, binding, vnode, oldVnode){
        el.addEventListener('click',function(){
            console.log(el, binding.value)
        })
    }
})

main.js中引入

import '@/utils/myClick'

使用 （方法前面加个 v- ）

	<template>
  <div class="home" >
   <div v-my-click="firstName">home</div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      firstName: 'home'
    }
  }
  }
  </script>

最后结果打印：

前段时间的一个需求，将element-ui中的弹出框可以实现拖拽，代码献上，直接拷贝就可以使用了

import Vue from 'vue'

/* vue 自定义指令: 使用方式直接组件标签上加上一个 v-dialogDrag, 即可 */
// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
  bind(el, binding, vnode, oldVnode) {
    const dialogHeaderEl = el.querySelector('.el-dialog__header')
    const dragDom = el.querySelector('.el-dialog')
    dialogHeaderEl.style.cursor = 'move'

    // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
    const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)

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

      // 获取到的值带px 正则匹配替换dia
      let styL, styT

      // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
      if (sty.left.includes('%')) {
        styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
        styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
      } else {
        styL = +sty.left.replace(/\px/g, '')
        styT = +sty.top.replace(/\px/g, '')
      }

      document.onmousemove = function(e) {
        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX
        const t = e.clientY - disY

        // 移动当前元素
        dragDom.style.left = `${l + styL}px`
        dragDom.style.top = `${t + styT}px`

        // 将此时的位置传出去
        // binding.value({x:e.pageX,y:e.pageY})
      }

      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})

main.js引入后，使用如下：

<el-dialog v-dialogDrag  :visible.sync="equitdialog"  append-to-body title="6666">

如对你有帮助，请不吝点赞，一起进步~~~