关于vue.js:记录Vue中比较流行且好用的一些组件

1. 剪切板组件，复制文本：vue-clipboard3

npm install --save vue-clipboard3

import useClipboard from 'vue-clipboard3';
const {toClipboard} = useClipboard();
const copyPreviewPath = async (string) => {
      try {await toClipboard(string);
        message.success("文件门路复制胜利！");
      } catch (e) {console.error(e);
        
        message.error("复制失败！您的浏览器不反对复制性能");
      }
    };

<div class="icon" @click="copyPreviewPath(files.url)">
  <FolderOutlined/>
</div>

2. 图片视口懒加载组件：vue3-lazy

npm install vue3-lazy -S

// 图片懒加载
export const lazyPlugin = {install(app) {
    // 自定义指令：app.directive("img-lazy", {mounted(el, binding) {
        // el 指令绑定得那个元素 img
        //bindding: binding.value 指令等于号前面绑定得表达式得值 这里指图片 url 地址
 
        const {stop} = useIntersectionObserver(
          el,
          ([{isIntersecting}], observerElement) => {if (isIntersecting) {
              // 图片进入视觉入口了
              el.src = binding.value;
              stop();}
          }
        );
      },
    });
  },
};

import {lazyPlugin} from "@/utils/use-lazy-data.js";
 
<img v-img-lazy="baseUrl + item.url" alt="":key="item.url" />