vue自定义指令

 
  
  
    <div id="app">
      <div class="box" v-drag>div>
    div>
    <script type="module">
      import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
      createApp({
        data() {
          return {};
        },
        directives: {
          // el 参数为自定义指令在页面调用时所对应的vnode生成的DOM元素
          drag(el) {
            el.style.position = "absolute";
            // 绑定鼠标左键按下的事件
            el.onmousedown = function (event) {
              if (event.left != 0) return;
              // 在按下的事件中再次绑定鼠标移动事件
              let ox = event.offsetX;
              let oy = event.offsetY;
              console.log(ox, oy);
              el.onmousemove = function (event) {
                let px = event.pageX;
                let py = event.pageY;
                console.log(px, py);
                el.style.top = py - oy + "px";
                el.style.left = px - ox + "px";
              };
            };
            // 绑定鼠标左键弹起的事件
            el.onmouseup = function () {
              // 在弹起时移除鼠标移动事件
              el.onmousemove = null;
            };
          },
        },
      }).mount("#app");
    script>

​
  
  
    <div id="app">
      <img v-preload=" img " style="object-fit: cover" />
    div>
    <script type="module">
      import { createApp } from "../assets/vue/3.0/vue.esm-browser.js";
      const app = createApp({
        data() {
          return {
            img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F1112%2F11251Q24100%2F1Q125124100-5.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665718104&t=91a061cac8657bf9b1bc3ead30017584",
          };
        },
      });
      app.directive("preload", function (el, binding) {
        if (binding.value == binding.oldValue) return;
        el.classList.add("preload");
        let imgDom = new Image();
        imgDom.src = binding.value;
        imgDom.onload = function () {
          // console.log("图片加载完成");
          el.src = binding.value;
          el.classList.remove("preload");
        };
      });
      app.mount("#app");
    script>
​