- 博客(59)
- 收藏
- 关注
RSS订阅原创 在预览图片时触发了onload、onshow
由于在预览图片时，onshow、onhide都会接连触发，我一开始在onhide设置了figh为false，导致没有达到预期效果。后来想了想，是否可以用时间差来判断，如果onshow、onhide触发时间间隔太小，则判断为图片预览。结果在预览列表中的图片的过程中，发现关闭预览图片时触发了onshow，导致了页面数据刷新了。在预览图片时，previewImage前（或者使用的第三方组件，就在组件的外层盒子增加方法）设置变量为true，此时关闭预览，在onshow中判断变量，如果为true，则不更新数据。
2024-08-20 11:21:35
183
原创 如何防止用户通过打印功能复制页面文字
在这个例子中，其实JavaScript并不需要做什么特别的事情，因为CSS的@media print已经足够控制打印时的样式了。由于CSS的@media print规则已经将内容隐藏了，所以打印出来的页面将是空白的。简单防白嫖，要让打印出来的页面是空白，通常的做法是在打印时隐藏页面上的所有内容。在JavaScript中，你通常不会直接控制打印的内容（因为那是CSS和HTML的工作），但你可以通过修改DOM元素的样式来影响打印效果。
2024-07-25 17:16:00
166
原创 element ui 上传组件实现手动上传
如果不想要马上上传的话，只需要增加:auto-upload=‘false’，然后在需要上传时，调用实例的submit方法即可执行httpRequest方法。如果需要做表单校验，则httpRequest只是为了获取到文件，首先不要设置auto-upload，选择文件后马上就调用httpRequest方法，在httpRequest方法中获取到文件并储存，方便后面做表单校验。但是如果是在表单中上传文件，且是直接和其他表单项数据一起上传的话，则需要手动进行上传。
2023-11-24 15:24:07
1214
原创 vue2.x 二次封装element ui 中的el-dialog
这次试试新的写法，由于props是单向数据流，所以这里选择使用computed，在父组件改变值的时候，对应的dialog就会相应的改变状态。剩下的就是在dialog关闭的时候，需要通知父组件状态的变化。之前有尝试过使用watch去监听props的值，是可以做到想到的效果，但是代码稍微有一些冗余。在做后台管理系统的时候，dialog组件是我们使用频率比较高的组件，但是有一些需求现有的组件是不满足的。组件本身的属性我们保留，只需要根据需求添加，然后在使用的时候props去拿取使用就可以了。
2023-10-31 10:02:29
917
原创 Vue项目下页面自适应pc端不同分辨率自适应
1、lib-flexible插件，引入 lib-flexible插件，使 用lib-flexible 会根据设备的尺寸动态计算出HTML标签的 font-size 值,从而使得 rem 的计算能够自适应的进行调整。2、postcss-px2rem、px2rem-loader插件，作用为把px转变为rem。首先在main.js中引用：（可以使用npm下载，也可以直接下载文件，我这边是下载的文件）为了方便我们的快速应用，直接使用插件。别忘了在vue.config.js文件中的chainWebpack中配置。
2023-10-24 17:42:51
1608
原创 element ui 表格组件懒加载，编辑、删除后更新数据
为了保证页面流畅性，菜单表格使用了懒加载，但是在对菜单进行添加、编辑和删除等操作的时候，发现数据没有更新。这时候，需要手动去进行触发。思路很简单，在每一次懒加载获取子节点时，将对应的tree、node数据进行保存。在对数据进行操作之后，则手动调用获取子字节的方法来达到刷新数据的效果。注：修改和删除时，需要用父级id来刷新数据，因此存储当前数据行的父级id为pid；当添加的时候，需要用当前数据行id来刷新数据，因此存储当前数据行的id为pid；当点击添加、修改、删除按钮时，需要更新一下pid，保证目标节点。
2023-09-20 17:16:25
1227
2
原创 el-input获取输入框光标位置
那么这时候就需要去获取输入框的光标内容，由于在点击其他按钮时，输入框会自动触发失焦事件。今天接到需求，输入框在正常输入的同时，可以通过点击其他按钮在输入框光标位置添加内容。blurIndex 就是在输入框中的光标位置！然后在方法中传递一个参数，即可获取到数据源。因此在blur的时候去触发方法即可。
2023-07-05 15:22:50
2064
原创 获取视频的第一帧作为封面图
很多时候播放视频时会需要展示封面图，但是不可能每次都上传封面图。虽然pc大多数都可以自动使用第一帧为封面图，但部分机型还是不支持，因此需要自己手动去绘画一张。
2023-06-16 01:03:43
1031
原创 粘性布局，在滚动时吸附在页面顶部
注意父级等不要有overflow，否则会针对父元素去做吸附，那就没用了。position:sticky是去找最近的可滚动元素！
2023-05-19 21:26:26
147
原创 element上传组件失败后获取回调数据
当打印数据出来之后，发现typeof(err)是一个object，但是又无法使用err.msg取到。在使用elementUI上传组件时，想要获取上传失败后，后端返回的数据。后来发现需要获取的数据是以json格式存在于它的message中。想要直接输出返回的提示语。但是无法直接使用err.msg获取。接下来，就是为所欲为！
2023-04-26 15:14:10
454
1
原创 js 中 null == 0 为false，为什么 null ＞=0 为true
js 中 null == 0 为false，为什么 null >=0 为true。
2023-03-27 11:59:23
176
原创 移动端h5判断用户手势
因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。在h5中，经常会有用户左滑或者右滑手势展示对应效果的需求。看起来似乎很复杂，在vue中举一个例子，直接看懂！
2022-12-19 16:51:26
910
1
原创 css 元素背景增加毛玻璃效果
做背景模糊有很多方式，常用的为css中的filter属性，在属性值中使用blur()函数可以起到毛玻璃效果。但是经过实际操作之后会发现，它会包括所有的子元素（字体、图片）等都模糊化处理。为此想到一个思路为：增加同样的元素，叠加在元素下方，起到模糊的效果同时不影响子元素。亲测有效，漫漫前端路，又向前一步！
2022-11-17 16:51:58
422
转载 js中问号点的作用和用法（？.）
let res = obj?.data?.list<=等价=> let res = obj && obj.data && obj.data.list作用就是判断这个对象（this.element）下的（businessObject）下的（value）下的（length）是否为null或者undefined，当其中一链为null或者undefined时就返回undefined，这样即使中间缺少一个属性也不会报错，双问号后面接的就是默认值。var ...
2022-05-06 15:49:02
1910
原创 前端下载文件封装
话不多说，直接干活： axios({ data, url, method: 'post', responseType: 'blob', }).then(response => { const blob = new Blob([response.data]) const url = window.URL.createObjectURL(blob) const link = document.createElement('a') li
2022-03-07 10:53:12
335
转载 js 将数组中相同的元素进行分组
function sortClass(sortData){ const groupBy = (array, f) => { let groups = {}; array.forEach((o) => { let group = JSON.stringify(f(o)); groups[group] = groups[group] || []; groups[group].push(o); }); return Object.
2022-03-04 16:52:06
2619
1
转载 vuex 通俗易懂入门
如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 。我在使用基于 vue.js 2.0 的UI框架 ElementUI 开发网站的时候 , 就遇到了这种问题 : 一个页面有很多表单 , 我试图将表单写成一个单文件组件 , 但是表单 ( 子组件 ) 里的数据和页面 ( 父组件 ) 按钮交互的时候 , 它们之间的通讯很麻烦 :<!--父组件中引入子组件--><template> <div> <a href="javas
2022-03-01 11:31:45
122
原创 CSS 使用多张背景图
有时候我们可能会有一张图片当做头部，其余地方随着页面长度自动重复的需求，这个时候就需要使用多张背景图。如果使用两个Div放置背景图，会出现中间有空白的尴尬情况。话不多说，看代码： background-image: url(../../assets/img/head.png), url(../../assets/img/body.png); background-repeat: no-repeat, repeat;是的，就是这么简单，只需要将地址放在一起，地址和其他属性选项用逗号隔开就
2022-02-18 17:01:18
3915
原创 手机号中间4位星号显示
一：正则方法var phone= ‘13991367972’var reg = /^(\d{3})\d*(\d{4})$/var newPhone= phone.replace(reg,’$1****$2’)二：字符串方法var phone=‘18888888888’var newPhone= phone.substr(0,3)+"****"+phone.substr(7);
2022-02-09 11:55:12
844
转载 JS获取浏览器信息
function getExplore(){ var Sys = {}; var ua = navigator.userAgent.toLowerCase(); var s; (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] : (s = ua.match(/msie ([\d\.]+)/)) ? Sys.ie = s[1] : (s = ua.match(/edge\/([\d\.]+)/)) ? Sys.ed
2022-01-21 09:53:51
2803
转载 el-dialog destroy-on-close的坑（关闭弹窗时触发了子组件的mounted）
表现：设置了destroy-on-close为true的一个el-dialog，在关闭时候，触发了子组件的mounted。查找原因：在element的源码中，找到了destroy-on-close的实现原理：当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。所以我们知道了，设置destroyOnClose=true并不会如同element
2022-01-18 20:12:55
1860
1
转载 element-ui表格table checkbox 跨页面记录数据
element-ui 的table表格可以轻松实现多选的功能，只要在表格列中增加type="selection"的一列即可。但是大部分情况下，表格的数据是有分页的，分页一般是要请求后台接口，这样上一页也就是上一次请求的数据的选中状态就没有了。element-ui提供了reserve-selection，可以保存数据更新前选中的值，这个属性还需要指定row-key。<template> <div> <el-table ref="userTable" :data=
2022-01-18 18:00:47
346
转载 文本超出显示省略号
overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？css3解决了这个问题，解决方法如下：display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排
2022-01-17 17:04:38
112
转载 微信字体调大后页面错乱问题
用户的将微信的字体调大之后，会导致页面的字号变大，从而导致页面发生错乱，解决方案如下：ios和安卓需要分开设置，在app.vue中即可ios一行代码就可以：<style>body { -webkit-text-size-adjust: 100% !important;}</style>安卓主要是调用微信内置属性<script>(function() { if (typeof WeixinJSBridge === 'object' &&a
2022-01-13 17:47:21
953
转载 webpack分环境打包
第1步：安装cross-env在项目目录下运行如下命令安装cross-env，我的ide是webstorm，要以直接在ide里的Terminal窗口中运行，也可能通过windows的CMD、Linux的Terminal定位到项目根目录运行下面的命令。npm i --save-dev cross-env第2步：修改各环境下的参数在config/目录下添加test.env.js、prod.env.js。修改prod.env.js里的内容，修改后的内容如下：'use strict'module.ex
2022-01-07 10:51:49
347
原创 修改input的disabled状态下的字体颜色
使用：webkit-text-fill-color，完事 /deep/ .van-field__control:disabled { -webkit-text-fill-color: #323233; }
2022-01-05 19:18:08
1648
转载 vue手写卡片式轮播
5个卡片要计算各自的高度，宽度，利用相对定位计算出各自的位置然后transition过渡来实现动画效果由于开头卡片和末尾卡片的滑动整体性，我在config5数组开头和末尾加了2个隐藏的样式。使得有个滑出屏幕的效果
2021-12-09 17:20:34
2314
原创 ios 中h5网页跳到第三方后回到项目字体变大
在使用rem进行h5页面布局时，在ios环境中，也不知道为啥，跳转到另一个项目，然后再回来，ios的默认字体就会变大。之前搞了很久都不知道怎么办，后来找到一个监听，在main.js中写上，简简单单解决：window.onpageshow = function() { setRem()//在重新进入页面的时候重新设置rem}// rem等比适配配置文件// 基准大小const baseSize = 32 // 注意此值要与 postcss.config.js 文件中的 rootValue保持
2021-11-24 15:09:42
2367
原创 报错：Unexpected reserved word ‘await‘
报错：Unexpected reserved word ‘await’async remove(param, index) { this.$confirm(`是否继续删除${param.name}？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', center: true }) .then(() =&
2021-11-24 15:05:18
2309
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人