前端的一些功能实现总结（持续更新）

1、实现前端复制
2、前端生成UUID
3、前端input实现输入校验座机和手机号码
4、vue表单常用的正则验证[邮箱，手机号，密码，固话，微信号等]
5、el-select宽度设置
6、前端导出pdf

1、vue实现前端复制

亲测可用

<p class="inline-block">
  <span >{{fenxiao.appSecret}}</span>
  <span style="color: #0000FF;cursor: pointer" @click="copyAppSecret">复制</span>
</p>

copyAppSecret() {
      let createInput = document.createElement("input");
      createInput.value = this.fenxiao.appSecret;
      document.body.appendChild(createInput);
      createInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      createInput.style.display = "none";
      this.$message({ message: "复制成功", type: "success" });
    },

参考 ：https://www.cnblogs.com/myfirstboke/p/10469584.html
go

参考：https://www.jb51.net/article/138258.htm

2、前端生成UUID

JavaScript生成GUID的算法

3、input输入框限制（座机，手机号码）

座机

<input style="width:100px;" id="tel" type="text" onkeyup="value=value.replace(/[^\d\-\d]/g,'')"
	 maxlength=20></input>

手机

<input style="width: 100px;" id="mobile" type="text" onkeyup="value=value.replace(/[^\d]/g,'')" 
	maxlength=11></input>

参考
https://blog.csdn.net/mei_jian_xue/article/details/92797286

4、vue表单常用的正则验证[邮箱，手机号，密码，固话，微信号等]

冲

5、el-select宽度设置

在标签el-select中，添加style=“display:block;”
宽度将由上层div宽度决定，然后就可以自己来设置其宽度

原文：https://blog.csdn.net/milijiangjun/article/details/108172060

6、前端导出pdf

最近在做的工作要求在前端导出pdf,在网上找了很久，最终采用了jspdf技术，网上太多的博客千篇一律，我找到了两种方法。一种方法代码量少一些，另一种代码量多一些，下面再来展开说一下。

6.1、方法一

引自：https://blog.csdn.net/shenjuntao520/article/details/103957136

1、安装两个插件

npm i vue-to-pdf --save
npm i vue-easy-printer --save

2、在main.js/App.js中加入引用：

import vueToPdf from 'vue-to-pdf';
import VueEasyPrinter from 'vue-easy-printer';
Vue.use(vueToPdf);
Vue.use(VueEasyPrinter);

3、这两个插件都可以页面局部打印和导出，先在想操作的dom节点上加入id和ref：

 <div id="exportPdf" ref="exportPdf"></div>

4、函数调用

savePdf(){
       this.$PDFSave(this.$refs.exportPdf, "我的文件");
   },
   printPdf(){
       this.$easyPrint('exportPdf',"我的文件",'portrait');
   }

其中$easyPrint方法的第三个参数，还可以传landscape，代表页面横向展示，portrait为竖向展示

不过这里的打印方法我没有成功，因为工作只是涉及到了导出，也就暂时没有探索。

方法二：

网上方法大多是这样，这里我放一下链接，代码都是很详细的，大家可以看看

冲：https://blog.csdn.net/qq_43688916/article/details/103699495