element 表单重置无效 resetForm resetFields
这个原因是因为没有设置prop,需要设置一个prop即可。个人测试,form的rules绑定一个空的{}对象,prop随便设置,也是可以使用的,表单重置正常。//重置表单 resetForm(formName) { this.$refs[formName].resetFields(); },
环境变量的使用,一般就是替换一下api的url链接,或者是一些其他设置。比如:本地测试的时候,你使用的api链接是test.xxx.xxx;而正式上线后,要求改为:formal.xxxx.xxx这样的话,如果你不使用环境变量,每次打包的时候都需要手动修改默认的api地址段。非常麻烦,如果你有更多的需求,比如有好几个api应对不同的平台,哦豁,那就真的吐血。如果使用了环境变量,我们只需要创建一个env文件,然后设置一个固定的值,打包的时候指定使用该env文件,api的获取自动拿到env文件里面设置的值,这样就不用每次都要手动修改了。知识点1. 文件名的命名.env文件是存放在项目根目录,和...
最近发现了element主题的一个知识点,应该可以方便大家。前提项目里的组件都是按需导入,然后要求使用自定义主题,但是设计师只给了一个官方在线主题生成工具生成的主题zip包。这个主题压缩包打开发现只有一个index.css,一个font文件夹,一个config.json文件。css文件大概会有200kb以上。而我们的按需引入是引入一个组件,就会引入对应的样式文件,他不会一口气引入所有的样式,但是如果要使用自定义主题,index.css又不得不引入,导致按需引入达不到理想状态。我们现在就要解决这个css的问题。思路打开config.json文件,你可以看到一些键值对,仔细看一下,你可以发现...
最近遇到如题的一个需求,因为很常用,所以我把它记录下来,方便以后使用。流程用户正常使用时,或者后台刷新了缓存,导致登录超时或者失效,前端api请求得到一个信息,比如code=10010,那么就表示用户登录信息失效了,前端页面就需要提示用户登录失效了,需要重新登录。用户点击确认后,我们删除本地token,然后路由跳转。跳转之前我们需要记录当前的路由,这样用户登录成功后可以跳转回来,体验极好。233...流程示意:登录失效 --> 前端api请求时得到code=10010 --> 弹出提示窗口 --> 用户点击 重新登录 --> 清除token --> ...
超烦有没有,触发一次事件它就提示一次,洁癖的我今天就告诉你们怎么处理掉这个问题。警告提示 Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952大概就这么一段提示,只要是touchu事件你阻...
跨域一直是很烦人问题,不过好现在现在跨域,大部分都是肛后端,后端设置CORS信息即可。但是也有少部分,可能前端能完成的事前端搞定就行了,懒得麻烦后端,这种情况一般都是进行反代。使用场景后端提供了一个在线api地址,但是该地址段和本地localhost不在同一域名下,所以产生了跨域。配置反代 proxy这种情况,我们的vue-cli提供了一个很好的功能,反代。首先我们需要找到vue cli的配置文件:vue.config.js,他存在项目的根目录,和package.json同级,如果没有,手动创建即可,只是一个js文件而已。打开文件填入以下信息:vue.config.jsmodule.ex...
有时候我们可能经常需要对某一些模块进行引用,这些模块虽然都分文件夹了,但是他们都有一个共同的特点,就是前缀路径是相同的。比如:import Header from "@/components/default/Header"; import Sidebar from "@/components/default/Sidebar";@/components/default这段是相同的,如果文件目录再深一些,这段代码可能在编辑器里无法一行显示了,相对来说,对于代码整体,不是很友好,所以我们可以自定义一个路径别名。@这个别名我们都知道,他是表示src目录的,...
这个应该有点追求都想要做到的事情吧,都希望每次刷新页面,页面的导航栏能够自动高亮,二级菜单的话就自己展开。我想了好久,今天无意间测试到了,特此分享。[hide]思路首先我们要知道NavMenu 导航菜单他的选项菜单是有一个必填属性index的,这个index要求类型必须为string格式。然后根元素el-menu他有一个默认选中的属性default-active,而这个属性刚好要对应index。而el-menu的这个属性是可以自动展开菜单的,即便这个index可能是二级菜单的index。他依旧可以做到展开的效果,并且高亮对应的选项。所以,我们现在的重点就是这个index怎么设置,怎么获取...
最近遇到一个需求设计一个开发的环境,由于产品本身很庞大,所以需要划分区域开发,每个人负责一个部分,但是又不太想使用官方的那种资源分布的模式,想独立开发,最后整合,且不相互干扰。于是有了这个。[hide]具体要求需要将每个分类单出拆分为一个独立的项目模块,里面有路由、vuex、组件、单页、静态资源等目录。例如:商城:购物车、订单页、商品页、设置页...文章:新建文章、文章列表、修改页、标签页...由于这种分类非常多,所以需要将类似商城、文章这些作为一个模块,每个小组负责一个模块开发,开发vue文件,组件、vuex、路由、静态文件、导航菜单都单独拆分,自己这个项目写一个入口文件,用于资源的调...
传统的vue组件切换,无非是Vue.component定义一个组件,然后设置一个名字,再通过component自定义html元素加上is属性去动态切换组件。vue-cli的话,在components里面将import的组件激活,然后也是is属性配合component自定义html元素进行切换。那么异步组件的优点在哪里呢?无非是组件会作为一个单独的js文件存在,需要时才被调用,这个特性再开发单页的时候最明显,他是会在打包后将异步组件单独生成一个js文件,在调用时下载并使用。如何创建一个异步组件Vue.component创建异步组件这个方法适合script引入vue.js的那种方式,估计也用...
一直想找一个动效,因为以前一直都是使用mode="out-in";这种一般也就fade这种动效好看,如果要更好看一点,就需要花点心思了。效果原理通过给每个路由的自定义属性meta设置一个层级,第一层,第二层,第三层,也可以理解为第一页,第二页,第三页。然后通过这个层级关系判断页面是往左还是往右。源码[hide]vue<template> <div id="app"> <transition :name="transitionName"> <keep-alive&g...
这个问题一般是出现在在路由鉴权的功能上。我们在路由守卫里面判断,当用户已经登录了,点击进入访客页,那么在进入之前我们next({name:"Home"})跳转到首页。然后就会报错:Error: Redirected from X to Y via a navigation guard.百度和谷歌找了好久,很多人都说是代码里面重定向过多,拜托,这种应该是键盘侠,如果真的过多,早就解决问题,还问个鸡腿。首先这个问题大部分都是出现在vue-router v3.1及以上的版本我觉得可能是插件的问题,因为出现这个问题的提问时间基本都是这两个月内出现的。唯一的解决办法就是降级,将...
按照官方的教程,在main文件中引入自定义的less文件,在这个前提下,我们需要less语言解析yarn add less less-loader --dev安装完我们main引入自定义的less文件,结果启动的时候出现错误:Inline JavaScript is not enabled .bezierEasingMixin();这个错误一般是因为新版本less带来的,你可以换旧版,比如5.0的版本我们在项目根目录找到vue.config.js文件,没有你就创建这个文件填入以下:module.exports = { css: { loaderOptions: {...
最近写项目遇到一个问题,很头疼,几天了,问了好些大佬,都没有找到问题的解决方案,但是,最后还是被我找到了,可喜可贺...问题有一个home页,home页里面有router-link元素进行子路由切换,为了减少资源损耗,所以直接使用了keep-alive进行路由页缓存,假设有三个子路由abc,a路由页面有两个子路由a-1和a-2,默认是a-1显示。当我们进入到a路由是,默认显示a-1,然后我们切换到a-2,然后路由push返回到home页,再次进入到a页面时,你会发现,a路由此时显示的a-2而不是a-1,但浏览器地址是a-1的地址,此时,我们可能没办法切换到a-1了。问题图为什么主要因为k...
keep-alive之前也用的比较玄学吧,后来发现,keep-alive只能缓存当前级页面,也就是说:如果keep-alive缓存了A和B这些同级的路由页面或者组件,那是没问题的,但是如果A页面下还有子级路由或者子组件切换,由于嵌套太深,一般是缓存不到的,所以又需要使用一次keep-alive。但是在使用keep-alive的时候遇到一个问题啊,这个问题很烦。虽然keep-alive缓存后,页面的滚动条位置也会相对应的缓存到,但是,正因为这个位置问题,导致A页面如果滚动了,在进入他的子路由页面的时候,子路由页面的滚动条位置会和A页面保持一致,这就很头疼了。找了半天发现一个绝妙的方式:me...
安装npm install --save-dev webpack-bundle-analyzer配置webpack.base.conf.js没有这个文件就手动创建,和package.json文件同级别module.exports = vuxLoader.merge(webpackConfig, { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: "server", analyzerHost: "127.0.0.1", analyzerPort: ...
keep-alive作为vue的缓存标签,有时候也会遇到一些问题,比如,某些页面我们不想缓存,以前的办法基本都是使用一个v-if然后判断路由的meta标签里面属性设置。但现在不一样了,以前的那种方法并不适合现在了,因为keep-alive自带了黑名单和白名单,在白名单中的路由或者组件将会缓存,黑名单中的则不会缓存。例子 <keep-alive include="a,b" exclude="c,d"> <router-view/> </keep-alive>多个组件用英文逗号隔开,单个就写...
用Layout的时候,我设置的是一行三个元素显示,但是有时候,遍历的对象可能无法满足一行三个显示,结果发现col元素会把拉伸一部分宽度。这就很尴尬了,我在使用其他框架的这种布局的时候都没遇到这种情况,没办法,只能用死办法,我给你补上几个空col了那么,如何计算需要补充几个呢?假设我们要遍历的数组名为:oneArr创建一个计算属性:fillArr() { const remainder = Math.ceil(this.indusArr.length % 3); if (remainder !== 0) { return 3 - remainder;...
以前的我,很喜欢用vuex来做一个元素的开关存储,因为简单粗暴,我不用考虑组件之间要怎么才能传参,怎么去更新,只需要设置一个变量,getters获取,mutations设置一下,一个开关变量就做好了。但是随着东西越来越多,我发现,vuex重复书写的代码非常多,我觉得这应该是以后vuex优化的一大方向,所以,我有点不太想用vuex来存储所有组件的开关状态了。于是我想到了props,父组件向子组件传参的方式传替布尔值开关。再利用sync修饰符,通过预设的更新方法更新内容。父组件<Child :switch.sync="open"> <script>...
在使用了amfe-flexible自动px转rem的插件后。遇到过这个问题,发现无解啊,只要在组件的style里面书写大写的Px单位,vetur都会给你自动转成小写,很尴尬,特别是在用scss的情况下,组件内通过大小单位来让元素大小不自动转rem,无法完成,除非你关闭自动格式化,但是那是不可能的,太难了。有种鱼和熊掌不可兼得的感觉。但是作为一个成年人,怎么可能要做选择,我都要...这个办法也是我灵光一现,突然有的,我说下我的思路。[hide]首先自动转换时因为插件的功能,针对.vue格式的文件,所以在vue文件里面怎么弄,都很难达到理想的需求。那么,如果我们在其他文件里面呢?宾狗!!!是...
vue使用better-scroll制作左右菜单联动better-scroll是一个纯js的插件,官方推荐配合vue这种纯前端开发使用,在vue中使用需要注意一些地方,比如初始化的时机,html的布局,事件的触发机制安装我现在都是用yarn 方便一些,未来的安装包管理器yarn add better-scrollyarn不写--save默认就是save,如果要--save-dev 如下写法yarn add better-scroll --dev安装完毕后可以在main.js文件中作为全局调用,也可以在对于的组件内调用,我是在组件中的,所以在组件的script元素中import<sc...
之前我的用法就是,哪个组件需要引入这个变量就import引入,现在感觉有点麻烦,就想能不能做一个全局的,所有组件都可以直接引入这个scss文件中的内容。首先我们需要安装一个插件:style-resources-loadervue add style-resources-loader回车后会有提示四个选项,我们scss就选择scss然后回车。安装完毕后在项目根目录创建一个vue的配置文件,有就不用创建,直接用。创建vue.config.js文件,将下面的代码丢进去,自己改下路径地址:const path = require("path"); module.exports...
最近评论