- 博客(39)
- 收藏
- 关注
RSS订阅原创 vue+element ui 前端分页，element Table组件的序号
vue+element ui 前端分页，element Table组件的序号
2022-08-04 09:35:02
488
原创 微信小程序启动报错 app.js错误: ReferenceError: App is not defined at app.js；渲染层错误
微信小程序启动报错 app.js错误: ReferenceError: App is not defined at app.js;渲染层错误
2022-06-27 20:06:58
8325
2
原创 预编译语言常见问题-持续更新
less背景图片地址使用变量background: url('@{imgPrefix}/icon/icon_jt_right2.png') no-repeat right center；
2022-05-20 15:32:44
142
原创 webapp页面自适应 rem单位换算
第一步首页在页面中添加adaptive.jsvar adaptive = {};(function (win, lib) { var doc = win.document; var docEl = doc.documentElement; // 设备像素比 var devicePixelRatio = win.devicePixelRatio; // 我们设置的布局视口与理想视口的像素比 var dpr = 1; // viewport缩放值
2021-05-19 14:36:29
220
原创 移动端兼容问题
移动端键盘弹起，背景图被压缩使用vant-filed 文字垂直居中问题ios input输入框验证码回自动回填输入框背景色变为黄色
2021-05-19 13:59:23
245
原创 修改页面中所有a标签的target属性
两种方式方法一：var items = document.getElementByTagName("a");for ( var i = 0 ,len = items.length;i < len;i++) { items.getAttributeNode("target").value = "_blank";}方法二：使用jquery<script type = "text/javascript"> $("a").attr("target", "_blank");
2021-04-08 11:58:11
1224
原创 Vant Picker组件问题，Picker设置选中值，清除Picker选中值
Picker设置选中值/恢复默认选项/清空选中值/切换问题描述代码解析参考文档问题描述需求是一个选择时间的选择器，需要加一个选择全部时间的操作。所以需要把清除掉上一次Picker选中的值。Vant的文档的实例方法都没有示例，着实是费了很大劲。目前逻辑是选择时间点击确定的话是按筛选时间去查询。点击全部时间按全部时间去查询，把picker恢复到默认状态。代码template的结构<van-popup v-model="showPicker" position="top" :lazy-rend
2021-03-30 16:38:27
8234
2
原创 静态html页面效果
这里写目录标题标签做锚点跳转的时候实现滑动效果返回顶部滑动效果文字滚动效果，电子屏效果标签做锚点跳转的时候实现滑动效果// 给a标签锚点加滑动效果$("a").click(function () { $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top - 60 + "px"}, 500); return false;//不要这句会有点卡顿})返回顶部滑动效果// 返回顶部 $('.back-co
2021-03-06 15:57:06
233
原创 引用静态资源时加上时间戳，处理浏览器缓存问题
引用静态资源时加上时间戳，处理浏览器缓存问题问题描述解决办法 添加时间戳作为版本号问题描述修改服务器上的静态js文件，浏览器没有重新请求解决办法 添加时间戳作为版本号利用PHP语言，在引用静态资源时加上时间戳1 <link rel="stylesheet" type="text/css" href="css/style.css?time=<?php echo date("Ymd",time())?>"/>...
2021-03-06 15:31:46
772
原创 移动端字体垂直居中
实现单行文本垂直居中，最长用得方法是设置行高为容器的高度。但是在移动端显示时发现并没有居中。解决方案：1.使用flex布局，垂直居中// 父容器display: flex;align-items: center;line-height: normal;使用table布局// 父容器css属性display: table;overflow:hidden;line-height: normal;// 子容器css属性vertical-align: middle;display:
2021-02-07 18:44:54
279
原创 css问题总结
flex问题：问题描述在移动端经常会用到flex布局。最近在开发的过程中遇到flex: 1;的元素中的内容过多会出现超出父元素的宽度，出现横向滚动条。这种情况只有在iOS上出现。解决方案给父级元素宽度100%，flex: 1的元素width: 0%;grid问题：提示：这里可以添加要学的内容例如：1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如：1、 周一至周五晚上 7 点—晚上9
2021-01-20 15:45:14
131
原创 iOS表单input自动填充后背景色变为黄色
ios表单Input自动填充背景色变为黄色问题描述解决方案问题描述在开发页面的时候发现，在iOS上input框自动填充后input的背景色变为黄色，再点击一下就可以恢复正常。解决方案设置自动填充时的背景色input::-webkit-autofill { transition: background-color 5000s ease-in-out 0s; -webkit-text-fill-color: #333333;//设置填充字体颜色}...
2021-01-18 16:07:14
1404
原创 css 单行文字居中 多行文字居左显示
项目中经常会有文字数量不固定的问题，所以在排版的时候需要注意，单行居中，多行居左是常见的排列方式。找到一篇文章介绍的很详细。可供学习参考。单行居中，多行居左
2020-11-24 17:02:43
418
原创 Element Dialog打开时内容被遮罩盖住
问题描述：图片预览使用Dialog实现，预览的时候发现图片被遮罩盖住了。如图：检查元素的时候发现遮罩的div层级比内容div要低，所以就比较奇怪。原因分析：内容嵌套太深，某个父级的层级比遮罩层低导致。解决方案：加append-to-body属性，把内容层也加到body中。官方解释：...
2020-10-29 16:24:07
778
原创 Element UI的Input框在按下回车键会刷新页面
原因W3C 标准中有如下规定：When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。Eleme
2020-10-24 14:50:50
914
1
原创 Element UI 树形控件设置默认选中节点并展开到那个节点，树形控件折叠所有节点，展开所有节点
树形控件设置默认节点需求：树形结构的数据会进行增加删除操作，所有需要更新树形结构的数据，更新之后需要还原之前的选中状态。关键点：两个属性值：current-node-key：表示当前选中的节点的唯一值default-expanded-keys：默认展开的节点的 key 的数组两个原型方法：setCurrentKey：通过 key 设置某个节点的当前选中状态getCurrentKey：获取当前被选中节点的 key<el-tree ref="tree" :data="treeData
2020-10-16 01:25:12
6840
原创 Vue项目播放音频视频html播放音频视频，音视频预览
要点 HTML5的 标签最近项目中使用到了音视频，页面需要增加试听试看的入口，是第一次接触这方面的，记录一下使用方法基础知识关于新标签的参数可参考MDNMDN audioMDN video视频html使用<video id="videoPlay" controls src="视频播放路径" width="660" autoplay> 您的浏览器暂不支持播放该视频，请升级至最新版浏览器。</video>获取video元素
2020-09-29 20:37:32
1503
原创 webstorm配置scss/less转wxss，小程序配置scss转wxss
webstorm配置scss/less转wxss小程序的.wxss文件写起来实在是有点费劲，所以找捷径。下面两篇博客步骤很清晰，可以按照步骤进行配置。小程序的.wxss文件写起来实在是有点费劲，所以找捷径。下面两篇博客步骤很清晰，可以按照步骤进行配置。链接一链接二...
2020-09-27 21:18:15
2009
原创 js 将数字用千分位表示
数字使用千分位表示第一种：toLocaleString()第二种：使用正则表达式替换在涉及到金额的情况下，一般来说，都需要用千分位的方式进行展示。更利于用户阅读。接下来介绍两种常用的方案。第一种：toLocaleString()toLocaleString() 方法返回这个数字在特定语言环境下的表示字符串。具体用法可查看MDN介绍第二种：使用正则表达式替换function format(number) { const num = String(number) const reg = /
2020-08-17 19:30:35
2656
原创 Eslint补充配置
Eslint补充配置Parsing error: x-invalid-end-tag"全局变量提示未定义在项目中使用默认的Eslint配置或者自定义规则。在开发过程中会遇到一些错误，所以需要补充一些配置Parsing error: x-invalid-end-tag"这个错误一般情况下和UI框架的组件标签有关，像iview的产品的原因是vue将标签渲染为原生html标签时，由于这些标签是自闭合的，所以有end标签会报错。解决方案：在.eslintrc.js 文件下的 rules 里增加一条规则
2020-08-14 19:34:27
196
原创 下载文件，导出文件的方式
后台管理系统中会有很多导出文件的地方，总结两种方式window.open()通过向dom中添加a标签window.open()这种方式简单，会打开一个新的新的标签页，并且加载指定资源，但当标签页关闭的时候会感觉页面抖动了一下。通过向dom中添加a标签不会打开标签页，但需要操作domfunction downloadFile(id) { const domA = document.createElement('a') domA.setAttribute('id', 'createId')
2020-08-10 19:55:35
481
1
原创 清除element UI Table 的排序状态
点击查询按钮时，表格的排序状态应该清除掉<el-table ref="table" :data="tableData" style="width: 100%"></el-table>使用Table组件提供的方法，但是只能把未排序状态改掉，代码中的排序字段和顺序还需手动修改。resetSort() { this.$refs.table.clearSort() this.sortFiled = 'applyTime' this.sortType =
2020-07-15 17:43:40
3545
原创 element ui Table组件 自定义序号 让element的Table有序号
使用Element UI的Table组件自定义序号在分页的情况下，Table的序号每页都是从1开始。在某些时候用户体验不是很好，所以需要自定义序号。<el-table-column label="序号" align="left" class-name="el-table-normalcol" width="80"> <template slot-scope="scope"> <div>{{ (currentPage - 1) *
2020-07-15 15:00:32
2174
原创 npm钩子 prebuild postbuild
npm钩子介绍npm是Nodejs的包管理，同Java中maven类似，干的活是一样的。npm提供了简单易操作的命令，其中的钩子可以关注一下。npm提供了两种钩子，pre和post，分别代表操作前和操作后。比如"prebuild""build""postbuild"-------------"preinstall""install""postinstall"当执行npm run build的时候，会按序执行npm run prebuild && npm run b
2020-07-10 19:27:01
2924
原创 提交代码时对文件进行校验，Eslint不通过则不能提交代码
提交代码时对文件进行校验为规范代码，在提交代码前对所有js文件进行校验，强制修改1、安装pre-commit插件的依赖npm i --save-dev pre-commit2、在package.json里进行配置 pre-commit{ "name": "vue-admin", "version": "1.2.0", "scripts": {}, "husky": { "hooks": { "pre-commit": "lint-staged" }
2020-07-10 19:18:37
2542
原创 js精度问题解决方案 - decimal.js
js精度问题解决方案 - decimal.js使用缘由decimal.js介绍decimal.js使用官方文档使用缘由js有精度问题, 对于一些金额的计算就总是与偶莫名其妙的问题decimal.js是使用的二进制来计算的, 所以能解决js的精度问题decimal.js介绍整数和浮点数 简单但功能齐全的API 复制许多JavaScriptNumber.prototype和Math对象的方法还处理十六进制，二进制和八进制值 比Java的BigDecimal的 JavaScrip
2020-05-19 19:11:13
6078
原创 初识normalize.css
了解normalize.css官方描述作用浏览器支持安装使用在别人的项目中看到有使用normalize.css，所以了解学习一下。简单来说就相当于你的reset文件，重置样式，但是不仅仅只是重置样式，还保证了再各个浏览器上的表现都是一致的。官方描述一种现代且支持HTML5的CSS重置替代品Normalize.css使浏览器更一致地渲染所有元素，并符合现代标准。它只针对需要规范化的样式。normalize.css作用与许多CSS重置不同，保留有用的默认值规范各种元素的样式更正错误和常见的
2020-05-14 11:03:36
275
2
原创 js获取字符串的字节数
最近项目中遇到需要控制用户输入的内容的字节长度，借鉴了网上的一些资料。js是使用Unicode编码的。而Unicode的实现有N种，其中用的最多的就是UTF-8和UTF-16。UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码，可以表示Unicode标准中的任何字符，且其编码中的第一个字节仍与ASCII相容，使用一至四个字节为每个字符编码。其编码规则如下：字符代码在000000 – 00007F之间的，用一个字节编码；
2020-05-13 20:59:43
783
原创 iview Element组件的@on-change方法保留默认参数，传递自定义参数
UI组件方法的传参方法一 箭头函数方法二 arguments方法三 调整参数位置方法一 箭头函数<Input v-model="value14" placeholder="Enter something..." clearable style="width: 200px" @on-change="(event) => {changeNumber(event, params)}"/&...
2020-03-31 21:27:16
3525
3
原创 比较两个复杂对象是否相等 亲测有效
经常会遇到要比较两个复杂的对象是否相等，在参考了网上各种方法之后，得出了结果通过递归的方式进行判断function deepEquals (x, y) { // 先判断传入的是否为对象 let f1 = x instanceof Object let f2 = y instanceof Object if (!f1 || !f2) { return x === y ...
2020-01-10 14:33:15
1013
转载 iPhoneX适配问题 iOS刘海屏 安全区域处理 IOS小黑条处理 IOS兼容处理
IphoneX适配问题 iOS刘海屏 安全区域处理前言适配前需要了解的几个关键字安全区域viewport-fitenv() 和 constant()适配的方法第一步 设置网页在可视区的布局方式，增加viewport-fit属性 *viewport-fit=cover*第二步 页面主体内容限制在安全区域内第三步 fixed元素的适配前言iPhoneX去掉了底部的按键，增加了小黑条，这就使得网页工...
2019-12-27 20:09:38
2284
原创 vue3.0 打包优化分析工具 webpack-bundle-analyzer 的配置
webpack-bundle-analyzer的配置第一步：安装插件npm install webpack-bundle-analyzer -D第二步：配置环境变量在 .env.dev 等文件中配置一个自定义的环境变量ANALYZ_PORT=false第三步：在vue.config.js中进行配置chainWebpack: config => { if (proces...
2019-11-28 18:43:22
1478
1
原创 Vue 展示的文本换行 静态文本按格式显示 textarea文本的换行 亲测有效
需求一个商品管理系统，需要新增一个商品的信息，有一个备注字段，需要做成textarea，在textarea中用户是可以进行换行的。在新增完商品之后在查看详情时，备注字段的显示需要和textarea中的格式一致。解决方案1.将字符串的’/n’替换成 使用v-html绑定<template> <h>备注</h> <div v-html="remar...
2019-11-01 18:20:50
7938
1
原创 慎用正则全局匹配 g，循环时正则匹配的坑！正则的lastIndex属性
循环时进行正则校验今天在使用正则进行校验的时候遇见了一个很是神奇的问题！经过一段实验感觉更是惊奇，于是在网上寻求帮助之后才发现了原因所在！let reg = /\.jpg/g;let arr = [ 'pic1.jpg', 'pic2.jpg', 'pic3.jpg', 'pic4.jpg', 'pic5.jpg',];arr.forEach( i...
2019-10-18 14:34:39
718
2
原创 npm ERR! Refusing to install package with name “xxxxx“ under a package
npm安装依赖报错错误信息意思为：决绝在当前包下安装"webpack-cli"的依赖包，这个依赖包是否与你得项目名称一样？解决方案*检查你的项目的name是否与依赖包同名package.json 中 name 属性 为项目名若相同，修改即可*第一张图片为之前的，与依赖包重名，第二章图片为修改之后的，修改之后就可以正常安装！...
2019-10-10 11:40:01
642
原创 React+socket.io 长连接实现聊天室
使用socket.io长连接实现简单版聊天室实现功能：1、可以显示当前上线人数2、发送消息3、提示用户上线离线使用技术前端框架：react后端：node express所需的插件 服务器端 socket.io将http服务和sockit服务合并 客户端 socket.io-clientgit地址https://github.com/Helen1314/chatRoom欢迎评...
2019-09-22 15:33:59
2864
3
原创 vue-cli3的项目 CDN链接报错解决 Uncaught TypeError: Cannot read property 'prototype' of undefined at Object.
Uncaught ReferenceError: iview is not defined出现这个问题的原因是路径的问题 确保你的路径是正确的，或者是既全局引入了iview，又按需引入，会造成这样的报错Uncaught TypeError: Cannot read property ‘prototype’ of undefined at Object. (iview.min.js:1)CDN...
2019-09-17 21:01:41
10981
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人