Vue自定義指令拖拽功能示例
更新時(shí)間：2017年02月17日 10:41:55 作者：閣下長(zhǎng)的好生俊俏
本文給大家分享vue自定義指令拖拽功能及自定義鍵盤信息，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下
下面給大家分享vue自定義指令拖拽功能代碼，具體代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>實(shí)例方法</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自定義指令拖拽功能及鍵盤信息，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vuex獲取state對(duì)象中值的所有方法小結(jié)(module中的state)
這篇文章主要介紹了vuex獲取state對(duì)象中值的所有方法小結(jié)(module中的state)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了從0搭建vue3組件庫(kù)Input組件,每個(gè)功能的實(shí)現(xiàn)代碼都做了精簡(jiǎn),方便大家快速定位到核心邏輯,接下來(lái)就開(kāi)始對(duì)這些功能進(jìn)行實(shí)例代碼講解，需要的朋友可以參考下2022-11-11
vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式簡(jiǎn)單總結(jié)
在做開(kāi)發(fā)中都會(huì)遇到的需求,每個(gè)用戶的權(quán)限是不一樣的,那他可以訪問(wèn)的頁(yè)面(路由)可以操作的菜單選項(xiàng)是不一樣的,如果由后端控制,我們前端需要去實(shí)現(xiàn)動(dòng)態(tài)路由,動(dòng)態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下2024-02-02
解決el-select數(shù)據(jù)量過(guò)大的3種方案
最近做完一個(gè)小的后臺(tái)管理系統(tǒng),快上線了,發(fā)現(xiàn)一個(gè)問(wèn)題,有2個(gè)select的選項(xiàng)框線上的數(shù)據(jù)量是1w+,而測(cè)試環(huán)境都是幾百的,所以導(dǎo)致頁(yè)面直接卡住了,本文給大家總結(jié)了3種方法,需要的朋友可以參考下2023-09-09
如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問(wèn)題
這篇文章主要介紹了如何解決ElementUI導(dǎo)航欄重復(fù)點(diǎn)菜單報(bào)錯(cuò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于Vue代碼分割懶加載的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
項(xiàng)目遷移vite引入圖片資源報(bào)require?is?not?defined問(wèn)題的解決辦法
這篇文章主要給大家介紹了關(guān)于項(xiàng)目遷移vite引入圖片資源報(bào)require?is?not?defined問(wèn)題的解決辦法,文中通過(guò)代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vite具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-01-01
vue3中各種類型文件進(jìn)行預(yù)覽功能實(shí)例
在vue移動(dòng)端項(xiàng)目中經(jīng)常遇到這樣的需求,對(duì)一些上傳的附件可以點(diǎn)擊之后在線預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類型文件進(jìn)行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2021-09-09
webpack4+Vue搭建自己的Vue-cli項(xiàng)目過(guò)程分享
這篇文章主要介紹了webpack4+Vue搭建自己的Vue-cli，對(duì)于vue-cli的強(qiáng)大,使用過(guò)的人都知道,極大的幫助我們降低了vue的入門門檻,感興趣的朋友跟隨腳本之家小編一起看看吧2018-08-08