欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js?自定義指令(拖拽、拖動(dòng)、移動(dòng))?指令?v-drag詳解

 更新時(shí)間:2023年01月23日 10:31:14   作者:丿Mr_Liu  
這篇文章主要介紹了vue.js?自定義指令(拖拽、拖動(dòng)、移動(dòng))?指令?v-drag,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1.main.js文件中添加已下代碼

Vue.directive('drag', {
  //1.指令綁定到元素上回立刻執(zhí)行bind函數(shù),只執(zhí)行一次
  //2.每個(gè)函數(shù)中第一個(gè)參數(shù)永遠(yuǎn)是el,表示綁定指令的元素,el參數(shù)是原生js對(duì)象
  //3.通過(guò)el.focus()是無(wú)法獲取焦點(diǎn)的,因?yàn)橹挥胁迦隓OM后才生效
  bind: function (el) { },
  //inserted表示一個(gè)元素,插入到DOM中會(huì)執(zhí)行inserted函數(shù),只觸發(fā)一次
  inserted: function (el) {
    let odiv = el; //獲取當(dāng)前元素
    let firstTime = '', lastTime = '';
    el.onmousedown = function (e) {
      var disx = e.pageX - el.offsetLeft;
      var disy = e.pageY - el.offsetTop;
      // 給當(dāng)前元素添加屬性,用于元素狀態(tài)的判斷
      odiv.setAttribute('ele-flag', false)
      odiv.setAttribute('draging-flag', true)
      firstTime = new Date().getTime();
      document.onmousemove = function (e) {
        el.style.left = e.pageX - disx + 'px';
        el.style.top = e.pageY - disy + 'px';
      }
      document.onmouseup = function (event) {
        document.onmousemove = document.onmouseup = null;
        lastTime = new Date().getTime();
        if ((lastTime - firstTime) > 200) {
          odiv.setAttribute('ele-flag', true)
          event.stopPropagation()
        }
        setTimeout(function () {
          odiv.setAttribute('draging-flag', false)
        }, 100)
      }
    }
  }
})

2.組件中的使用

<template>
	<div class="drag" v-drag @click="handleDragClick"> 我是拖拽的div<div>
<template>
<script>

methods:{
  handleDragClick(e){
  // 判斷拖拽組件的狀態(tài)
	let isDrag = false;
	try {
      isDrag = e.target.getAttribute('ele-flag') === 'true';
	}catch (e) {
		}
	if(isDrag){
		return;
     }
	 // 當(dāng)推拽組件未在 拖動(dòng)狀態(tài) 執(zhí)行點(diǎn)擊事件
	 // todo 下面是執(zhí)行點(diǎn)擊事件的代碼
   }
}
</script>
<style>
// 這里是拖拽 組件的樣式
.drag{
  width:100px;
  height:100px;
  border:1px solid pink;
}
</style>

補(bǔ)充:vue自定義拖拽指令v-drag

<template>
  <div class="drag" v-drag ref="drag"></div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
      positionX:'',
      positionY:''
    }
  },
  mounted () {
    this.$refs.drag.style.top = window.localStorage.getItem('top')+'px'
    this.$refs.drag.style.left = window.localStorage.getItem('left')+'px'
  },
  directives: {
    drag: {
      // 指令的定義
      bind: function (el,binding,vnode) {
        console.log(el);
        console.log(binding);
        console.log(vnode.context);
        let odiv = el;  //獲取當(dāng)前元素
        odiv.onmousedown = (e) => {
          //算出鼠標(biāo)相對(duì)元素的位置
          let disX = e.clientX - odiv.offsetLeft;
          let disY = e.clientY - odiv.offsetTop;
           
          document.onmousemove = (e)=>{
            //用鼠標(biāo)的位置減去鼠標(biāo)相對(duì)元素的位置,得到元素的位置
            let left = e.clientX - disX;  
            let top = e.clientY - disY;
            
            //綁定元素位置到positionX和positionY上面
            vnode.context.positionX = top;
            vnode.context.positionY = left;

            window.localStorage.setItem('top',top)
            window.localStorage.setItem('left',left)
         
            //移動(dòng)當(dāng)前元素
            odiv.style.left = left + 'px';
            odiv.style.top = top + 'px';
          };
          document.onmouseup = () => {
            document.onmousemove = null;
            document.onmouseup = null;
          };
        };
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.drag{
  position: relative;   /*定位*/
  // top: 10px;
  // left: 10px;
  width: 200px;
  height: 200px;
  background: #666;    /*設(shè)置一下背景*/
}
</style>

到此這篇關(guān)于vue.js 自定義指令(拖拽、拖動(dòng)、移動(dòng)) 指令 v-drag的文章就介紹到這了,更多相關(guān)vue.js 自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作

    解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作

    這篇文章主要介紹了解決vuex數(shù)據(jù)頁(yè)面刷新后初始化操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • Vue的MVVM實(shí)現(xiàn)方法

    Vue的MVVM實(shí)現(xiàn)方法

    本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-08-08
  • vue項(xiàng)目中使用AvueJs的詳細(xì)教程

    vue項(xiàng)目中使用AvueJs的詳細(xì)教程

    Avue.js是基于現(xiàn)有的element-ui庫(kù)進(jìn)行的二次封裝,簡(jiǎn)化一些繁瑣的操作,核心理念為數(shù)據(jù)驅(qū)動(dòng)視圖,主要的組件庫(kù)針對(duì)table表格和form表單場(chǎng)景,這篇文章給大家介紹了vue項(xiàng)目中使用AvueJs的相關(guān)知識(shí),感興趣的朋友跟隨小編一起看看吧
    2022-10-10
  • vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解

    vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解

    這篇文章主要介紹了vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2018-05-05
  • vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽(tīng)及后臺(tái)php數(shù)據(jù)交互實(shí)例

    vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽(tīng)及后臺(tái)php數(shù)據(jù)交互實(shí)例

    這篇文章主要介紹了vue.js過(guò)濾器+ajax實(shí)現(xiàn)事件監(jiān)聽(tīng)及后臺(tái)php數(shù)據(jù)交互,結(jié)合實(shí)例形式分析了vue.js前臺(tái)過(guò)濾器與ajax后臺(tái)數(shù)據(jù)交互相關(guān)操作技巧,需要的朋友可以參考下
    2018-05-05
  • VUE跨域問(wèn)題Access to XMLHttpRequest at

    VUE跨域問(wèn)題Access to XMLHttpRequest at

    今天發(fā)現(xiàn)一個(gè)錯(cuò)誤,VUE發(fā)送請(qǐng)求的時(shí)候不能請(qǐng)求到正確數(shù)據(jù),VUE跨域問(wèn)題Access to XMLHttpRequest at,本文就詳細(xì)的來(lái)介紹一下解決方法,感興趣的可以了解一下
    2022-05-05
  • vue3.0 項(xiàng)目搭建和使用流程

    vue3.0 項(xiàng)目搭建和使用流程

    這篇文章主要介紹了vue3.0 項(xiàng)目搭建和使用流程,幫助大家更好的理解和學(xué)習(xí)使用vue框架,感興趣的朋友可以了解下
    2021-03-03
  • 關(guān)于dev-tool安裝方法(手動(dòng)安裝版)

    關(guān)于dev-tool安裝方法(手動(dòng)安裝版)

    這篇文章主要介紹了關(guān)于dev-tool安裝方法(手動(dòng)安裝版),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • Vue中router-view無(wú)法顯示的解決辦法

    Vue中router-view無(wú)法顯示的解決辦法

    這篇文章主要給大家介紹了關(guān)于Vue中router-view無(wú)法顯示的解決辦法,router-view組件作為vue最核心的路由管理組件,在項(xiàng)目中作為路由管理經(jīng)常被使用到,需要的朋友可以參考下
    2023-07-07
  • Vue3中reactive響應(yīng)式失效的解決方案

    Vue3中reactive響應(yīng)式失效的解決方案

    這篇文章主要給大家分享Vue3中reactive響應(yīng)式失效的問(wèn)題的解決方法,文中有詳細(xì)的解決方案供大家參考,如果又遇到一樣問(wèn)題的同學(xué),可以借鑒閱讀本文
    2023-08-08

最新評(píng)論