<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          Vue自定義指令:通過Vue.directive實現集成第三方插件,拖拽功能,圖片加載等功能

          時間:?2017-12-25閱讀:?3845標簽:?拖拽

          什么時候需要Vue自定義指令?

          當我們需要對Dom元素進行底層操作的時候,這時候我們就需要使用vue的自定義指令。


          如何注冊自定義指令?

          1.全局注冊,需要注意的是全局注冊自定義指令需在實例化Vue之前:

          Vue.directive('指令名稱','指令對象');

          2.局部組件注冊

          export default{ 
               directives:{
                  '指令名稱':'指令配置'
               },
           }
          


          Vue的鉤子函數

          bind:只調用一次,指令第一次綁定到元素時調用。在這里可以進行一次性的初始化設置。

          inserted:被綁定元素插入父節點時調用 (僅保證父節點存在,但不一定已被插入文檔中)。

          update:所在組件的 VNode 更新時調用,但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變,也可能沒有。

          componentUpdated:指令所在組件的 VNode 及其子 VNode 全部更新后調用。 

          unbind:只調用一次,指令與元素解綁時調用。

          Vue.directive('drag',{
              bind:function(el,binding){ //第一次綁定到元素時調用,進行一次性的初始化設置
          
              },
              inserted:function(el,binding){ //當被綁定的元素插入到 DOM 中時
              
              },
             update:function(el,binding){ //組件的 VNode 更新時調用
              
              },
              componentUpdated:function(el,binding){ //指令所在組件的 VNode 及其子VNode全部更新后調用。
              
              },
              unbind:function(el,binding){//只調用一次,指令與元素解綁時調用。
              	
              }
          });


          vue鉤子函數參數

          el:指令所綁定的元素,可以用來直接操作 DOM 。 

          binding:一個對象,包含以下屬性:

          name:指令名,不包括 v- 前綴。 value:指令的綁定值,例如:v-my-directive="1 + 1" 中,綁定值為 2。 
          oldValue:指令綁定的前一個值,僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
           expression:字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中,表達式為 "1 + 1"。 arg:傳給指令的參數,可選。例如 v-my-directive:foo 中,參數為 "foo"。 
          modifiers:一個包含修飾符的對象。例如:v-my-directive.foo.bar 中,修飾符對象為 { foo: true, bar: true }。  
          vnode:Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
          oldVnode:上一個虛擬節點,僅在 update 和 componentUpdated 鉤子中可用。

          注意:除了el之外,其它參數都應該是只讀的,切勿進行修改。如果需要在鉤子之間共享數據,建議通過元素的 dataset 來進行。  


          vue自定義指令例子:

          1.實現拖拽功能

          html:

          <body>
          	<style>
          		.box{
          			width:100px; height:100px; background:red; position:absolute; left:0;top:0;
          		}
          	</style>
          	<div id="box">
          		<div v-drag class="box" v-text="name"></div>
          	</div>
          </body>

          js:

          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
          <script>
          	/* vue-自定義指令-拖拽 */
          	Vue.directive('drag',{
          		inserted:function(el) { //鉤子函數-//當被綁定的元素插入到 DOM 中時……
          			let elem = el; //el觸發的DOM元素
          			elem.onmousedown = function(e) {
          				let l = e.clientX - elem.offsetLeft;
          				let t = e.clientY - elem.offsetTop;
          				document.onmousemove = function(e) {
          					elem.style.left = e.clientX - l + 'px';
          					elem.style.top = e.clientY - t + 'px';
          				};
          				elem.onmouseup = function() {
          					document.onmousemove = null;
          					elem.onmouseup = null;
          				}
          			}
          		},
          	});
          	var vm = new Vue({
          		el: '#box',
          		data: {
          			name: 'drag'
          		}
          	});
          </script>


          2.實現圖片加載功能:

          圖片在加載過程中,未加載完成時,使用一個隨機的顏色占位,圖片加載完后直接顯示,可以使用自定義指令來完成 

          html:

          <body>
          	<style>
          		.imgdiv{
          			width:100px; height:100px;
          		}
          	</style>
          	<div id="box">
          		<div v-img="urlimg" class="imgdiv"></div> 
          	</div>
          </body>

          js:

          <script src="https://cdn.jsdelivr.net/npm/vue"></script>
          <script>
               Vue.directive('img',function(el,binding){//函數簡寫,在 bind 和 update時觸發相同行為,而不關心其它的鉤子。
          	  var color=Math.floor(Math.random()*1000000);//設置隨機顏色
          	  el.style.backgroundColor='#'+color;
          	  var img=new Image();
          	  img.src=binding.value;// -->binding.value指的是指令后的參數
          	  img.onload=function(){
          	    el.style.backgroundColor='';el.src=binding.value;      
          	  }
          	});
          	var vm = new Vue({
          		el: '#box',
          		data: {
          			urlimg: '/20171225/5a40612fcc533.jpg'
          		}
          	});
          </script>


          Vue自定義指令集成第三方插件 

          自定義指令的另一個好處是用于集成第三方js插件,這樣插件就可以直接拿來使用,而不需要改造或重構。這里已highlight.js為例,我們可以直接將其封裝為一個自定義指令,這樣highlight.js就變成了Vue的一個新功能。

          <script>
          	var hljs=require("highligh.js")
          	Vue.directive('highligh',function(el){
          			hljs.highlightBlock(el);
          		},
              });	
          </script>

          使用:

          <pre><code v-highligh></code></pre>





          吐血推薦

          1.站長廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入...

          2.休閑娛樂: 直播/交友    優惠券領取   網頁游戲   H5游戲

          鏈接: http://www.modern-decoration.com.cn/article/detial/278

          純 JS 實現放大縮小拖拽采坑之旅

          最近團隊需要做一個智能客服懸浮窗功能,需要支持拖動、放大縮小等功能,因為這個是全局插件,為了兼容性考慮全部使用原生 JS 實現,不引用任何第三方庫或者插件。開發過程中遇到的一些問題及解決方法

          實現一個美化原生拖拽的draggable-polyfill

          在HTML5還未普及之前,實現元素的拖拽還算是一件比較麻煩的事,大概思路就是監聽鼠標移動相關事件,下面是偽代碼;HTML5新增了拖放draggable標準,拖拽就變得簡單了

          vue元素拖拽、移動

          使用范圍:兩個元素位置交換,移動元素到指定位置,另外如需有需監聽元素的拖拽情況,可調用對應的函數即可。如果不允許拖動到該元素區域內,可在dragover、dragenter中設置dropEffect:none;禁止拖拽。

          JS 仿頭條App頻道編輯功能 (拖拽排序,添加,刪減)

          由于,項目中使用App混合開發,要實現頻道編輯功能;在沒找到合適的解決方案的情況下,自己寫了這個庫;已經在項目中跑了2年多,有不錯的可用性;寫下這篇文章分享下

          實現元素拖拽的兩種方式

          為將要拖拽的元素設置允許拖拽,并賦予dragstart事件將其id轉換成數據保存;為容器添加dragover屬性添加事件阻止瀏覽器默認事件,允許元素放置,并賦予drop事件進行元素的放置。

          Element ui表格組件+sortablejs實現行拖拽排序

          運營小姐姐說想要可以直接拖拽排序的功能,原來在序號六的廣告可能會因為金主爸爸加錢換到序號一的位置,拖拽操作就很方便;實現方式:template部分、script部分

          實現平滑過渡的拖拽排序

          最近重讀Vue官方文檔,在列表的排序過渡這一小節,文檔提到,<transition-group> 組件有一個特殊的地方,不僅可以實現進入和離開動畫,還可以改變定位,官網示例如下

          ngDraggable.js_AngularJS之拖拽排序

          ngDraggable.js是一款比較簡單實用的angularJS拖拽插件,借助于封裝好的一些自定義指令,能夠快速的進行一些拖拽應用開發。首先先介紹一些基本的概念;ng-drop:是否允許放入拖拽元素

          js實現本地圖片文件拖拽效果

          如何拖拽圖片到指定位置,具體方法如下,在從本地上傳圖片的時候,如果使用拖拽效果,想想應該是更加的高大上,下面直接上js代碼

          原生js實現拖拽功能

          如果要設置物體拖拽,必須使用三個事件,分別是:1、onmousedown:鼠標按下事件2、onmousemove:鼠標移動事件3、onmouseup:鼠標抬開事件

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网