- 博客(67)
- 收藏
- 关注
原创 关于 Safari 100vh 的问题与解决方案
Safari 上有时候底部栏会挡住页面,是因为100vh是获取了文档整体高度,没有把遮挡栏算入,所以需要重新计算一下。
2024-07-15 13:45:49
484
原创 填鸭表单tduck-front踩坑记
将vue.config.js里的lintOnSave: process.env.NODE_ENV === 'development'改为lintOnSave: false。结果又报什么vxe-table的错,查了一下,把package.json里的"babel-plugin-import": "^1.13.3",的^去掉,好了,npm run dev跑起来了。然后npm run dev 报了个eslint的错,遂删除eslint相关所有依赖和代码,删除node_modules,重新npm install。
2024-02-26 14:20:51
633
3
原创 关于部分ios机型当父元素有transform、transition效果时position:relative的子元素在滚动时偶发错位的问题
的元素加上-webkit-transform: translate3d(0, 0, 0);的元素也就是这里的id为UlOrderBody的列表元素,加上-webkit-overflow-scrolling: touch;终于不再出现这个效果了,但是因为ios的橡皮筋效果,在滚到顶和底的时候会出现抖动现象,所以使用overscroll-behavior: none;这时又出现了新的问题,因为列表里有些元素使用了position:relative;找了很多办法,什么overflow:hidden;
2023-12-22 16:45:08
533
原创 关于element-ui中,页面上有多个el-table并通过v-if、v-else等控制是否显示时,type=selection勾选框失效或不显示的问题
刚开始是勾选框那一列直接空了什么都不显示,搜索了一下说是给el-table标签增加id,加了之后是显示了,但是点击任何选框都会直接取消全部选中效果,翻了半天源码也没发现到底是哪里事件冲突了还是怎么回事,烦了,干脆自己写勾选框了。
2023-10-12 13:40:33
1699
2
原创 js批量下载文件
单个文件直接window.location.href就行,但是多个的话只会下载最后一个,请求的话因为文件存在oss,又会跨域,所以使用了iframe,批量下载只需循环调用。其实还可以优化一下,下载完移除iframe。
2023-07-31 16:00:08
534
原创 canvas获取图片主题色
其实这两种方法都不是很完美,第一种在碰到渐变色背景+固定颜色文字的时候就会取到文字的颜色了,第二种则是在碰到png透明背景图片时会取到偏黑的色值。
2023-07-07 14:07:36
477
原创 公众号内使用开放标签wx-open-launch-weapp打开小程序 vue版
【代码】公众号内使用开放标签wx-open-launch-weapp打开小程序 vue版。
2023-03-28 10:30:22
465
原创 vueRouter通过重写replace和push方法在跳转时添加默认参数
最近这个公众号分享的问题可把我折磨死了,先是分享出去的带code,由于我们是做的授权登录获取用户信息,所以别人点进去会显示分享人的信息,然后微信又不让改分享链接了,只能一顿操作在获取到用户信息之后把code截掉再刷一次页面,这样就能避免显示分享人的信息,但是想显示被分享人的信息还需要重新进行微信授权登录,所以分享出去的链接必须带上appId,想了很多办法,本来是在beforeEach里改,但是行不通,还会报错,想来想去只能改vueRouter自带的跳转方法了,也就是replace和push。
2023-02-24 10:30:27
553
原创 canvas绘制带二维码的海报
最近有个要做带二维码的海报的需求,生成二维码用的是qrcode,把背景图和二维码合在一起当然就要用到神奇的canvas了~
2023-02-22 16:40:19
810
1
原创 vue swiper 多于一屏滚动到底再切换
其实就是一个swiper里的slide里再套一个freeMode的swiper,但是有个问题要注意,这个slide必须overflow: auto;
2022-10-26 17:37:49
946
1
原创 前端开发中遇到的一些小问题合集 更新中
1. echarts4.9.0画出了canvas但是不显示的问题2. formData里数据的获取3. 嵌套的树形数据如何管理和转换4. 小程序"navigationStyle": "custom"之后的自定义返回按钮位置5. vue-awesome-swiper loop和autoplay不能同时生效的问题以及点击事件不灵敏的问题...
2022-06-22 11:34:54
327
原创 element-ui的table中toggleRowSelection失效问题
背景是要做个商品列表A,可搜索的,勾选之后的显示在列表B中,两表联动,在A中勾选和取消选择的行,在B中会对应显示和消失。在B中点击删除,所删除的行在A中需要取消选择。刚开始我就直接把A选中的push到B的数据中,点击B删除的时候直接调A的toggleRowSelection,row用B表中的数据,这样可以不用循环A判断id是否与要删的一致再去toggleRowSelection。这样是可以的。后来发现个问题,一旦我重新搜索,A表中数据变了,或者我根本没有修改搜索条件,只是重新请求了,再去点B的删除,就没有办
2022-06-02 10:55:05
2339
原创 vue3学习笔记
一. 安装1. cdn<script src="https://unpkg.com/vue@next"></script>2. npm脚手架vitenpm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue脚手架vue-clinpm install -g @vue/cli # 或 yarn global add @vue/cli..
2021-12-02 18:33:19
1600
原创 vue-cli3路由相关采坑记
vue-cli3里用vue-router居然不能懒加载(是我孤陋寡闻了),要用懒加载的话需要关闭prefetch,想要预加载的可以使用webpack内联指令单独打开prefetch。prefetch的作用是什么呢,在页面加载完成后利用空闲时间预加载需要的内容。会比较消耗带宽,一般移动端会关掉。关闭prefetch://vue.config.js里module.exports = { chainWebpack: config =>{ config.plugins.
2021-11-29 16:38:33
459
原创 viser的x轴文字太长想划过再显示全部怎么办
最近真是跟viser干上了,垃圾框架,文档写的不明不白,偏偏我们领导又提出奇葩需求,让x轴文字太长的时候划过再显示全部,我研究了一天,终于搞明白了。本来以为都是canvas画出来的,没办法加mousemove实践,搜了一下可以加useHtml属性配合label的htmlTemplate使用,于是就加上了:dataKey="x"不能不写,表示你要操作x轴。<v-axis :useHtml="true" dataKey="x" :label="axisLabel" />axisL
2021-11-19 18:44:48
1186
原创 上传到阿里云oss的视频如何获取第一帧作为视频封面
非常简单,在视频地址后面加上?x-oss-process=video/snapshot,t_1000,m_fast就行啦示例:<video id="indexvideo" controls poster="视频地址?x-oss-process=video/snapshot,t_1000,m_fast" src="视频地址"></video>...
2021-07-09 12:21:32
4111
1
原创 vue router页面切换时回到顶部的问题
router.afterEach(() => { window.scrollTo(0, 0) });之前是这么写的,写在router.js里,但是实在太蠢了,页面切换的时候如果第二个页面上的数据渲染慢了点,就会让用户看到页面滚回顶部闪动一下,我查了一下,找到了比较好的方法,就是用router的scrollBehavior,写法是这样:const router = new Router({ base: '/', routes, scrollBehavior(.
2021-03-19 17:59:39
1373
原创 关于安卓webview播放音视频退出当前页面后仍播放的问题
这个问题困扰了我好几天了,找了各种各样的方法都不行,按理说vue的router返回了上一页时,会销毁上个页面,但是似乎webview是有缓存的,这就导致了页面切换之后音视频仍然在播放。试过的方法:1. 切换页面时暂停音视频的播放,能降低问题发生频率,但是仍会时有发生。2. app端增加交互,点击返回按钮时调用,将焦点从音视频控件转移回webview,ios可以完美解决,但安卓不行3. 安卓交互修改为返回时reload,但是会造成白屏一秒钟的现象,被产品否了4. 前端在返回时将audio/
2021-02-03 18:09:41
1611
1
原创 vue history模式与params的二三事
接手现在公司的公众号项目的时候,vue的路由一直用的hash模式,相安无事,后来为了做交互还是跟小程序搞嵌套还是干嘛我忘了,改成了history模式,问题就来了。。。比如这个路由:{path:'/readpdf/:id',name:'readpdf',component:()=>import('@/components/readpdf')},看起来没问题吧,确实,在vue项目里跳...
2020-12-01 16:52:52
521
2
原创 jeecg-boot 修改tablayout里的组件路由标题
起因是我们做了这么个页面:每个业绩点进去的页面实际上是同一个,只是数据不同而已,我就用了同一个vue文件,但是添加菜单的时候标题只能有一个,显示在上图中的首页和团队业绩明细后面,产品又想让点进去之后标题对应相应的xx业绩,我就搜了一下,发现编写这块的是在tablayout.vue文件里,也就是下面这段:<a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList"> <span
2020-11-11 16:55:34
980
1
原创 viser图表的使用
最近项目里要用到图表,如图。经理找的模板里自带viser,我找了一下文档,写的真的不咋地,底下一片骂声。找了半天,大概是这么写(数据我瞎写的):<template> <div :style="{ padding: '0 0 32px 32px' }"> <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4> <v-chart :data="data" :height.
2020-08-26 18:24:08
8192
10
原创 安卓电视 TV端的webview网页 按键控制和一些小问题
最近做了个tv端的项目,是webview套的vue项目,电视上还不能调试,可把我难坏了。首当其冲的就是按键控制,包括上下左右,确定,返回,home键等。查了一下它们的keycode:36home,37左,38上,39右,40下 ,13确定, 8(也有的是4)返回。返回键默认是跳出app,如果不灵,需要app端配合写回退方法。写了一个公共方法(要用到jquery):import router from '../router'var buttons = [], //需要聚焦的元素集合
2020-08-26 17:58:52
3915
原创 小程序webview内嵌网页和网页跳转到小程序
小程序内嵌h5网页:<web-viewsrc="你的网页地址"bindmessage="bindmessage"/>网页地址要配置在小程序的业务域名里。不配置的话,本地测试可以勾选开发者工具右上角详情-本地设置-不校验合法域名。但是不能扫码预览,只能真机调试。网页跳转小程序的方法:varua=window.navigator.userAgent.toLowerCase();//先判断是否微信浏览器if(ua.match(/MicroMessenger/i...
2020-08-26 17:36:47
2441
3
原创 基于vuex实现的中英切换功能
本来想用那个什么vue-i18n,但是发现自己做的做法也差不多,就自己做了。首先当然是先npm install 一下vuex。安装成功之后在src目录下新建一个store文件夹,文件夹里新建一个index.js。index.js里引入vue和vuex。import Vue from 'vue';import Vuex from 'vuex';如果已经安装过并且建了store...
2020-04-27 14:47:06
725
原创 获取url中的中文参数
function getUrlParam(name) { var url = window.location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var...
2020-04-01 10:10:18
832
原创 vue+axios将后端返回的图片流显示到img标签中
var that = this axios .get("接口地址", { responseType: "arraybuffer", params: 传给后端的数据 }) .then(response => { return ( "da...
2020-03-17 12:01:04
7084
5
原创 vue axios上传多个附件并单独显示进度条
就是把input type=file的opacity置为0,然后在底下放有样式的元素,然后通过axios的onUploadProgress 的参数total和loaded显示进度,当然要在后端返回成功之后再把进度置为100%。然后监听一下文件数组,当所有进度都为1的时候就表示完成了。<template> <div id="upload"> <div...
2020-03-02 18:07:14
2225
转载 基于vue仿淘宝滑动验证码
公司要做这个,我不会,哈哈哈,搜了一下找到一个大佬写的,链接贴这~https://www.jianshu.com/p/f5bf9ba0b27e可以直接用的!备个份:pc端:<template> <div class="drag" ref="dragDiv"> <div class="drag_bg"></d...
2020-02-13 18:34:48
1045
1
原创 vue列表展开收起效果
图片太糊了,勉强看个效果吧。代码如下:<template> <div id="questions"> <div class="container1"> <ul class="question-container"> <li v-for="(q,index) in questions" :ke...
2020-02-06 15:46:19
7219
原创 vue分页组件
先上效果图代码如下:<template> <div class="pager fz-fo ta-c fc-blue"> <span :class="['arrow','left-arrow',currPage>1?'act':'']" @click="cutPage()"></span> <spa...
2020-02-06 15:25:21
346
原创 vue全局弹窗组件
两种形式:success:只有确定按钮confirm:有确定和取消两种按钮,可以传入点击确定的回调函数,代码里还加了一种 return ,只是样式不同文字内容用的v-html便于传入不同标签显示不同颜色文字在components文件夹下新建message文件夹,在这个文件夹下新建message.vue和index.js两个文件。message.vue是弹窗内容...
2020-02-06 15:17:55
2138
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人