Vue
vue
MrQiuGH
搬砖工程师
展开
-
关于移动端弹窗内容滚动底部页面不滚动的问题
弹窗内容区域可滚动,在显示弹窗的时候,底部内容区不能滚;关闭弹窗后,底部内容区可滚动。1.弹窗内容区不需要滚动直接在touchmove事件中设置e.preventDefault();阻止默认事件,这样底部就不会滚动。但是弹窗内容也不会滚动了。2.弹窗内容区需要滚动显示弹窗时,让下面的页面 fixed 定位,弹窗消失时候,再还原 relative 定位。.fixed { overflow: hidden; position: fixed; top: 0; left: 50%; .原创 2022-02-10 15:37:01 · 1203 阅读 · 0 评论 -
前端错误日志监控:Sentry 的介绍与使用
sentry1.背景在我们开发完成后,会有一系列上线之前的测试,比如,先测pre,再测beta,目的就是以确保项目能在生产环境上没有事故。但对于每一个项目,我们都没办法保证代码零 bug、零报错,即便是经历过几轮测试,也永远无法做到 100% 覆盖,用户也不会总是按照我们所预期的进行操作,在上线后也会出现一些预料不到的问题。当生产环境中产生了一个 bug 时,如何做到迅速报警,找到问题原因,修复后又如何在线上验证。因此就需要:前端错误日志监控。跟踪运行时错误 如果在组件渲染时出原创 2022-01-27 17:33:09 · 7725 阅读 · 0 评论 -
移动端 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 · 4767 阅读 · 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 · 21779 阅读 · 1 评论 -
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 · 2877 阅读 · 0 评论 -
swiper 绑定点击事件,点击失效的处理以及事件会触发两次问题
1.前言一般我们写点击事件,都习惯绑定在标签上 。img或者外层的div上。这样在loop为false的时候,是没有问题的。当设置loop为true,就有bug了。你会发现当前图片列表循环完一遍,回到第一张的时候,图片的点击事件是无效的,或者是点击很多次才会触发事件。2.原因设置swiper自动轮播后,你会发现浏览器中渲染的swiper-slide已经不是你数据中的个数了。 组件会自动复制第一个和最后一个进行轮播,从而实现无缝连接。但由于只复制slide没有复制点击事件,所以在循环一周回来遇到复制原创 2021-08-17 18:06:00 · 7634 阅读 · 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 · 3431 阅读 · 0 评论 -
富文本编辑器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 · 3027 阅读 · 2 评论 -
Echarts 柱状图当数值为 0 时,不显示数值
在series->label–>formatter 里设置回调函数formatter: function(params) { if (params.value > 0) { return params.value; } else { return ' '; }},设置前设置后原创 2021-02-18 19:22:23 · 1930 阅读 · 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 · 6987 阅读 · 15 评论 -
Element-ui upload上传文件限制
问题在accept中添加上传文件的类型只能起到“表面”作用,选择“所有文件”之后,还是可以上传任何类型的文件,根本起不到限制作用。解决办法在before-upload(上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。)钩子里去做判断。这里有一个坑,当你设置了 :auto-upload="false" 的时候, 这个钩子是不会被触发的,因此也可以在 on-change 中做判断。上代码// :before-upload或者:on-原创 2021-01-21 18:44:38 · 1434 阅读 · 0 评论 -
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 · 932 阅读 · 0 评论 -
使用 Tinymce 上传本地视频到七牛以及视频预览
官网后台又加一个新需求,那就接上一篇的接着说,在 Vue 中使用 Tinymce 富文本编辑器 + 上传图片到七牛确保引入了media插件import 'tinymce/plugins/media'在init数据源中添加media data() { return { mediaUploaded: false, //有没有上传完成 resVideo: '', //返回的视频url init: { .原创 2020-12-16 18:09:37 · 1667 阅读 · 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 · 2502 阅读 · 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 · 2752 阅读 · 1 评论 -
在Vue中使用Tinymce富文本编辑器+上传图片到七牛
公司官网后台需要做一个上传新闻、公告的功能,自然而然就需要用到了富文本编辑器。UEditor、Simditor、wangEditor、CKEditor、TinyMCE、Quill,这是当前比较热门的几个编辑器,网上评论褒贬不一,使用哪个更是根据你的业务需求来定。当时看的说是Quill与Vue结合比较好,就使用了Quill。开发完之后,才发现有一个问题。在编辑器中插入一张图片,使他居中,在编辑器界面可以居中显示,但是上传到公司官网上后就不居中了。图片的样式竟然不是添加的行内样式,而是一个Quill的类名.原创 2020-12-07 15:37:10 · 1387 阅读 · 9 评论