这是从网上找到的一个案例,由于网上的案例有坑,所以我在这里从新上传一次!
首先在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里使用自定义指令了。、
希望对大家有帮助,谢谢