- 博客(30)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 VUE移动端适配
使用插件——postcss-px-to-viewport能够高效的将代码中px单位转为rm、rem、vw等视口单位，简单配置就可以在页面直接使用px单位，项目编译后自动转换为对应的vw或vh属性。1.安装插件npm install postcss-px-to-viewport --save-dev2.在根目录下添加配置文件3.配置文件内容module.exports = { plugins: { 'postcss-px-to-viewport'
2022-04-28 11:11:59
999
原创 vue封装全局过滤器
1.创建一个filters.js文件，并在文件中定义过滤器函数//性别过滤器function sex (value) { if (value == 0) { return "男" } else if (value == 1) { return "女" } else if (value == 2) { return "保密" }}//导出export { sex };2.在main.js中引入并使用//全局过滤器i
2022-02-21 16:03:30
598
原创 vue中区分刷新与关闭浏览器
data(){ return{ _beforeUnload_time:'', _gap_time:'' }},mounted(){ //页面监听页面刷新和关闭 window.addEventListener('beforeunload', e => this.beforeunloadFn(e)) window.addEventListener('unload', e => this.unloadHandler(e)).
2022-02-18 14:41:01
837
原创 js拖拽一个元素到另一个元素并获取该元素属性
项目使用VUE框架，直接上代码html部分：<!-- 这里为需要拖动的元素 --><div class="card"><img @dragstart="start($event)" :src="dianzu" data-id="dianzu" data-name="电阻" alt=""><p>电阻</p></div><div class="card"><img @dragstart="start($eve
2021-09-30 15:08:42
1569
原创 css设置4个角线
给元素的4个角做角线效果如下：html代码：<div class="list corner"> <div class="title"><span>实验内容</span></div> <ul> <li>实物图片</li> <li>实验介绍</li> <li>实验原理</li>
2021-07-15 08:55:17
548
原创 前端将文件上传到OSS
前言：每个OSS的用户都会用到上传服务。Web端常见的上传方法是用户在浏览器或App端上传文件到应用服务器，应用服务器再把文件上传到OSS。具体流程如下图所示：和数据直传到OSS相比，以上方法有三个缺点：上传慢：用户数据需先上传到应用服务器，之后再上传到OSS。网络传输时间比直传到OSS多一倍。如果用户数据不通过应用服务器中转，而是直传到OSS，速度将大大提升。而且OSS采用BGP带宽，能保证各地各运营商之间的传输速度。扩展性差：如果后续用户多了，应用服务器会成为瓶颈。费用高：需要准备多台应用
2021-05-07 18:29:51
5186
原创 VUE项目中如何在外部js文件中调用vue中的函数
废话不多说，直接上代码：vue文件中mounted(){ //在mounted中把函数放在全局 window.showZldy=this.showZldy;},methods:{ showZldy(value){ console.log('函数调用') },}外部js文件window.showZldy() //直接调用...
2021-04-30 11:35:09
1664
原创 mousewheel在火狐浏览器不兼容的问题
mousewheel在火狐上是不生效的，火狐鼠标滚轮事件是DOMMouseScroll，所以为了兼容问题需要两者都写另外：谷歌是e.wheelDelta值是120和-120；火狐上是e.detail值是-10和10html部分<img class="zldyxn ch1cv" ref='CH1CV' :src="zldyxn">js部分mounted(){ this.$refs.CH1CV.addEventListener("mousewheel", th.
2021-04-30 11:29:18
1223
原创 js截屏
要实现截屏，有个不错的插件Html2canvas可以使用：html2canvas库的工作原理并不是真正的“截图”，而是读取网页上的目标DOM节点的信息来绘制canvas;项目是VUE开发的，由于页面中还使用了SVG还有canvas，所以要实现截图功能有点复杂，在SVG转换canvas时使用了canvg插件代码：window.scrollTo(0,0);//将svg元素置换为canvasvar svgElem = $('#modian').find('svg');svgElem.each(.
2021-04-05 10:29:03
348
2
原创 vue项目中使用TinyMCE富文本编辑器在线表格
项目中需要用到在线填写表格的功能，我选择使用了TinyMCE，TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器，这里做了一个小demo，页面如下：第1步：引入TinyMCE脚本首先我们需要下载一份源文件放在本地，点这里下载，下载社区版即可，下载好之后放入public的static文件目录下，并在html文件中引入：<script type="text/javascript" src="/static/tinymce/tinymce.min.js"></script&g
2021-04-01 15:32:33
2472
1
转载 在VUE中使用RSA加密解密加签解签
在VUE中使用RSA加密解密加签解签项目中部分隐私参数要前后端对接交互时，出于安全性考虑，我们会对重要的参数进行加密后再进行传输，一般采用的加密方式是非对称性加密RSA算法。1.什么是RSA加密？RSA加密是一种非对称加密。 可以在不直接传递密钥的情况下，完成解密。 这能够确保信息的安全性，避免了直接传递密钥所造成的被破解的风险。 RSA是由一对密钥来进行加解密的过程，分别称为公钥和私钥。 两者之间有数学相关，该加密算法的原理就是对一极大整数做因数分解的困难性来保证安全性。 通常个人保存私钥，公钥
2021-03-26 17:06:58
380
原创 使用Element上传文件
使用Element上传文件功能比较简单，只是使用按钮上传文件并提示文件类型是否正确<el-upload class="upload-demo" ref="upload" :multiple="false" :show-file-list="false" action="void" :http-requ
2021-03-26 16:52:34
1632
1
原创 css引入外部字体
废话不多说，直接上代码在CSS中引入字体文件并给字体定义一个名称@font-face { font-family: 'PingFang SC'; src: url('PingFang Regular.eot'); src: url('PingFang Regular.ttf') format('truetype'), url('PingFang Regular.eot?#iefix') format('embedded-opentype'), url
2021-03-26 15:57:44
123
原创 CSS文字分散两端对齐
CSS文字分散两端对齐样式：代码：width:100px; text-align-last:justify;text-align:justify;text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
2021-03-22 17:29:52
675
原创 uniapp中上传图片并转base64
uniapp中上传图片并转base64直接上代码<script> export default{ methods: { //从相册选择 album(){ uni.chooseImage({ count: 1, //默认9 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType: ['album'], //从相册选择
2021-01-21 16:46:38
575
5
原创 vue中设置请求拦截器和响应拦截器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-12-29 17:21:58
1246
原创 vue项目进入页面之前判断用户是否登录
vue项目进入页面之前判断是否登录在项目中，有些页面是用户必须登录过之后才可以打开的，或者防止用户通过地址直接进入，那么就需要做一些设置：- 在路由配置router.js中配置：{ path: '/usercenter', name: 'UserCenter', component: () => import('../views/userCenter/UserCenter.vue'), meta: { requireAuth:true, },}
2020-12-29 17:10:00
3396
原创 css文本两端对齐
css文本两端对齐项目中通常需要用到文本两端对齐的这种样式，如下：html代码如下 <table> <tr> <td class="title">用 户 名</td> <td>{{user_info.username}}</td> </tr> <tr> <td class="title">真 实 姓 名</td>
2020-12-23 15:08:26
303
3
原创 css控制文字显示省略号
样式css代码如下overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; //可控制显示几行-webkit-box-orient: vertical;
2020-12-21 15:35:15
169
原创 VUE项目中添加cnzz统计访问量
vue项目中添加cnzz统计访问量1.创建一个js文件，内容如下：var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1279539509'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D12
2020-12-18 14:30:37
1029
转载 VUE项目RSA加密
目录前言一、什么是RSA加密？二、加密过程三、在Vue中使用步骤使用步骤：1、安装依赖2、在main.js中引入3、将加密解密方法封装到通用的js内运行结果前言项目中部分隐私参数要前后端对接交互时，出于安全性考虑，我们会对重要的参数进行加密后再进行传输，一般采用的加密方式是非对称性加密RSA算法。提示：以下是本篇文章正文内容，下面案例可供参考一、什么是RSA加密？RSA加密是一种非对称加密。可以在不直接传递密钥的情况下，完成解密。这能够确保信息的安全性，避免了直接传递密钥所造成的被破.
2020-12-16 17:02:48
2746
1
原创 vue 打包后在F12 sources中 隐藏源码
vue 打包后在F12 sources中 隐藏源码正常情况下，vue项目npm run build打包之后，在控制台的sources中的webpack下是可以看到我们源码的这就暴露了我们的源码，所以需要进行一些配置：如果项目下有vue.config.js文件，只需要配置以下module.exports = { productionSourceMap: false}如果没有的话，自己创建一个vue.config.js即可...
2020-12-15 09:56:33
3315
5
转载 Vue中使用WebSocket
Vue中使用WebSocket关于WebSocketWebSocket是一种在单个TCP连接上进行全双工通信的协议。使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。区别于HTTP协议，HTTP协议只能实现客户端请求，服务端响应的这种单项通信。Vue中使用WebSocket:<template> <div>
2020-12-03 17:42:10
824
原创 vue项目 支付宝 支付
vue项目 支付宝 支付关于支付宝支付，调后端接口之后会返回一个form表单，我们只需要将这个form表单用JS动态创建至页面中调用即可；后端返回的数据：<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.page.pay&sign=E6bPCDpuDO392x%2BTXH7NrCPc
2020-12-03 17:08:41
2841
1
转载 vue-cli脚手架中微信支付二维码的生成 vue-qriously
vue-cli脚手架中微信支付二维码的生成 vue-qriouslyvue-qriously 介绍插件源码地址：https://github.com/theomessin/vue-qriously代码案例安装npm install vue-qriously --save-devmain.js 配置import Vue from 'vue'import VueQriously from 'vue-qriously'Vue.use(VueQriously)vue文件中
2020-12-03 15:21:56
436
Ping Fang.zip
2021-03-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人