> For the complete documentation index, see [llms.txt](https://shenjunhong.gitbook.io/blog/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shenjunhong.gitbook.io/blog/yuan-ma/vue/vue2/zi-ji-ding-yi-de-zhi-ling.md).

# vue之自定义指令

作用： 让最后一个元素绝对定位并尾随倒数第二个元素

```js
Vue.directive('absolute-after', {
  /**
   * @param {Node} el
   */
  inserted(el) {
    if (el.parentNode.childNodes.length >= 2 && el.parentNode.lastChild === el) {
      const pHeight = $(el).prev('*')
        .height();
      const pWidth = $(el).prev('*')
        .width();
      const cHeight = $(el).height();
      $(el).css({
        position: 'absolute',
        left: pWidth,
        top: (pHeight - cHeight) / 2,
      });
    }
  },
});
```

作用： v-dialogdragwidth： 弹窗宽度拖大 拖小

```js
// v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
  bind(el, binding, vnode, oldVnode) {
    const dragDom = binding.value.$el.querySelector('.el-dialog');

    el.onmousedown = (e) => {
      // 鼠标按下，计算当前元素距离可视区的距离
      const disX = e.clientX - el.offsetLeft;

      document.onmousemove = function (e) {
        e.preventDefault(); // 移动时禁用默认事件

        // 通过事件委托，计算移动的距离
        const l = e.clientX - disX;
        dragDom.style.width = `${l}px`;
      };

      document.onmouseup = function (e) {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
  },
});
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shenjunhong.gitbook.io/blog/yuan-ma/vue/vue2/zi-ji-ding-yi-de-zhi-ling.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.