vue
夏天咯
summer_summer
展开
-
vueRouter通过重写replace和push方法在跳转时添加默认参数
最近这个公众号分享的问题可把我折磨死了,先是分享出去的带code,由于我们是做的授权登录获取用户信息,所以别人点进去会显示分享人的信息,然后微信又不让改分享链接了,只能一顿操作在获取到用户信息之后把code截掉再刷一次页面,这样就能避免显示分享人的信息,但是想显示被分享人的信息还需要重新进行微信授权登录,所以分享出去的链接必须带上appId,想了很多办法,本来是在beforeEach里改,但是行不通,还会报错,想来想去只能改vueRouter自带的跳转方法了,也就是replace和push。原创 2023-02-24 10:30:27 · 494 阅读 · 0 评论 -
canvas绘制带二维码的海报
最近有个要做带二维码的海报的需求,生成二维码用的是qrcode,把背景图和二维码合在一起当然就要用到神奇的canvas了~原创 2023-02-22 16:40:19 · 710 阅读 · 1 评论 -
修改mpvue小程序dist文件路径
修改mpvue小程序dist文件路径 main改为index原创 2023-02-13 11:13:36 · 200 阅读 · 0 评论 -
vue swiper 多于一屏滚动到底再切换
其实就是一个swiper里的slide里再套一个freeMode的swiper,但是有个问题要注意,这个slide必须overflow: auto;原创 2022-10-26 17:37:49 · 882 阅读 · 1 评论 -
使用element-ui+sortablejs实现表格的拖拽排序
【代码】使用element-ui+sortablejs实现表格的拖拽排序。原创 2022-09-30 10:51:19 · 966 阅读 · 0 评论 -
使用draggable+element-ui实现图片上传和拖拽排序
【代码】使用draggable+element-ui实现图片上传和拖拽排序。原创 2022-09-27 17:35:47 · 704 阅读 · 0 评论 -
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 · 1141 阅读 · 0 评论 -
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 · 1342 阅读 · 0 评论 -
vue history模式与params的二三事
接手现在公司的公众号项目的时候,vue的路由一直用的hash模式,相安无事,后来为了做交互还是跟小程序搞嵌套还是干嘛我忘了,改成了history模式,问题就来了。。。比如这个路由:{path:'/readpdf/:id',name:'readpdf',component:()=>import('@/components/readpdf')},看起来没问题吧,确实,在vue项目里跳...原创 2020-12-01 16:52:52 · 489 阅读 · 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 · 908 阅读 · 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 · 8089 阅读 · 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 · 3265 阅读 · 0 评论 -
基于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 · 690 阅读 · 0 评论 -
vue+axios将后端返回的图片流显示到img标签中
var that = this axios .get("接口地址", { responseType: "arraybuffer", params: 传给后端的数据 }) .then(response => { return ( "da...原创 2020-03-17 12:01:04 · 6873 阅读 · 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 · 2114 阅读 · 0 评论 -
基于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 · 1015 阅读 · 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 · 7178 阅读 · 0 评论 -
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 · 328 阅读 · 0 评论 -
vue全局弹窗组件
两种形式:success:只有确定按钮confirm:有确定和取消两种按钮,可以传入点击确定的回调函数,代码里还加了一种 return ,只是样式不同文字内容用的v-html便于传入不同标签显示不同颜色文字在components文件夹下新建message文件夹,在这个文件夹下新建message.vue和index.js两个文件。message.vue是弹窗内容...原创 2020-02-06 15:17:55 · 2077 阅读 · 0 评论 -
父组件上拉加载+传值到子组件,子组件修改数据问题
就是这样,上面的图是一个列表中的一个组件,红框里是收藏与否的标志,点击可以取消/确认收藏。因为子组件并不能改父组件的数据嘛,所以我刚开始的思路是把这个字段拿出来单独做个数组,显示就绑定这个数组,然后修改的时候修改这个数组就行了,但是在哪里去做这个操作呢?刚开始是放在mounted里,但是这样的话,上拉加载之后这个数组没有变过,就导致除了第一页之外的都不显示这个标志了。然后我想了一下,放...原创 2020-01-20 15:45:14 · 168 阅读 · 0 评论 -
手机调试电脑网页项目无法访问的问题
昨天发生了一件奇怪的事情,我本来本地起webpack的devserver是可以在同一局域网内让手机访问的,但是突然就访问不了了。我以为是端口问题就换了端口,结果还是不行,那就是项目内部出了问题,查看了一下svn提交记录,除了我之外有另外一个人改了config下的index.js,把host:'0.0.0.0'改成了host:'127.0.0.1'。。。。我改回去就好了。。真是一头黑线,干嘛...原创 2020-01-16 15:34:50 · 914 阅读 · 0 评论 -
原生js上拉加载
发现目前项目里的上拉加载在我手机上不好使,以下是原代码:if(window.screen.height+document.documentElement.scrollTop>= document.body.clientHeight){ //你的操作}就把这几个判断条件显示在了页面上,用手机调试,发现document.documentElement.scrollTo...原创 2020-01-16 15:23:28 · 182 阅读 · 0 评论 -
h5 vue项目使用WebViewJavascriptBridge与ios和Android交互
vue项目可以使用WebViewJavascriptBridge与ios和Android交互。搜了一下找到了bridge.js的代码如下:function setupWebViewJavascriptBridge (callback) { if (window.WebViewJavascriptBridge) { return callback(window.WebViewJa...原创 2020-01-10 17:25:56 · 2303 阅读 · 0 评论 -
关于vue spa项目首次加载网速慢的时候会有空白页情况的问题以及include.js引入html里的js无法加载的问题
在未编译的index.html里和id=app的那个div平级加个loading,图片或者文字,然后在首页的.vue文件里,mounted的时候用document.body.removeChild(document.getElementById('loading'));把那个div移除掉就ok了。但是这样又有个问题,页面会优先加载和解析vendor.js,manifest.js,app.js...原创 2020-01-08 16:05:02 · 601 阅读 · 0 评论