Vue+iView爬坑系列
bdlaxx
这个作者很懒,什么都没留下…
展开
-
Vue监听键盘事件(回车、空格、删除等按键)
https://www.cnblogs.com/gitByLegend/p/10864944.html转载 2020-05-13 10:17:34 · 14715 阅读 · 0 评论 -
vue中设置height:100%无效的问题
https://blog.csdn.net/weixin_34150503/article/details/88764857https://blog.csdn.net/update7/article/details/80616742转载 2020-01-25 14:47:55 · 1919 阅读 · 0 评论 -
Promise链式调用以及中断的方法
promise的基本使用方法https://www.jianshu.com/p/3023a9372e5f有时候会遇到这样一种场景,需要中断链式调用,弹出提示框,然后等待用户进行相应的操作之后再继续刚刚的链式调用,目前想到的解决方案是:使用一个标志位,第一次调用promise的函数时,将其中断,然后等待用户进行相应的操作,然后再调用包含promise的函数,这个时候标志位能够起到作用,不再中...原创 2020-01-10 17:15:44 · 1611 阅读 · 0 评论 -
vue + typescript使用过程中报Property 'xxx' does not exist on type 'Vue'错误
在使用ts的过程中发现,父组件调用子组件方法的时候this.$refs.chlid.chlidMethod()发现vscode报错Property 'chlidMethod' does not exist on type 'Vue的情况,但是实际上运行效果完全没问题。主要原因是vscode会根据声明文件自动进行类型推断的,这里没法知道childMethod的类型因此,如下即可...原创 2020-01-10 10:40:53 · 23863 阅读 · 4 评论 -
iView中Drawer抽屉使用过程中遇到的问题(draggable )
iView官方apihttps://www.iviewui.com/components/drawer#API在使用的过程中发现如果使用了抽屉的draggable功能进行抽屉的宽度调整,再次打开抽屉,其宽度变成了调整后的宽度。在多处地方调用抽屉的情况下,设置宽度的初始值不再有效。解决方案如下<Drawer :closable="true" :mask-cl...原创 2019-12-25 21:02:22 · 5465 阅读 · 0 评论 -
简单理解Vue中的nextTick
https://www.jianshu.com/p/a7550c0e164f转载 2019-12-25 20:48:35 · 174 阅读 · 0 评论 -
分页加载
https://www.jianshu.com/p/7078fa6bb83d自动滑动到底部https://blog.csdn.net/aydongzhiping/article/details/81017367转载 2019-12-23 20:24:50 · 259 阅读 · 0 评论 -
Vue通过background:url 引入静态图片失效
例如<div :style="{background:'url('+img.url+')',backgroundSize:'100% 100%'}"> ......</div>.......img:{ url:'../../assets/bg.png', name: 'bg'}发现设置背景失败了,图片加载不出来,主要原因是bac...原创 2019-12-20 16:59:07 · 17991 阅读 · 0 评论 -
vue input中输入中文时提起触发@input事件的原因与解决方法
https://blog.csdn.net/h841440416/article/details/90782091转载 2019-12-17 20:10:04 · 3405 阅读 · 0 评论 -
vue中使用防抖与节流
https://www.cnblogs.com/fozero/p/11107606.htmlhttps://www.cnblogs.com/yalong/p/10556665.html在链接一的基础上,注意timer要放到防抖或者节流函数外面可能的失效原因https://blog.csdn.net/qq_27627195/article/details/100099357...转载 2019-12-03 21:00:05 · 755 阅读 · 0 评论 -
Vue多个路由复用同一个组件时造成跳转时公共组件created等方法不执行的解决方法
官方文档说明:https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html解决方案:1).将公共组件的created方法放入到一个新的函数中,例如 init()2).使用@Watch监控路由, @Watch($route)3).在created和watch里面分别使用 init()函数即可例如...原创 2019-11-08 17:37:12 · 1712 阅读 · 0 评论 -
Chrome谷歌浏览器调试工具使用
使用介绍:https://www.cnblogs.com/yaoyaojing/p/9530728.html技巧:https://www.jianshu.com/p/578168d04d32转载 2019-11-06 16:59:29 · 294 阅读 · 0 评论 -
vue/no-use-v-if-with-v-for] The 'columns' variable inside 'v-for' directive should be replaced with
在Vue中使用v-for循环一个数组/对象时,如果再使用v-if,那么会提示使用计算属性(能正常使用),因为Vue中是不提倡v-for与v-if同时使用的。转载 2019-11-04 14:44:20 · 18153 阅读 · 0 评论 -
vue中使用Swiper
https://github.com/surmon-china/vue-awesome-swiperhttps://blog.csdn.net/qq_35775675/article/details/82285041如果需要把左右两个箭头放到外面,可以设置padding,例如padding:0 40px...原创 2019-10-28 20:09:04 · 443 阅读 · 0 评论 -
Vue使用@导入不考虑层级,import xxx from ‘@/xxx’
https://blog.csdn.net/qq_34645412/article/details/78974654转载 2019-10-24 20:36:11 · 1216 阅读 · 0 评论 -
Vue.set的使用
https://blog.csdn.net/qq_37339364/article/details/82750947https://www.jianshu.com/p/e6e8c45e7fd6转载 2019-10-18 10:48:53 · 128 阅读 · 0 评论 -
vue component 内置组件
https://blog.csdn.net/weixin_42333548/article/details/80532919?utm_source=blogxgwz0转载 2019-10-16 20:15:13 · 764 阅读 · 0 评论 -
vue中获取DOM的方法
vue1.*版本中在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素例如:<div class='box' v-el: myBox>你好</div>让你好的颜色显示为红色:this.$els.my-box.style.color = 'red'vue2.*版本中在标签中加上ref='dom',然后在代码中this....原创 2019-06-02 19:48:00 · 13610 阅读 · 0 评论 -
Vue+SpirngBoot 实现单文件和多文件的上传
前端使用Vue,后端使用SpirngBoot,实现通过网页上传单个文件或者多个文件到后端服务器一.单个文件上传html部分<input class="file" name="file" type="file" @change="update"/>js部分update(e){ let file = e.target.files[0]; ...原创 2019-08-15 10:49:01 · 687 阅读 · 0 评论 -
常用Content-Type
https://blog.csdn.net/jiandan1127/article/details/89214225转载 2019-08-15 15:17:32 · 152 阅读 · 0 评论 -
谷歌前端页面的同一个文件不能上传两次的解决办法
谷歌浏览器,file input出于安全角度,用户异步上传完毕文件后选择相同文件时,不会触发onChange函数,因此再次上传相同的文件时会失败。解决方案:在上传失败或上传成功的回调中将 input type=file的value清除...原创 2019-08-15 15:25:19 · 914 阅读 · 0 评论 -
Vue批量下载文件
如果不需要打包,只需要弹出多个下载框,参考https://blog.csdn.net/weixin_40923145/article/details/84107444如果需要打包成压缩文件,参考https://www.mmxiaowu.com/article/59b23f5d5b06a403cf687ed6https://blog.csdn.net/qq_38377774/arti...转载 2019-08-27 16:41:03 · 2404 阅读 · 0 评论 -
Vuex的学习与使用
官方文档:https://vuex.vuejs.org/zh/installation.html参考资料:https://segmentfault.com/a/1190000015782272?utm_source=tag-newest转载 2019-09-03 22:44:12 · 105 阅读 · 0 评论 -
Vue项目打包后放入SpringBoot
参考地址:https://cli.vuejs.org/zh/config/#publicpathhttps://www.cnblogs.com/kevinZhu/p/9931317.htmlhttps://www.cnblogs.com/qianjinyan/p/11001906.html放入SpringBoot的resources后,直接在浏览器输入http://localhos...转载 2019-09-09 11:54:33 · 7161 阅读 · 0 评论 -
vue使用axios上传文件时实时更新进度条
https://segmentfault.com/a/1190000012487177转载 2019-09-16 10:56:55 · 3791 阅读 · 0 评论 -
使用 vue + typescript 编写页面时使用装饰器
https://juejin.im/post/5c662a7de51d4562e71c4277https://juejin.im/post/5c662a7de51d4562e71c4277转载 2019-09-27 16:21:09 · 254 阅读 · 0 评论 -
Vue封装组件
参考地址:https://segmentfault.com/a/1190000015373435?utm_source=tag-newesthttps://www.cnblogs.com/dudu123/p/10509787.htmlhttps://www.cnblogs.com/pengfei-nie/p/9134367.html转载 2019-08-14 14:15:35 · 413 阅读 · 0 评论 -
使用Vue-cli 3.0搭建Vue项目
参考:https://blog.csdn.net/xuqipeter/article/details/80452271https://www.jianshu.com/p/6307c568832d配置文件:https://segmentfault.com/a/1190000017008697https://blog.csdn.net/qq_36407748/article/detai...原创 2019-07-23 15:30:20 · 225 阅读 · 0 评论 -
VueCookies的使用
https://www.npmjs.com/package/vue-cookieshttps://www.jianshu.com/p/535b53989b39转载 2019-06-20 15:27:19 · 3453 阅读 · 0 评论 -
vue中添加标签页title中的小图标
小图标素材地址:https://www.iconfont.cn/添加的方法://webpack.prod.conf.js中添加如下代码const path = require('path') ; .....new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.htm...原创 2019-06-20 15:07:00 · 9992 阅读 · 0 评论 -
Vue使用bus总线时,第一次路由跳转时数据没成功传递的原因以及解决办法
bus总线是vue中路由跳转传递数据的常用方法,适用于传递数据不多的情况,但是在使用的过程中发现,bus总线在第一次路由跳转的时候总是不能够成功传递需要传递的数据。检查bus的配置以及调用方法,均没有出错,错就错在没有理解Vue的生命周期!!!我们知道bus的$on的监听应该位于$emit之前,如果在emit之前没有创建监听事件,那么肯定是得不到需要的数据。因此,我通过两个页面来了解路由跳转时...原创 2019-06-16 11:42:02 · 4859 阅读 · 5 评论 -
利用iview里的page组件实现分页功能
iview的经典组件中有一个page组件,可以实现内容的分页功能,但是官方文档中所给的内容较少,没有具体讲如何将内容分页。具体的分页功能参考如下:https://segmentfault.com/a/1190000010392169<template> <div> <Table :columns="historyColumns" :dat...转载 2019-06-04 15:03:11 · 8486 阅读 · 0 评论 -
使用bus实现组件之间的通信
实现各个组件之间(父子,兄弟)的通信可以使用vuex和bus事件总线,使用bus总线实现通信的方法如下:参考资料:https://www.cnblogs.com/shj-com/p/10337782.htmlhttps://www.cnblogs.com/wenxuehai/p/10509839.html我采取了将Bus抽离出来,import Vue from 'vue'c...原创 2019-06-04 14:59:39 · 2508 阅读 · 1 评论 -
使用v-for循环展示多张图片,并且标记选中的图片
因为项目需求,需要使用v-for展示多张图片,并且供用户选择其中一张,当用户选中一张图片的时候需要改变该图片的样式,来反映用户的选择。由于刚学vue,踩了好多坑,因此作以下记录,以时刻提醒自己:1.一开始我打算将图片嵌入button中,但是这样存在的问题,由于是用v-for循环列出的一系列button,每一个button的id或者class名字都是一样的,就算能够知道用户点击图片的in...原创 2019-06-02 21:18:24 · 10529 阅读 · 2 评论 -
vue使用axios上传图片
参考:https://www.cnblogs.com/rachelch/p/8462877.htmlhtml部分,可以把input file的opacity设置为0,点击其父容器,即触发file<input class="file" name="file" type="file" accept="image/png,image/gif,image/jpeg" @change="up...转载 2019-06-13 19:24:13 · 13214 阅读 · 1 评论 -
vue使用axios实现通信时的跨域问题
跨域问题:参考:https://segmentfault.com/a/1190000015597029?utm_source=tag-newest拦截器:https://www.jianshu.com/p/646ed4edf51f跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上,无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试,我每次都随便背几个方案,也不知道为什么...原创 2019-06-06 17:31:17 · 499 阅读 · 0 评论 -
Vue+Cropper实现图片的裁剪等一系列界面交互功能
参考:https://fengyuanchen.github.io/cropperjs/https://www.cnblogs.com/linxiyue/archive/2019/01/18/10288490.htmlhttps://www.jianshu.com/p/4644a626ef9ahttps://www.cnblogs.com/tugenhua0707/p/885929...原创 2019-06-12 16:48:38 · 1151 阅读 · 0 评论 -
vue设置延时
参考资料:https://blog.csdn.net/zc_ad/article/details/86235227一定要创建一个timer,然后调用延时之前先清除timer的延时clearTimeout(this.timer); //清除延迟执行 this.timer = setTimeout(()=>{ //设置延迟执行 console.log('ok');}...转载 2019-06-05 15:47:13 · 55062 阅读 · 0 评论 -
iview中form表单的验证规则
验证规则的官方说明:https://github.com/yiminghe/async-validator大概总结如下:参考网站:https://blog.csdn.net/ddwddw4/article/details/89216594https://www.jianshu.com/p/ef97dbf4fcfe内容:1. 支持的基本类型<FormItem...转载 2019-06-05 10:04:16 · 4968 阅读 · 0 评论 -
iview的menu组件的高亮部分动态绑定路由跳转的页面
menu组件的高亮部分反映的是当前的页面,但是当前页面会跳转到另外一个页面,相应的高亮部分也应该随着跳转。menu组件中有一个active-name反映的是当前高亮区域,因此可以动态的绑定active-name,来实现目的。参考资料:https://segmentfault.com/q/1010000017914052假设有A,B两个页面,页面配置的路由name叫A和B,将MenuIt...原创 2019-06-04 17:16:48 · 4593 阅读 · 0 评论