MrQiuGH-CSDN博客

原创关于移动端弹窗内容滚动底部页面不滚动的问题

弹窗内容区域可滚动，在显示弹窗的时候，底部内容区不能滚；关闭弹窗后，底部内容区可滚动。1.弹窗内容区不需要滚动直接在touchmove事件中设置e.preventDefault()；阻止默认事件，这样底部就不会滚动。但是弹窗内容也不会滚动了。2.弹窗内容区需要滚动显示弹窗时，让下面的页面 fixed 定位，弹窗消失时候，再还原 relative 定位。.fixed { overflow: hidden; position: fixed; top: 0; left: 50%; .

2022-02-10 15:37:01 1429

原创前端错误日志监控：Sentry 的介绍与使用

sentry1.背景在我们开发完成后，会有一系列上线之前的测试，比如，先测pre，再测beta，目的就是以确保项目能在生产环境上没有事故。但对于每一个项目，我们都没办法保证代码零 bug、零报错，即便是经历过几轮测试，也永远无法做到 100% 覆盖，用户也不会总是按照我们所预期的进行操作，在上线后也会出现一些预料不到的问题。当生产环境中产生了一个 bug 时，如何做到迅速报警，找到问题原因，修复后又如何在线上验证。因此就需要：前端错误日志监控。跟踪运行时错误如果在组件渲染时出

2022-01-27 17:33:09 8487

原创移动端 iOS 设置 video 的 currentTime 无效解决方法

需要记录视频的播放进度，重新进入时回到退出前的位置，并继续播放但是ios直接赋值currentTime无效，原因就是判断资源可播放时（canplay）再设置才可以，，所以要根据不同系统判断一下，上代码// 判断是否安卓设备isAndroid() { const u = navigator.userAgent; if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { return true; } re.

2022-01-18 16:02:37 5242 4

原创 Vue 中动态绑定背景图片（三种情况）

1.服务端返回图片链接<div class="bg-img" :style="{ backgroundImage: `url(${imgUrl})` }" /><div2.引用本地的图片<div class="bg-img" :style="{ backgroundImage: `url(${imgUrl})` }" /><divimgUrl: require('../assets/bg-img.png'), 一定要以require的方

2022-01-13 16:06:45 27746 5

原创 swiper 设置 loop 为 true 时出现空白页

1.问题如下图所示循环滑动到最后一个的时候，会没显示下一个，滑动一下才出现。2.解决方案设置一下loopAdditionalSlides: 1loop 模式下会在 slides 前后复制若干个 slide,，前后复制的个数不会大于原总个数。默认为 0，前后各复制 1 个。0,1,2 --> 2,0,1,2,0例：取值为 1，0,1,2 --> 1,2,0,1,2,0,1值越大， dom 会复制的越多，出现空白的几率就越小。...

2022-01-13 15:15:44 3731

原创 swiper 绑定点击事件，点击失效的处理以及事件会触发两次问题

1.前言一般我们写点击事件，都习惯绑定在标签上。img或者外层的div上。这样在loop为false的时候，是没有问题的。当设置loop为true，就有bug了。你会发现当前图片列表循环完一遍，回到第一张的时候，图片的点击事件是无效的，或者是点击很多次才会触发事件。2.原因设置swiper自动轮播后，你会发现浏览器中渲染的swiper-slide已经不是你数据中的个数了。组件会自动复制第一个和最后一个进行轮播，从而实现无缝连接。但由于只复制slide没有复制点击事件，所以在循环一周回来遇到复制

2021-08-17 18:06:00 9177 3

原创 Vue 在子组件的 methods 中获取到 props 中的值以及 watch 监听不到 props 的问题

1.父子组件通信父组件给子组件传参，最常见的方式：父组件中使用 v-bind 绑定传送，子组件使用 props 接收即可<DistrictIdSelector :fieldType="2"/>props: { fieldType: { type: Number, default() { return 1; }, },},这样的话，我们可以直接在模版中获取到fieldType的值了。但是存在一个父子组件渲染异步的问题，通过这个方法传

2021-04-20 17:06:11 3539

原创富文本编辑器Vue-Quill-Editor清除复制粘贴样式

1.在editorOptions=>modules下添加clipboard: { // 粘贴板，处理粘贴时候的自带样式 matchers: [[Node.ELEMENT_NODE, this.handleCustomMatcher]],},2.定义方法保留图片跟空格，清除其余所有样式handleCustomMatcher(node, delta) { delta.ops = delta.ops.map(op => { return { insert

2021-04-01 19:14:47 3524 2

原创 Echarts 柱状图当数值为 0 时，不显示数值

在series->label–>formatter 里设置回调函数formatter: function(params) { if (params.value > 0) { return params.value; } else { return ' '; }},设置前设置后

2021-02-18 19:22:23 2206 2

原创在Vue中使用Echarts地图以及数据展示

效果图如下（东营市）1.先把地图显示出来首先要获取该地区的JSON数据，网站：DATAV.GeoAtolas，逐步选择地图区域，然后复制数据到本地另存为dy.json。<template> <div id="mapView" class="map-view"/></template><script> //引入地图数据 import dy from '@/assets/dy' // 引入echarts以及提示框和标题组件 const

2021-02-18 19:05:45 7249 15

原创 Element-ui upload上传文件限制

问题在accept中添加上传文件的类型只能起到“表面”作用，选择“所有文件”之后，还是可以上传任何类型的文件，根本起不到限制作用。解决办法在before-upload（上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。）钩子里去做判断。这里有一个坑，当你设置了 :auto-upload="false" 的时候，这个钩子是不会被触发的，因此也可以在 on-change 中做判断。上代码// :before-upload或者:on-

2021-01-21 18:44:38 1549

原创 CSS3中:nth-child() 的使用-区间选择

:nth-child(2n) //选择偶数项:nth-child(3n) //选择3的倍数项:nth-child(2n-1) //选择奇数项:nth-child(n+4) //选择大于 4 的项，直到最后一个:nth-child(-n+4) //选择小于 4 的项，直到第一个:nth-child(n+5):nth-child(-n+8) //选择一个区间，第五个到第八个[5,8]举个栗子：设置第五个到第八个li的高度和其他不同。li { heigh

2020-12-30 14:38:30 1901

原创 Vue中使用el-date-picker数据回显后无法更新

问题一般是在编辑、更新的时候，需要实现数据回显功能。然而在Vue中使用el-date-picker，数据回显后无法更新时间。<el-date-picker style="width: 100%" v-model="form.time" type="datetime" :clearable="false" placeholder="选择日期时间" />请求完成之后，直接给time赋值this.form.time = res.data.t

2020-12-24 15:10:15 1074

原创使用 Tinymce 上传本地视频到七牛以及视频预览

官网后台又加一个新需求，那就接上一篇的接着说，在 Vue 中使用 Tinymce 富文本编辑器 + 上传图片到七牛确保引入了media插件import 'tinymce/plugins/media'在init数据源中添加media data() { return { mediaUploaded: false, //有没有上传完成 resVideo: '', //返回的视频url init: { .

2020-12-16 18:09:37 1979 5

原创 Vue 使用 Element-ui upload组件实现上传文件到七牛和数据回显

文件上传<el-upload ref="fileUpload" action="https://up-z1.qiniup.com" :auto-upload="false" :data="{ token: qnToken, key: fileKey }" :on-change="changeUploadFile" :on-success="

2020-12-11 10:56:45 2650 2

原创 Vue项目在IE浏览器上路由跳转报错

Vue2.x 项目，登录成功之后跳转到主页面，其他浏览器都是可以的，只有 IE 不行。错误如下[vue-router] Failed to resolve async component default: SyntaxError: 语法错误[vue-router] uncaught error during route navigation:[object Error]{description: "语法错误", message: "语法错误", name: "SyntaxError", numbe.

2020-12-08 17:18:37 3196 1

原创在Vue中使用Tinymce富文本编辑器+上传图片到七牛

公司官网后台需要做一个上传新闻、公告的功能，自然而然就需要用到了富文本编辑器。UEditor、Simditor、wangEditor、CKEditor、TinyMCE、Quill，这是当前比较热门的几个编辑器，网上评论褒贬不一，使用哪个更是根据你的业务需求来定。当时看的说是Quill与Vue结合比较好，就使用了Quill。开发完之后，才发现有一个问题。在编辑器中插入一张图片，使他居中，在编辑器界面可以居中显示，但是上传到公司官网上后就不居中了。图片的样式竟然不是添加的行内样式，而是一个Quill的类名.

2020-12-07 15:37:10 1540 9

原创面经总结-HTML+CSS

什么是标签语义化？有什么意义？根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读，写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。像标题（H1~H6）、列表（li）、强调（strong em）在没有 CSS 的情况下，页面也能呈现出很好地内容结构、代码结构；有利于 SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；便于团队开发和维护，语义化更具可读性，遵循 W3C 标准的团队都遵循这个标准，可以减少差异化。

2020-12-03 12:19:32 155

原创 MongoDB常用命令

汇总一下 MongoDB 中的常用命令。什么是 MongoDBMongoDB 是由 C++语言编写的，是一个基于分布式文件存储的开源数据库系统。MongoDB 旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。MongoDB 中的三要素：数据库集合文档MongoDB 的优势与劣势优势：1、在适量级的内存的.

2020-10-13 18:55:04 154 2

原创 JS正则表达式

正则表达式（Regular Expression，在代码中常简写为 regex、regexp 或 RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。语法/正则表达式主体/修饰符(可选)var re = /a/; // 在两个斜线之间的字符串是不需要添加引号的var re = new RegExp('a'); //有一种特殊情况下，要用new方式(正则传参的时候)先介绍几个有关的概念：转义字符：通过 \ 来实现\d：数字 0-9.

2020-10-12 16:04:31 259

原创 JS中的闭包和匿名函数自执行

1.闭包闭包就是能够读取其他函数内部变量的函数。例如在 javascript 中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。闭包通常用来创建内部变量，使得这些变量不能被外部随意修改，同时又可以通过指定的函数接口来操作；闭包就是有权限访问另一个函数内部作用域的变量的函数。举个栗子function foo() { var a = 10; function bar() { //这个函数叫

2020-09-30 16:56:00 336

原创 JS中的字符串比较

如果比较的类型不同，首先会进行隐式转换，就是将两边的类型自动转成一致再对比。比较首先分为以下几种情况：1.纯数字和纯数字比较直接依据数学运算，没啥说的。2.纯数字和数字型字符串比较(30 > '20'); //true数字型字符串会转成纯数字再与前面的纯数字比较，即 20 与 30 相比谁大？3.纯数字和非数字字符串比较('a' > 96); //false这种情况下，js 会将字符串转成数字，js 转数字的方法：parseInt(‘a’)，如果解析不到数字，则将返回一.

2020-09-29 18:20:12 3716

原创 VSCode必备插件汇总

Hbuilder、webStorm、Dreamwearver 之前都有用过，VSCode 是微软开发的的一款代码编辑器，功能很强大，安装插件只需要点击图片所示按钮，即可进入拓展，在搜索框中输入插件名点击安装后，等待安装好即可点击重新加载重启 VSCode 使得插件生效。下面汇总了一些前端开发比较常用的插件。1.Beautify（格式化代码，值得注意的是，beautify 插件支持自定义格式化代码规则）2.Auto Close Tag（自动闭合 HTML/XML 标签）3.Auto Rename Ta

2020-09-29 16:39:21 3422

原创 JS数组常用方法

数组是一种特殊类型的对象，在 JavaScript 中对数组使用 typeof 运算符会返回 “object”，数组就是一个集合。创建数组1. var arr = ['a','b','c','d']; //出于简洁、可读性和执行速度的考虑，建议使用此方法2. var arr = new Array('a','b','c','d');多维数组var arr = [ ...

2020-02-27 12:10:08 200

原创记第一次打字测试

今天刚刚注册了自己的盲打训练信息，第一次在这个平台上练习打字，第一次去上面参加这样的盲打比赛。第一次嘛，没有经验，还稍微有些紧张，就开始了第一次打字比赛，我就按照自己平时打字的速度，看一个词打一下，感觉没有过去过少时间，就已经到了限制的时间。看一下自己的成绩，再看一下别人的成绩，感觉自己真的差的好多啊，真的不仅仅是一点半点。有点失落，但更多还是要努力，多多的练习，慢慢的提高自己的打字的速度，一天天

2016-06-25 21:23:27 361

MrQiu的博客