前言

后台管理框架 就是后台功能的一个大集合，减少开发时间，对于常见或不太常见的功能，提供出合适的实现方案。减少功能选型上的调研和二次开发的时间。而笔者正在开发一款后台管理框架名为：vite-naive-admin 还在持续开发中。

今天主要是说的功能点就是其中的：分享功能

其中分为拷贝功能 和 生成二维码功能

这里说一下笔者的开发环境是 Vue3，知道这个前提就可以接着下面了

拷贝功能

首先市面上主流的几种拷贝方式如下：

1. Clipboard 拷贝库实现 （基于原生JS通过类样式选择器找到DOM去获取值，这里因为我使用Vue3，所以不推荐）
2. navigator.clipboard JS新特性剪切板API 实现 (由于出来时间过早，无法实现大面积兼容，通常以H5和一些浏览器不支持问题，不支持上生产使用)
3. document.execCommand('Copy') 浏览器的命令功能，传入拷贝参数实现 (这个特性相较于navigator.clipboard特性，兼容性是要好上不少，但是多数浏览器已弃用这个特性，虽然可以使用，但是不推荐)
4. copy-to-clipboard 拷贝库实现 (这个并不会涉及到DOM操作，只需要调用暴露的函数传入需要拷贝的值即可，最为契合Vue3的响应式。也是最后实现的库！

代码如下：

import copy from 'copy-text-to-clipboard';
const copyUrl = () => {
  try{
    copy(urlValue.value);
    message.success("分享成功！");
  }catch (err){
    message.error('分享失败！');
  }
}

生成二维码功能

市面上主流实现的方法如下：

1. jquery.qrcode 生成库实现 (基于jquery.js为了一个小功能而引入jq，在打包体积上得不偿失，不推荐)
2. qrcodejs 库实现 （不兼容TS开发，使用原生JS实现适合原生实现生成二维码。这里我使用的是Vue3所以放弃使用）
3. qrcode.vue库实现 （这个库兼容Vue2和3，但是内部支持的功能仅限生成二维码，并不支持二维码中加入logo、以及背景图片更换等，故而放弃）
4. vue-qr 库实现 （这个库支持TS声明兼容，支持Vue3、gif背景图、二维码中logo，最后选择了这个库）

实现如下：

<n-popover trigger="hover" placement="bottom-start">
  <template #trigger>
    <n-button>生成二维码</n-button>
  </template>
  <vueQr :text="urlValue" :size="150" :margin="5" :logoSrc="logo" logoScale="0.4"></vueQr>
</n-popover>

import logo from '@/assets/logo.png'
import vueQr from "vue-qr/src/packages/vue-qr.vue";

结语

上述源码页传送门在这里

以上就是本期的全部内容了，如果对后台管理框架感兴趣的小伙伴，欢迎start一下vite-naive-admin ，笔者会持续更新，并分享内部选型的技术考量，希望能帮到更多人。