- 博客(64)
- 收藏
- 关注
RSS订阅原创 填鸭表单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
405
原创 关于部分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
400
原创 关于element-ui中，页面上有多个el-table并通过v-if、v-else等控制是否显示时，type=selection勾选框失效或不显示的问题
刚开始是勾选框那一列直接空了什么都不显示，搜索了一下说是给el-table标签增加id，加了之后是显示了，但是点击任何选框都会直接取消全部选中效果，翻了半天源码也没发现到底是哪里事件冲突了还是怎么回事，烦了，干脆自己写勾选框了。
2023-10-12 13:40:33
1243
2
原创 js批量下载文件
单个文件直接window.location.href就行，但是多个的话只会下载最后一个，请求的话因为文件存在oss，又会跨域，所以使用了iframe，批量下载只需循环调用。其实还可以优化一下，下载完移除iframe。
2023-07-31 16:00:08
403
原创 canvas获取图片主题色
其实这两种方法都不是很完美，第一种在碰到渐变色背景+固定颜色文字的时候就会取到文字的颜色了，第二种则是在碰到png透明背景图片时会取到偏黑的色值。
2023-07-07 14:07:36
333
原创 公众号内使用开放标签wx-open-launch-weapp打开小程序 vue版
【代码】公众号内使用开放标签wx-open-launch-weapp打开小程序 vue版。
2023-03-28 10:30:22
370
原创 vueRouter通过重写replace和push方法在跳转时添加默认参数
最近这个公众号分享的问题可把我折磨死了，先是分享出去的带code，由于我们是做的授权登录获取用户信息，所以别人点进去会显示分享人的信息，然后微信又不让改分享链接了，只能一顿操作在获取到用户信息之后把code截掉再刷一次页面，这样就能避免显示分享人的信息，但是想显示被分享人的信息还需要重新进行微信授权登录，所以分享出去的链接必须带上appId，想了很多办法，本来是在beforeEach里改，但是行不通，还会报错，想来想去只能改vueRouter自带的跳转方法了，也就是replace和push。
2023-02-24 10:30:27
453
原创 canvas绘制带二维码的海报
最近有个要做带二维码的海报的需求，生成二维码用的是qrcode，把背景图和二维码合在一起当然就要用到神奇的canvas了~
2023-02-22 16:40:19
552
1
原创 vue swiper 多于一屏滚动到底再切换
其实就是一个swiper里的slide里再套一个freeMode的swiper，但是有个问题要注意，这个slide必须overflow: auto;
2022-10-26 17:37:49
803
1
原创 前端开发中遇到的一些小问题合集 更新中
1. echarts4.9.0画出了canvas但是不显示的问题2. formData里数据的获取3. 嵌套的树形数据如何管理和转换4. 小程序"navigationStyle": "custom"之后的自定义返回按钮位置5. vue-awesome-swiper loop和autoplay不能同时生效的问题以及点击事件不灵敏的问题...
2022-06-22 11:34:54
267
原创 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
2079
原创 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
1458
原创 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
409
原创 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
1086
原创 上传到阿里云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
3612
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
1299
原创 关于安卓webview播放音视频退出当前页面后仍播放的问题
这个问题困扰了我好几天了，找了各种各样的方法都不行，按理说vue的router返回了上一页时，会销毁上个页面，但是似乎webview是有缓存的，这就导致了页面切换之后音视频仍然在播放。试过的方法：1. 切换页面时暂停音视频的播放，能降低问题发生频率，但是仍会时有发生。2. app端增加交互，点击返回按钮时调用，将焦点从音视频控件转移回webview，ios可以完美解决，但安卓不行3. 安卓交互修改为返回时reload，但是会造成白屏一秒钟的现象，被产品否了4. 前端在返回时将audio/
2021-02-03 18:09:41
1394
1
原创 vue history模式与params的二三事
接手现在公司的公众号项目的时候，vue的路由一直用的hash模式，相安无事，后来为了做交互还是跟小程序搞嵌套还是干嘛我忘了，改成了history模式，问题就来了。。。比如这个路由：{path:'/readpdf/:id',name:'readpdf',component:()=>import('@/components/readpdf')},看起来没问题吧，确实，在vue项目里跳...
2020-12-01 16:52:52
443
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
846
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
7963
9
原创 安卓电视 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
2991
原创 小程序webview内嵌网页和网页跳转到小程序
小程序内嵌h5网页：<web-viewsrc="你的网页地址"bindmessage="bindmessage"/>网页地址要配置在小程序的业务域名里。不配置的话，本地测试可以勾选开发者工具右上角详情-本地设置-不校验合法域名。但是不能扫码预览，只能真机调试。网页跳转小程序的方法：varua=window.navigator.userAgent.toLowerCase();//先判断是否微信浏览器if(ua.match(/MicroMessenger/i...
2020-08-26 17:36:47
2368
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
661
原创 获取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
773
原创 vue+axios将后端返回的图片流显示到img标签中
var that = this axios .get("接口地址", { responseType: "arraybuffer", params: 传给后端的数据 }) .then(response => { return ( "da...
2020-03-17 12:01:04
6468
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
1978
转载 基于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
979
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
7143
原创 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
320
原创 vue全局弹窗组件
两种形式：success：只有确定按钮confirm：有确定和取消两种按钮，可以传入点击确定的回调函数，代码里还加了一种 return ，只是样式不同文字内容用的v-html便于传入不同标签显示不同颜色文字在components文件夹下新建message文件夹，在这个文件夹下新建message.vue和index.js两个文件。message.vue是弹窗内容...
2020-02-06 15:17:55
1988
原创 父组件上拉加载+传值到子组件，子组件修改数据问题
就是这样，上面的图是一个列表中的一个组件，红框里是收藏与否的标志，点击可以取消/确认收藏。因为子组件并不能改父组件的数据嘛，所以我刚开始的思路是把这个字段拿出来单独做个数组，显示就绑定这个数组，然后修改的时候修改这个数组就行了，但是在哪里去做这个操作呢？刚开始是放在mounted里，但是这样的话，上拉加载之后这个数组没有变过，就导致除了第一页之外的都不显示这个标志了。然后我想了一下，放...
2020-01-20 15:45:14
155
原创 vue项目微信支付报“当前url未注册”的问题
vue项目微信支付报“当前url未注册”的问题：因为vue单页面项目会在url中加#号，会导致我们配置的支付根目录与实际目录不符比如配置的支付根目录是：http://www.xx.com/当我们要支付的时候页面地址可能是：http://www.xx.com/#/pay，这样就会报这个错误。解决方法：1. 每次进首页都调微信授权，这样code会放在#号前面，像这样：http://...
2020-01-17 12:22:08
1949
原创 阿里云图片如何获取缩略图
我们都知道大的图片加载会导致页面卡顿，所以有些地方需要显示缩略图，点击显示大图之后再去加载图片，那怎么显示缩略图呢？我们的图片是放在阿里云oss上的，阿里云是提供缩略图服务的，只需要在你的图片地址后面加上参数就ok啦。比如这样：background-image: url("阿里云图片地址?x-oss-process=image/resize,m_fill,h_200,w_200");...
2020-01-16 15:41:40
2748
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人