vue3自定义指令(图片懒加载、一键复制、输入框聚焦)

我写的自定义指令是项目的任何位置都可以使用，将自定义指令写在main.js中。

在下图所显示的之前加入代码即可。

输入框聚焦(在main.js中输入)

// 自定义聚焦
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

v-focus 是自动聚焦所使用的自定义指令
v-copy是将输入框的值value传递给该指令

app.directive('copy', {
  beforeMount(el, binding) {
    console.log(binding,"bing");
    el.targetContent = binding.value;
    el.addEventListener('click', () => {
      if (!el.targetContent) return alert("没有复制的内容");
      // 创建textarea标签
      const textarea = document.createElement('textarea');
      // 设置相关属性
      textarea.readOnly = 'readonly';
      textarea.style.position = 'fixed';
      textarea.style.top = '-99999px';
      // 把目标内容赋值给它的value属性
      textarea.value = el.targetContent;
      // 插入到页面
      document.body.appendChild(textarea);
      // 调用onselect()方法
      textarea.select();
      // 把目标内容复制进剪贴板, 该API会返回一个Boolean
      const res = document.execCommand('Copy');
      res && console.log('复制成功，剪贴板内容：' + el.targetContent);
      // 移除textarea标签
      document.body.removeChild(textarea);
    })
  },
  updated(el, binding) {
    // 实时更新最新的目标内容
    el.targetContent = binding.value;
  },
  unmounted(el) {
    el.removeEventListener('click', () => {})
  }
})

图片懒加载，在要使用的图片中，加上v-imageLazy即可

app.directive("imageLazy", {

  mounted(el) {
    let imgSrc = el.src
    el.src = ""
    // console.log(el);
    // 观察者 不兼容ie
    const observer = new IntersectionObserver(([{isIntersecting}]) => {
      // let isIntersecting = isIntersecting
      if (isIntersecting) {
        // 加载图片
        el.src = imgSrc
        // 停止观察改元素
        observer.unobserve(el)
      }
      console.log("触发了", isIntersecting);
    })
    // 监视多个目标元素
    observer.observe(el)
  }
})