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

3.多语言切换、国际化组件 vue-i18n

npm install vue-i18n@next --save

在src目录下新建lang文件夹和index.js文件配置message变量

import { createI18n } from 'vue-i18n'

const messages = {
    en: {
        home: {
            header: '',
        },
    },
    cn: {
        home: {
            header: '',
        }
    }
}

// 配置项
const i18n = createI18n({
    legacy: false, // 是否使用组合式API
    locale: 'cn', // 默认语言环境
    fallbackLocale: 'en',  //备用语言环境
    messages
})

export default i18n

// 在main.js中use
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './lang/index'  

createApp(App)
    .use(i18n)
    .mount('#app')

// 模板文件中使用
<script setup>
import { useI18n } from "vue-i18n";  // 引用组件
const { t, locale } = useI18n();  // 解构调用函数

function setLang(laug) {
    locale.value = laug  // 设置语言模式
}
</script>
<template>
    <div @click="setLang('cn')">{{ t("home.title") }}</div>
    <div @click="setLang('en')">英文模式</div>
</template>

4.AutoAnimate 自动为DOM添加过渡动画的一个库

npm install @formkit/auto-animate

开源、免费、可商用

5.在线可编辑表格，类似excel的js绘制Canvas表格

5.1 Luckysheet
这个是最接近原生excel的在线电子表格，各方面功能都很完善
缺点是应用时出现了刷新整屏白屏的情况
3版本以后换别的版本

5.2 VTable
这个是字节出的一款在线电子表格，截止到2023.11.7，目前的版本是0.13，性能优越，但是目前还是展示为主，在线编辑等很多东西还在开发中

5.3 Antv S2
这个是Antdesign出的在线电子表格
API比较多，需要自己二次开发的配置比较齐全