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" />