Vue.directive基礎，在Vue模塊開發中使用

這是從網上找到的一個案例，因爲網上的案例有坑，因此我在這裏重新上傳一次！

首先在main.js裏引入兩個自定義指令

import {focus, drag} from './components/darg.js'

　　而後建立一個darg.js

import Vue from 'vue'
const focus = Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
    el.setAttribute('placeholder', 'test')
  }
})
const drag = Vue.directive('drag',{
  inserted: function(el) { //inserted 鉤子函數:當元素被插入父元素時觸發,可省略
    let oDiv = el; //el --> 觸發的DOM元素
　　 oDiv.style.position='relative';
    oDiv.onmousedown = function(e) {
      let l = e.clientX - oDiv.offsetLeft;
      let t = e.clientY - oDiv.offsetTop;
      document.onmousemove = function(e) {
        oDiv.style.left = e.clientX - l + 'px';
        oDiv.style.top = e.clientY - t + 'px';
      };
      oDiv.onmouseup = function() {
        document.onmousemove = null;
        oDiv.onmouseup = null;
      }
    }
  }
  })

export { focus, drag}

　　這裏面有兩個自定義指令一個是自動input自動對焦，一個是div的拖拽，紅色是我遇到的坑，網上代碼沒有{}因此我這裏標出來。

最後隨意建立一個.vue的文件，這裏我就建立一個Hello.vue 

<template>
  <div>
	<div class="ddd" v-drag>我能夠拖拽</div>
	<input type="text" v-focus />
  </div>
</template>
<script>
</script>
<style>
</style>

　　最後糾正下，其實順序是先寫darg.js,再引入到main.js以後就能夠再Hello.vue裏使用自定義指令了。、

但願對你們有幫助，謝謝