- 博客(39)
- 收藏
- 关注
RSS订阅原创 将数字1，2，3转换成一、二、三
function transNum (num){ const arr = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'] if(num <= 10) return arr[num - 1] const ten = parseInt(num / 10 )- 1 const bit = parseInt(num % 10) - 1 return `${ten <= 0 ? '十' : `${arr[ten]}十`}${bit
2022-03-22 16:53:41
1280
原创 真机调试方法
chrome真机调试优点：简单、快捷、直观；缺点：受限于chrome浏览器，需要usb连接线真机、PC均下载好chrome浏览器，一根USB连接线；PC浏览器访问chrome://inspect/#devices地址，勾选"discovery usb device"。手机弹窗勾选允许USB调试；打开手机chrome浏览器，访问需要调试的界面；PC出现如下界面，点击“inspect”就可以调试了注意：inspect调试有时候会出现HTTP/1.1 404 Not Found错误，需要对PC
2022-01-25 16:45:33
1921
原创 基于axios的请求及响应拦截
对于一次网络请求简单的来讲可以分为两步：首先是客户端向服务端发起请求；然后服务端响应请求向客户端返回数据。在请求发送之前和数据返回之后我们可以做一个统一的拦截处理，减少代码冗余以及方便后期的维护，所以对axios请求进行封装是很有必要的。基础配置import axios, { AxiosInstance, AxiosPromise, AxiosRequestConfig } from "axios";import _config from "@/utils/config";interface A
2021-03-04 15:20:15
490
2
原创 基于Element的Table组件(Form组件)的二次封装
前景：做后台管理几乎每个页面都有Table和Form，不想每次去粘贴复制，所以尝试对Table进行二次封装，实现传入table配置项，直接渲染出对应的Table组件。核心：此次封装主要利用v-bind传入一个对象的所有 property，实现属性穿透，例如：const obj = {type: 'selection', width: '50' }<el-table-column v-bind="obj"> </el-table-column> //等价于<el-ta
2020-12-24 11:18:59
1228
原创 uni-app自定义模态弹窗(支持富文本)
uni-app中实现支持传入富文本的模态弹窗 this.$qxPop.show({ message: '这是自定义模态窗', title: '提示', }) this.$qxPop.show({ message: `<div style="color: #ff0000">这是自定义模态窗</div>`, title: '温馨提示', confirmButtonText: '我知道了',
2020-10-09 11:11:39
4568
5
原创 IOS中fixed定位兼容问题
【问题描述】页面局部存在滚动元素盒子（overflow:scroll/auto），模态弹窗被该盒子截断；【问题原因】position:fixed在苹果产品中并没有实现相对于浏览器窗口定位。其实现的功能是相对最近允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素；...
2020-10-09 10:13:05
736
原创 【正则表达式】对应字符替换
//SC-->对应数据，ST-->对应数据... ... //输入： <span>该码已被扫<span style="color:#E53333;">SC</span>次，奖品已于<span style="color:#E53333;">ST</span>被领取。 //输出： <span>该码已被扫&l...
2020-04-23 10:43:34
249
原创 【uniapp】swiper组件高度自适应问题
场景使用uniapp中的swiper组件进行轮播，发现swiper组件高度是在外层有个固定值，并没有去适配里面的雷蓉
2020-04-22 10:21:04
7671
2
原创 checkbox&radio无法选中
–场景原生input实现单选、复选功能，无法旋转，一开始就猜测可能是受某种样式影响，所以对样式引入的样式进行进一步测试，发现是由于引入了reset.css中的-webkit-appearance: none;这个样式影响。–说明-webkit-appearance: none; 去除系统默认appearance的样式,常用于IOS下移除原生样式–解决input[type="checkbo...
2020-04-01 18:04:10
1109
原创 实现build打包后可编辑的配置文件
场景项目打包测试完成后，运维可以通过直接修改配置文件部署项目。实现【1】借助插件 generate-asset-webpack-plugin，生成config.json文件，然后用网络请求的方式读取json 文件，替换相关配置（我觉得有点儿麻烦，所以使用第二种）【2】static目录下声明一个配置文件（config.js）/** * Config. * 若有新配置项，请先...
2020-03-23 15:42:35
703
2
原创 【uniapp】小程序中进行公众号授权
场景使用uni app开发微信小程序，但是需要与之前的公众号进行用户关联。考虑到用户的唯一性，后端采用“UnionID”作为唯一标识。【UnionID获取途径】调用接口 wx.getUserInfo，从解密数据中获取 UnionID。注意本接口需要用户授权，请开发者妥善处理用户拒绝授权后的情况。如果开发者帐号下存在同主体的公众号，并且该用户已经关注了该公众号。开发者可以直接通过 wx.l...
2020-03-16 11:59:33
3338
原创 vue-cli4 配置全局scss/sass变量
tips:项目使用scss之前吗，首先看看是否sass相应的包1、_variables.scss文件/* Variables */// Base color$black:#2c2f38;$green:#1ddfbc;$blue:#2ec4d5;$fontColor:#e7ecf0;2、执行vue add style-resources-loadervue add style-...
2019-12-04 09:51:35
7118
原创 CSS特效——图片扫描
最终效果：实现步骤第一步：绘制渐变网格背景及扫描横条 width: 200px; height: 240px; background: linear-gradient(#1a98ca, #1a98ca), linear-gradient(90deg, #ffffff33 1px,transparent 0,transparent 19px), linear-gradient...
2019-11-19 15:27:45
3999
2
原创 Select 选择器自定义筛选功能（支持简拼\全拼\汉字搜索）
引入formate.jsimport formate from "util/formate";formate.js:/** * Created by zhouli on 2019/8/1. */var formate = (function () { var Formate = function (ops) { this.initialize(ops); ...
2019-08-02 14:45:05
20137
原创 Vue项目运行内存溢出——JavaScript heap out of memory
问题描述：VUE项目首次npm run dev能正常运行，更改部分代码后保存运行抛出错误。解决方法：找到webpack-dev-server.cmd【node_modules.bin】配置，增加 –max_old_space_size=1024...
2019-07-18 16:33:41
6903
5
原创 vue-cli下的首屏加载性能优化
路由懒加载当我们构建应用时，js包会变得特别大，非常影响加载速度。如果我们能把不同路由对应的组件进行分隔，但路由被访问时在再加载对应的组件，这样会高效很多，具体实现方式：传统静态引用方式：import HelloWorld from '@/pages/HelloWorld'routes: [{path: '/', name: 'HelloWorld', component: HelloW...
2019-06-25 11:46:33
776
原创 前端性能优化之图片懒加载
1. 什么是图片懒加载？当访问一个网页的时候，优先显示可视区域内的图片而不是一次性加载所有的图片，但需要显示时再发送图片请求，避免网页打开时加载过多的资源。这样可以有利于前端性能优化，减轻服务器压力以及提升用户体验。2.使用场景当一个页面需要一次性载入很多图片时，就需要使用的图片的懒加载3.vue中使用vue-lazyload实现图片懒加载1.安装插件使用npm: npm insta...
2019-06-20 11:18:57
680
原创 vue组件通信
组件间的通信1. 父组件向子组件传值在父组件中以标签的形式引入子组件，通过prop向下传递数据:父组件向子组件传递数据：子组件接收父组件数据：Tips: 子组件props接收数据的三种方式1. props: [‘dataFromParent’]2. props: { dataFromParent: Array } //这样可以指定传入类型，如果类型不对，会抛出警告3. pro...
2019-06-19 15:43:31
128
原创 当前目录打开cmd命令窗口
新建txt文件，文件内容如下：Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\Directory\shell\runas]@="Open cmd here as Admin""HasLUAShield"=""[HKEY_CLASSES_ROOT\Directory\shell\runas\command]@="cmd.e...
2019-06-17 10:42:34
298
原创 nginx反向代理与负载均衡
1.反向代理与负载均衡反向代理：我们直接要从个人电脑访问到服务器集群的时候无法访问，需要通过第三方服务器，这个时候我们就可以通过反向代理去实现。负载均衡：我的项目部署在很多服务器上，客户通过同一域名进行访问，先访问一个中间服务器，中间服务器将访问请求引入压力一个比较小的服务器，保证服务器集群中的每个服务器压力趋于平衡，分担了服务器压力，避免了服务器崩溃的情况。简言之，就是将用户请求进行分发...
2019-06-14 16:51:48
217
原创 H5微信支付 IOS验签失败
问题描述：微信H5支付，都能唤起微信支付，安卓可正常支付，IOS则提示“验签失败”无法进行正常支付定位问题：对比官方示例唤起网址与项目网址发现前台获取到的url地址被转义， “&”被转义成了“&”官方实例唤起地址https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx141051038454546d...
2019-06-14 11:56:48
1068
原创 JavaScript异步编程
一、同步&异步同步——同步会逐行执行代码，会对后续代码造成阻塞，直至代码接收到预期的结果之后，才会继续向下执行。异步——如果在函数返回的时候，调用者还不能够得到预期结果，而是将来通过一定的手段得到结果（例如回调函数），这就是异步。二、JavaScript为什么要采用异步编程？JavaScript是一门单线程执行脚本语言，它的单线程体现在任何一个函数都需要从头到尾执行完毕后，才会执行...
2019-05-27 16:26:12
130
原创 Javascript 正则表达式
一、什么是正则表达式？正则表达式（Regular Expression）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。二、语法/正则表达式主体/修饰符(可选)eg: var regex = /test/i注: /test/i是一个正则表达式；test是正则表达式主体，用于检索；i是搜索不区分大小写的修饰符常用修饰符：修饰符描述...
2019-05-22 17:51:19
124
原创 echarts图表自适应屏幕大小
图表的自适应myChart.resize当浏览器窗口大小改变的时候将会触发onresize事件，监听这个事件进行resize的调用 window.onresize = this.refreshEchart refreshEchart() { /** 图表刷新 */ setTimeout(this.priceListChart.resize) s...
2019-05-13 18:07:50
732
原创 常用数据过滤 货币格式化 手机号中间隐藏四位数字
1、货币格式化/** * 货币格式化 * @param price * @returns {string} */export function formatPrice(price) { if (typeof price !== 'number') return price return String(Number(price).toFixed(2)).replace(/\B(?...
2019-05-13 11:57:19
277
原创 常用正则校验手机号校验
/** * 各种正则表达式 * mobile 手机号 * email 电子邮箱 * password 密码【6-20位】 * integer 正整数【不包含0】 * money 金钱 * TINumber 纳税识别号 * IDCard 身份证 * userName 账户名称【汉字、字母、数字、“-”、“_”的组合】 * URL URL * TE...
2019-05-10 15:39:13
1605
原创 vue中集成Ueditor富文本编辑器
从官网下载ueditor资源，解压放在static目录修改ueditor.config.js中的配置新建一个组件，放在components目录mian.vue<template> <div> <script :id="randomId" type="text/plain"></script> </div>&...
2019-04-11 16:56:31
869
原创 vue自定义toast组件
//toast.jsconst TOAST_CLASS = 'toast'const TOAST_OUT_CLASS = 'toast out'let innerHtml=""function toast(msg,time=1000) { let body=document.querySelector('#app'); if(body.querySelector('....
2019-03-04 16:13:27
449
原创 element-ui 以服务的方式自定义Loading加载效果
1）创建一个loading.js文件2）引入element-ui的loading组件import { Loading } from 'element-ui';3）自定义loading配置项const loadOption={fullscreen: true ,lock: true, text: 'Loading', spinner: 'el-icon-loading', backgrou...
2019-03-04 15:59:49
8573
原创 Vuex的基础使用
1、什么是Vuex?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。2、VueX的使用场景？vue组件开发过程中，经常会遇到组件间的状态传递。当需要进行通信的双方既不是父子关系，又不是兄弟关系时，或者同样的状态需要共享到多个组件使用，数据的传递就会变的特别麻烦，而使用Vuex这时候就会...
2019-03-01 16:38:52
134
原创 JS赋值操作，改变数据导致源数据被修改
【产生原因】：js语言中，Array、Object、Function、Date等有多个值构成的复杂类型传递的是内存地址。【解决方法】：1、object.assign()//假如有个数组arr或者对象objlet newArr = object.assign([ ], arr);let newObj = object.assign({ }, obj);2、JSONJSON.parse...
2019-02-25 17:49:55
1826
原创 带快捷键的批量操作（按下shift键批量改变复选框的值）
&lt;template&gt; &lt;ul class="checkbox-wrapper"&gt; &lt;li :class="{'false-msg': !item}" v-for="(item, i) in data" :key="i"&gt;
2019-02-25 17:25:27
1120
原创 echart组件复用
1、创建echarts组件，用于复用lineEcharts.vue<template> <div :id="id" style="height: 100%"></div></template><script> import echarts from 'echarts' export default {
2019-02-25 15:40:47
1424
3
原创 表格批量操作 将当前操作应用于下述
第一列选择机型配置信息后，将该选择应用于以下列 &amp;lt;el-table :data=&quot;turbineTableData&quot; max-height=&quot;500&quot; style=&quot;width:95%&quot; border size=&quot;mini&quot;&amp;gt;
2019-02-18 14:19:05
147
原创 el-cascader动态加载次级选项 (省市县)
&amp;lt;el-cascader v-model=&quot;projectInfo.position&quot; placeholder=&quot;请选择省市县&quot; style=&quot;width: 100%&quot; :options=&quot;provinceList&quot; @active-item-change=&
2019-02-18 10:30:12
11046
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人