在企業微信側邊欄應用中，給`dialog`添加了拖拽功能，但是因為`dialog`高度超過了頁面高度，所以高度100%時拖拽有個bug--自動貼到窗口頂部而且企業側邊欄寬高都有限制，拖拽效果并不理想，所以就想縮小`dialog`再進行拖拽。

拖拽的指令是自定義的，原本想像綁定`class`一樣根據一個參數來動態綁定指令，發現沒有這種功能。后來看了文檔，可以給指令動態傳遞參數，根據傳遞的參數來判斷之后的行為。

自定義指令 — Vue.js

封裝的指令在組件中引用

dialogDrag是自定義的指令名稱

zoom是傳遞的參數

在`doalog`標題行添加放大縮小圖標，并添加事件，縮小時才添加拖拽功能，zoom初始值為false,

一個指令定義對象可以提供如下幾個鉤子函數 (均為可選)：

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

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

• update：所在組件的 VNode 更新時調用，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 。

我們可以在bind方法中判斷是否添加拖拽功能

• binding：一個對象，包含以下 property：
  • 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 }。

?在`update`鉤子函數中更新