Vue
tomorrownan
Hello,tomorrownan.
展开
-
element-ui的table表格控件表头与内容列不对齐问题
背景:今天偶然发现饿了么的表格组件表头和内容列有点错位。如下:解决将下列样式代码添加到index.html、或app.vue中(必须是入口文件,起全局作用!).el-table th.gutter{ display: table-cell!important; }问题已经解决,如下:...原创 2020-04-17 09:52:05 · 1866 阅读 · 1 评论 -
Cannot read property 'disabled' of null 问题解决
使用vue-element框架的后台管理项目一直报Cannot read property ‘disabled’ of null 问题,截图如下:1. 问题定位看了下代码,找了很多解决方案,最后发现是因为注释了el-dropdown-menu下的代码,如下:因为不需要显示右上角图标,所以把那一部分代码注释了。引起了一直报上述错误,在页面中使用了el-dropdown,但是在这个标签里面没...原创 2020-04-15 16:44:28 · 19261 阅读 · 5 评论 -
axios请求“跨域”的解决方案
背景:困扰了好几个小时的问题。启动项目后,页面内容如论如何都不出现,接口没有请求成功。看了一下控制台报了下面错误。Access to XMLHttpRequest at 'xxx' from origin 'xxx' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header ...原创 2020-03-06 19:09:53 · 8969 阅读 · 0 评论 -
Error: Cannot find module 'webpack-cli/bin/config-yargs’解决方案
年前的项目启动一直没有问题,一个月没有维护,一个月后再次npm run dev 启动时,命令行报错Error: Cannot find module 'webpack-cli/bin/config-yargs'解决方法探索首先我本地package.json中对应版本信息如下:有网经说是webpack3.x版本和webpack-dev-server3.x版本不兼容,但是我这webpa...原创 2020-03-05 19:01:31 · 40067 阅读 · 32 评论 -
刷新页面:provide和inject的使用
provider/inject依赖注入:在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。vue中使用方法在App.vue中定义provide函数。比如我这里的刷新页面的方法。<template> <...原创 2020-03-03 10:52:15 · 418 阅读 · 0 评论 -
根据菜单权限实现动态路由遇到的几个奇葩问题:1.cannot read propery 'range' of null 2.cannot find module
问题:1.cannot read propery ‘range’ of null2.cannot find module ‘@/views/xxxxx’,(由两种现象引起)背景在使用vue-element-admin模版的后台管理系统中,根据菜单权限实现动态加载路由,在把从后端接口取到的菜单拼接成前端路由需要的形式时遇到了以下几个问题。问题1与解决方法问题截图解决方法这个...原创 2020-02-21 10:27:33 · 939 阅读 · 0 评论 -
elementui:date组件将当前月份放在右侧
背景:公司要求展示今天之前的数据,使用picker-options的disabled把当前天后面的日期屏蔽掉,但是这样就出现一个展示问题。当前月份在左侧,右侧月份均不可以选择,非常不美观,如下。于是要把当前月份放在右侧显示。解决方法使用default-value属性设置默认日期。如下:<el-date-picker v-model="timeRange" type="date...原创 2020-02-19 10:19:56 · 1942 阅读 · 2 评论 -
vue-admin:oauth2.0单点登录实现
背景:现在有一个需求是客户要求使用oauth2.0方式的单点登录进入系统,原先我们都是使用cas方式的单点登录。这里整理下代码:1.oauth2.0分为4个步骤:获取第三方token。为了安全性(不暴露第三方token和secretKey),c此处是后端对第三方提供的API进行处理,前端只去公司后端提供的接口中拿token。拿到第三方token后,跳转到第三方认证平台。跳转到第三方...原创 2020-01-14 20:56:05 · 4698 阅读 · 0 评论 -
手写v项目中横向类tab(可展开与收起)功能
背景:在本次项目需求中涉及区域名称的展示,点击更多可以展开和点击收起即收起。项目框架:vue。设计如图:展开:element也有tab标签组件,有类似效果,这里决定自己手写一个原生的,点击事件也好控制。新建一个view页面,可以封装组件,再有其他地方使用时就可直接用。HTML部分1.展开与收起的动画是采用在点击事件中改变状态,根据不同状态写不同的样式来实现的。2.点击事件中传...原创 2020-01-11 12:43:39 · 1024 阅读 · 0 评论 -
el-upload删除上传的文件: error in v-on handler TypeError: reqs[uid].abort is not a function
问题:使用elementui的el_upload组件上传文件,但是点击叉号上传的文件无法删除。报错如下:分析:查看源码的时候会发现http-request 这个传入的回调函数返回一个Promise。const req = this.httpRequest(options); this.reqs[uid] = req; if (req && req.then) {...原创 2020-01-03 14:21:09 · 4500 阅读 · 0 评论 -
vue-element-admin路由切换到添加或编辑页面后实现侧边栏高亮
背景:使用vue-element-admin的后台管理系统。添加和编辑页面使用路由跳转的方式切换,但是切换到添加页面后,添加功能所在页面对应的侧边栏不会高亮显示。如图当点击添加或者编辑按钮以后,左侧菜单不再高亮。分析:原模板中使用:default-active="$route.path"实现侧边栏的高亮。default-active指当前激活菜单的索引。因为这里添加和编辑页面路由的path...原创 2019-12-30 16:56:34 · 6495 阅读 · 4 评论 -
表单验证:多个upload上传图片验证,并且上传成功后清除提示信息
在加上表单验证以后,必填项不填会有提示信息。像一般的input输入框,有正确内容输入后提示信息就会自动消失。但是el-upload上传图片以后提示信息依然还在。如下:解决方法在文件上传成功时的钩子函数on-success定义的方法中写一句清除验证器的代码既可以实现。如下代码:验证规则:上传文件成功的钩子函数定义的方法写上下面关键的一句上传图片后提示信息就已经清除:效果:...原创 2019-12-17 15:34:51 · 2382 阅读 · 1 评论 -
element手动点击修改走马灯的播放索引
背景:项目中需求改成上方展示小区列表,下方是各校区数据的柱状图轮播,轮播到该校区时上方校区高亮。但是点击某一个校区也要展示该校区对应的柱状图,这里就用到了手动修改走马灯的播放索引。思路:element官方提供了setActiveItem方法,调用此方法可以改变当前播放的幻灯片。使用方法如下:<div class="bottom-box-right"> <div cla...原创 2019-12-13 21:15:43 · 4709 阅读 · 0 评论 -
"TypeError: Cannot read property 'xxxx' of undefined"报错的情况分析
报错如下:原因1模板渲染时出现问题,因为渲染的时候还没有拿到数据。又或者是后台返回的数据没有此字段,渲染时却使用了此字段。如下:为了重现报错,上述第二段删掉了v-if判断,因为后台接口返回的数组对象中只有一项(我以为是固定的三项,有时候接口返回会不规范),funnelData[1].count中的count就会未定义。添加上判断就不会有问题了。如下代码解析:原因2未初始化,就是没...原创 2019-12-12 22:19:20 · 4737 阅读 · 0 评论 -
input中type="number"类型去除上下箭头和禁止滚轮滚动改变数值
背景:在vue做后台管理系统项目中,会有一些表单需要验证,比如只能输入数字。有一种解决方法就是使用type="number"。由此也遇到了下面两个问题:1. 去除上下箭头写上type="number"后输入框右边会有上下箭头,影响视觉体验。可以使用下面方法去除:<style> input::-webkit-outer-spin-button, input::-webki...原创 2019-11-11 20:47:03 · 5535 阅读 · 2 评论 -
封装函数:数组对象中去除相同ID的项、递归找到所在ID的所有父级元素
记录下项目开发中遇到的两个实际需求。1.数组对象中去除相同ID的项从后台接口拿到的数据格式是数组对象,但是会存在前后调用同一个接口数据项重复的现象。导致页面中数据显示有重复的。所以在从接口取到数据以后,去除数组中有相同项的对象。比如我从接口拿到的数据如下:list: [ { mapcode: 7, name: '快鱼', price: 2 }, { mapcode: 8, na...原创 2019-11-05 21:23:54 · 2158 阅读 · 0 评论 -
vue:动态菜单只有一个子菜单时父级菜单不显示问题
使用vue-admin-template后台管理模板的项目中使用了动态路由,就是显示后端接口返回的路由。第二次遇到父级菜单不显示的问题,第一次解决的方法没有记录,便又思考了一会。这里记录下。父级菜单下有多个字菜单的父级都可以正常显示,只有父级下是一个子菜单的父级菜单不显示。所以断定是因为只有一个子菜单,父级隐藏不显示属性引起的。在处理从后台接口拿到的菜单数据时设置alwaysShow: true...原创 2019-10-29 22:08:02 · 8350 阅读 · 2 评论 -
Vue组件与通信:6个实例解析组件应用
在使用Vue技术栈开发项目时,必不可少的会用到组件,不得不说,Vue的组件功能特别强大,使整个项目功能模块及各种view页面分类井井有条,对于我这种看到大堆代码就急躁的人很是友好了。本文目录1.Vue组件2.组件注册(全局和局部)3.动手创建一个组件4.组件的prop属性应用(静态动态和传值类型)5.子组件向父组件传值(待续)6.slot插槽(待续)7.自定义事件(待续)1....原创 2019-03-29 17:13:03 · 1006 阅读 · 0 评论 -
Vuex一站式学习与应用
看到这里是不是有些开心,终于要结束了,看到vuex说明对Vue已经有了一些了解。vuex是Vue官方的一款状态管理工具。采用集中式存储管理应用的所有组件的状态,很是强大。文章结构:1.Vuex使用场景2.Vuex状态管理模式3.vuex一站式应用(state,getters,muattions,actions)4.Module5.严格模式6.项目结构1.Vuex使用场景为什么...原创 2019-04-11 20:19:17 · 557 阅读 · 0 评论 -
运行Vue项目浏览器报“Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2__router__.a is not a constructor”解决方法
1.问题描述使用webpack构建Vue单页面应用项目,项目运行时,浏览器报“Uncaught TypeError: WEBPACK_IMPORTED_MODULE_2__router.a is not a constructor”,组件中的内容也不能正常显示,<router-link :to="{path:'animal'}">to animal</router-link&...原创 2019-04-08 18:01:12 · 26903 阅读 · 1 评论 -
vue-router八个重要知识点应用图解
路由就是根据不同的地址跳到不同的页面。说到前端路由不得不提单页面应用。单页面应用页面进行切换时,视觉上感觉是页面的切换,单其实页面一直没有刷新。只是通过js让页面看起来像是到了另外一个页面。Vue Router是Vue.js的官方路由器。它与Vue.js核心集成,使得使用Vue.js构建单页应用程序变得轻而易举。本文讲解功能如下:1.安装2.路由如何应用的3.路由参数4.路由嵌套5....原创 2019-04-09 17:31:24 · 2351 阅读 · 0 评论 -
vue制作幻灯片时涉及的transition动画(动图)
幻灯片使用频率很高,就是各个网站的轮播大图。为了使图片更加平滑的过渡,就考虑给幻灯片加上transition动画。先看实现的效果,然后再分析动画原理。上图可以看出,幻灯片是慢慢的滑出来,而不是一下一下的跳出来。1.transition动画原理Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡。条件渲染 (使用 v-if)条件展示 (...原创 2019-05-02 17:14:03 · 2007 阅读 · 0 评论 -
商城项目商品列表页的渲染实现(含动图)
有了v-for循环,渲染商品列表简直不要太方便了,以前写一个商品列表页要一天,现在只需要几分钟,除了模拟数据会耗一点时间。这里可以了解下Mock模拟数据,它可使前端工程师独立于后端进行开发,在前端可以先行自己测试,之后再与后端对接联调,可以节省不少的时间。所谓孰能生巧,vue构建项目联系的多了以后也可随意的封装组件,抽离组件。用起来得心应手。实现效果动图如下:商品列表页的实现步骤如下:1...原创 2019-05-20 20:13:52 · 3319 阅读 · 0 评论 -
商城项目登录功能实现(动图)
导语去年上传了重构小米官网商城的首页,但是没有登录注册功能。不论是js原生方法实现,还是jq和vue等框架实现,个人认为是大同小异,思路是一样的。在使用vue构建数字商城的项目中使用vue也实现了登录功能,点击登录跳转到登录页面是使用vue-router实现的,登录页面事使用html、css实现,登录验证功能使用表单、v-model和正则表达式实现。先看实现的功能如下:演示的有些快,可能...原创 2019-05-16 19:14:27 · 3329 阅读 · 0 评论 -
vue商城购物车功能开发(含动图)
购物车不管实在众多的电商网站还是手机APP中都很常见,它的实现逻辑也是相对复杂的。购物车作为组件开发,在其他应用或者页面也可以拿来直接使用。包含如下功能:购物车模板商品数量加减商品总价结算商品删除商品全选反选实现效果如下:1.购物车页面模板实现引入bootstrap购物车的页面不再使用html一点点的写,这里使用bootstrap,比较节省时间。所以要引入bootstr...原创 2019-05-22 20:56:55 · 5180 阅读 · 8 评论 -
element:常见用法总结(前后台常见问题与自定义表单验证)
后台给的状态是使用12345状态码表示的,前端要把它转成对应的状态文字。这里使用element-ui的table为例,代码如下:<el-table-column label="审核结果" align="center"> <template slot-scope="scope"> <span v-if="scope.row.authStatus === ...原创 2019-09-11 11:18:55 · 1659 阅读 · 0 评论 -
vue实现富文本编辑器(附图)
工作项目中涉及到富文本编辑器的使用,这里我使用Vue-Quill-Editor插件实现了一个基本具备设计图上功能的编辑器。下载Vue-Quill-Editornpm install vue-quill-editor --save 安装 vue-quill-editor 插件。注册使用插件在main.js中写如下代码:import VueQuillEditor from 'vue-...原创 2019-09-15 22:59:29 · 2308 阅读 · 2 评论 -
后台管理项目blob导出文件乱码解决方案
项目中需要导出文件,使用blob对象方法导出文件成功,但是打开文件就是乱码,有时甚至打不开。导出代码如下:handleExport() { //exportFlie是调用接口的方法,如下: //export function exportFlie(data) { //return request({ //url: '/xxxx/v2/xxxxx', //method...原创 2019-09-17 21:01:30 · 3675 阅读 · 2 评论 -
vue报错:Uncaught (in promise) TypeError: (0 , _auditorMange.default) is not a function解决
到了下班时间,脑袋越来越晕,犯得错误也越来越多。调用后台接口时,就发现了如下错误,虽然没有耽误太多时间来解决,还是很有必要记录下来。报错如下:这里vue文件中定位的行数也是不准确的。原因分析:脑袋不思考,ES6掌握不扎实。导致API引入时 没有带花括号引起该错误。错误截图如下:接口定义:解决:按如下形式调用,不再报此错。...原创 2019-09-24 18:33:22 · 45424 阅读 · 7 评论 -
前端开发资源收藏
VSCode拓展推荐https://github.com/varHarrie/varharrie.github.io/issues/10vue-element-adminvue-element-admin是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的...原创 2019-09-28 13:47:48 · 220 阅读 · 0 评论 -
Vue:数据双向绑定和v-系列指令
Vue.js是当下最火的一款前端框架了,学习的时候要多动手实践以帮助理解。我是通过例子来学习的,这样记的快一些。目录:Vue.js介绍如何引入Vue?何为声明式渲染?如何实现?文本插值{{message}}v-htmlv-modelv-bindv-ifv-showv-forv-on1.什么是Vue.js?Vue.js官方网站的解释:Vue.js(/vjuː/)...原创 2019-01-23 20:18:22 · 1598 阅读 · 2 评论