weixin_43968658的博客

原创 前端如何单独做虚拟奖金池？

【代码】前端如何单独做虚拟奖金池？

原创 swiper/vue 获取 swiper实例方法

在Vue中获取swiper实例的方法

原创 Vue3引用PWA，vite-plugin-pwa的使用及注意要点

Vue3+vite引用Vite-plugin-pwa

原创 打开浏览器窗口，窗口已存在，跳转到已有窗口页签，不存在才新开页签窗口

需求内容：A页面打开B页面，当B页面之前打开过，直接跳转到B页面，而不是会新开一个页面。一般都是说用opener来解决，但是opener有个问题，就是当A页面打开B页面，A页面又打开C页面，B打开C页面用opener关联不上，还是会开新页面。花了一天时间，还是找不到完美的解决方案，只有一个阉割版的方案如下：每一个页面都需要name命名，将name列表存在localStorage里面，打开新页面的时候检测新页面name是否在name列表中，在的话用 window.open(‘javascript:;’,

原创 HBuilderX云打包后Android手机高德地图无法使用问题

公司H5包壳APP项目有需要使用高德地图，用HBuilderX真机调试安卓和苹果手机都能使用，但是云打包后，安卓手机却打不开地图。遇到问题，首先想看有没有什么报错，安卓手机可以在手机上下载谷歌浏览器，然后打开手机设置的开发者选项，手机USB连上电脑。电脑谷歌浏览器浏览 chrome://inspect/#devices，如下图特别需要注意的地方1、manifest.json 中的 debug: “true” 需要设置，否则看不到APP。2、点inspect查看调试，会出现404，这里需要翻墙

原创 前端常用小技巧大全（持续更新）

工作中需要用要一些不常用的小技巧，由于不常用，总记不住，所以在这里记录一下。1、input numer类型去掉后缀增加减少的框。input { &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } &::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } }...

原创 Vue父子孙组件数据传递 - $attrs与$listeners的使用

Vue-$attrs与$listeners的使用公司项目中有需要父组件传递数据到子孙组件，并不是只传到子组件，有可能有3、4层嵌套、甚至更多。用props无限传递明显工作量大很多，而且嵌套太多可能会弄错。此时想到用$attrs。同样的，子孙组件要触发父组件的事件也不能无限嵌套$emit来出发，此时就可以用到$listeners。vm.$attrs类型 { [key: string]: string }只读详细包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 s

原创 animation&keyframe在IOS下浏览器显示问题

今天新做一个页面需要用到@keyframe完成动画效果，在PC端和安卓手机上都可以实现，但是在苹果手机上初始化动画效果会有一些BUG。如下，一条线的高度从0到 1.19rem，但是打开页面第一次高度经过0.5秒并没有到1.19rem，就是显示了一点长度就停止了，过了0.5秒以后会继续执行其他的动画。切换组件隐藏再显示，这个时候动画效果又是正常的。.scen_processLine1 {...

原创 JS截断小数点，避免浮点类问题

网上搜到的常用的JS截断小数点方式遇到比较特殊的数字，会出现bug，主要是因为JS的浮点计算问题。常用的JS截断小数点方式如下：function pointNumber(number,length) { return Math.floor(number*Math.pow(10,length))/Math.pow(10,length)}但是这个 pointNumber(522.18...

转载 支付宝内部功能调用APP的said说明

##支付宝内部功能调用APP的said说明转自https://www.cnblogs.com/si812cn/p/8520335.html追加：支付宝收款码alipayqr://platformapi/startapp?saId=20000123微信扫一扫weixin://scanqrcode（跳转微信扫一扫）支付宝扫一扫alipayqr://platforma...

原创 压缩字体 gulp-font-spider

拿UI给的字体直接用，字体太大，直接影响网站首次加载速度。利用 gulp-font-spider提取用到的字体，去除没用到的字体，大大减少了加载字体文件的大小。如果Vue项目要用压缩字体，用fontmin 。官网http://font-spider.org按需压缩：从原字体中剔除没有用到的字符，可以将数 MB 大小的中文字体压缩成几十 KB 简单可靠：完全基于 HTML 与 CS...

原创 npm run build 后自动压缩dist文件成ZIP文件

项目每次npm run build 后都要将dist文件压缩成zip包，可用 filemanager-webpack-plugin 插件实现自动化压缩先安装插件npm install filemanager-webpack-plugin --save-devvue2.x 在 build/webpack.base.config.js 内找到 module.exports。 然后在plugins...

原创 el-table表单增加show-summary表尾合计，表格错位和高度计算错误

Element-UI的el-table表单增加show-summary表尾合计后，表单的正文会出现计算高度错误，不会减除合计行的高度，所以需要自定义下表单正文高度。tips#每次获取表单数据后执行//表单总高度let tableHeight = document.getElementsByClassName('el-table')[0].offsetHeight//表头高度let hea...

原创 APP不适配iphoneX，底部出现空白

用HubilderX打包，IphoneX 底部导航栏不会贴近底部（fixed bottom 0），会留有Home键的空白，按下面方法将留白设置成白色。manifest.json配置文件 ----> ‘代码视图’ ----> 'plus’下添加代码（添加安全区域）："safearea":{ "background":"#fff", "bottom":{ "offset":"a...

原创 H5用HBuilder打包APP注意事项

Vue用HBuilder打包成APP碰到满多坑，记录一下。1. 路由模式不能为History模式。2. 所有的图片地址都不能用觉得路径如"/img/xxx.png"，要改成相对路径如"./assets/img/xxx.png"3. 服务器配置如果用域名判断的，记得改成写死的配置，测试和正式的用不同配置。...

原创 gulp详细配置 gulpfile.js

项目上配置的gulp配置文件，省的以后重新配置。// gulpfile.jsconst gulp = require('gulp')const babel = require('gulp-babel')const sass = require('gulp-sass')const fileSystem = require('fs')const watch = require('gulp...

转载 原型链图

原创 如何使用防盗链图片？

头部加标签<meta name="referrer" content="never">，如果content="no-referrer"，在IE浏览器下还是使用不了防盗链图片，必须用'never'。

转载 解决CSS引用字体跨域问题

**本文转载自 https://www.cnblogs.com/victorlyw/articles/9970805.html解决方案就是将文字设置为 base64 编码字体转base64编码网址：https://transfonter.org/具体步骤如下：打开刚刚我们经过转换的解压出来的文件，找到stylesheet.css，复制 里面内容@font-face {font-fam...

原创 H5页面用HbuilderX打包成web APP后，跳转网络地址如何返回？

主入口先判断是不是APP打开的，vuex保存状态//判断是否是APP打开checkApp(){ if(window.plus){ this.plusReady(); }else{ document.addEventListener( "plusready", this.plusReady, false ); }},plusReady(){ this.$sto...

原创 Vue使用谷歌统计和百度统计

谷歌统计统计网站流量Index.html 页面插入//header中插入&lt;script&gt; (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Da...

原创 Vue分享出去的页面，按回退按钮回退到首页

Vue单页面分享出去的内容详情页，其中的 “上一步” 按钮通常是用路由this.$router.push(-1)，等价于浏览器的返回按钮。但是分享出去的页面按“上一步”就会变成空白页，业务需求是可以上一步跳转到首页或者想要的页面。思路就是进入分享内容页前，路由判断from的页面有没有路由，没有说明是首次进入，那么&quot;上一步&quot;就跳转到指定路由，否则上一步就是go(-1); data:(){ ...

原创 vue-quill-editor设置字体大小

项目中需要用到富文本编辑器，用的Vue，所以选择了vue-quill-editor这个富文本编辑器，发现字体只有几种大小可以选择，满足不了产品的需求，研究了半天终于改好了。主要是需要更改配置文件，以及对应的CSS和js文件。editor.vue 页面下改变 toolbarOptions的配置项（editor.vue就是封装的富文本编辑器）const toolbarOptions = [//...

原创 vue-quill-editor富文本编辑器插入图片

vue-quill-editor富文本编辑器插入图片主要就是增加了elment-ui的el-upload上传图片组件editor.vue 组件使用editor.vue的组件主要就是增加了elment-ui的el-upload上传图片组件editor.vue 组件&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;!-- 图片上传组件辅助--&amp;amp;