Vue自定義指令拖拽功能示例
更新時間：2017年02月17日 10:41:55 作者：閣下長的好生俊俏
本文給大家分享vue自定義指令拖拽功能及自定義鍵盤信息，非常不錯，具有參考借鑒價值，需要的的朋友參考下
下面給大家分享vue自定義指令拖拽功能代碼，具體代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實例方法</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/vue1.0.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
//自定義指令
Vue.directive('drag',function(){
var oDiv = this.el;
oDiv.onmousedown = function(ev){
var disX = ev.clientX -oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var l = ev.clientX-disX;
var t = ev.clientY-disY;
oDiv.style.left = l+'px';
oDiv.style.top = t+'px';
};
document.onmouseup = function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{}
});
}
</script>
</head>
<body>
<div id="box">
<div v-drag :style="{width:'100px', height:'100px', background:'aqua', position:'absolute', right:0, top:0}">
</div>
</div>
</body>
</html>
下面看下Vue自定義鍵盤信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定義鍵盤信息</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/vue1.0.js"></script>
<script src="../js/vue-resource.js"></script>
<script>
Vue.directive('on').keyCodes.ctrl=17;
Vue.directive('on').keyCodes.myenter=13;
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{},
methods:{
show:function(){
alert(111);
}
}
});
}
</script>
</head>
<body>
<div id="box">
<input type="text" @keydown.ctrl="show">
<hr>
<input type="text" @keydown.myenter="show | debounce 2000">
</div>
</body>
</html>
以上所述是小編給大家介紹的Vue自定義指令拖拽功能及鍵盤信息，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vuex獲取state對象中值的所有方法小結(jié)(module中的state)
這篇文章主要介紹了vuex獲取state對象中值的所有方法小結(jié)(module中的state)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了從0搭建vue3組件庫Input組件,每個功能的實現(xiàn)代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進行實例代碼講解，需要的朋友可以參考下2022-11-11
vue3實現(xiàn)動態(tài)側(cè)邊菜單欄的幾種方式簡單總結(jié)
在做開發(fā)中都會遇到的需求,每個用戶的權(quán)限是不一樣的,那他可以訪問的頁面(路由)可以操作的菜單選項是不一樣的,如果由后端控制,我們前端需要去實現(xiàn)動態(tài)路由,動態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)動態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下2024-02-02
解決el-select數(shù)據(jù)量過大的3種方案
最近做完一個小的后臺管理系統(tǒng),快上線了,發(fā)現(xiàn)一個問題,有2個select的選項框線上的數(shù)據(jù)量是1w+,而測試環(huán)境都是幾百的,所以導(dǎo)致頁面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點菜單報錯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于Vue代碼分割懶加載的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法
這篇文章主要給大家介紹了關(guān)于項目遷移vite引入圖片資源報require?is?not?defined問題的解決辦法,文中通過代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
在vue移動端項目中經(jīng)常遇到這樣的需求,對一些上傳的附件可以點擊之后在線預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類型文件進行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2021-09-09
webpack4+Vue搭建自己的Vue-cli項目過程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對于vue-cli的強大,使用過的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08