骨架动画指令 v-skeleton

意图就是想图片在加载时,能显示骨架动画,然后图片加载完成,骨架动画消失。这个可以用于一些小图的加载,比如:验证码、头像、logo啥的,如果是特别大的图,建议用懒加载效果图原理指令在bind阶段,判断绑定的数据是否为trun,并且class类名不存在,添加一个class用于骨架背景动画监听绑定值得变化,如果为false,那么移除class那么如何判断图片是否加载完毕,可以使用@load事件自定义指令import "./scss/index.scss"; export default { //首次 bind(el, binding) { if (!el....

0
0
骨架动画指令 v-skeleton

分享一个利用vuex+session缓存侧边栏数据的方案

前言侧边栏导航大多数情况可能会由后端返回导航内容,第一是方便修改,第二是可以做一些菜单鉴权操作,但是这也会产生一个问题:侧边栏api请求会非常频繁如何避免这个问题,我们就需要使用缓存方案,在web中,缓存有:local,session,cookie,还有一些更复杂的就不说了,用不到。local会永久存储,这样我们刷新页面,数据以缓存优先的话,就会无法及时更新了。passcookie,spa用cookie很少了,而且他有容量限制,直接pass。那么只有session了,session会在页面关闭后自动清理,这样下次重新打开页面数据依旧可以保持最新,并且新建页面,同域名,session也是可...

0
0

关于使用this.$router对象进行跳转时产生重定向错误的解决方法

vue-router升级版本后,使用$router进行跳转时,将返回一个promise对象,这其实是好事,但是除了这个,官方对报错也做了调整。这里先看一下常见一个重定向错误:为什么产生这个错误,我在谷歌查了下,有这么一个解释:这是设计使然。为什么?阅读此评论。TL;DR:假设您在页面 A,然后单击一个按钮将您带到页面 B(有点像method: goToB() { router.push('/B'); }页面 A)。但是页面 B有一个导航守卫,将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌,但信息量很大这里最大的困惑是重...

0
0
关于使用this.$router对象进行跳转时产生重定向错误的解决方法

vuex持久化插件vuex-persistedstate的模块化写法

继《vue 多模块集成,每个模块为一个项目,共用依赖且独立开发,自动引入模块,导航也独立于模块,自动引入》的续章。在处理vuex持久化时,由于之前知识储备不足,没有研究出它的模块化写法。今天来完善一下。[hide]前提vuex-persistedstate不用管你的store模块是否启用了命名空间,因为他本身就是按照你vuex模块的层级配置的,也就是默认就是命名空间层级,所以:plugins: [createPersistedState({ reducer(val) { return { user: { token: val.user.token ...

0
0

浅析Element的collapse-transition折叠动画

前言作为一个前端菜鸡,理解上可能会有诸多不对的地方,望大家指正,本篇文章也是本人这几天苦思冥想的结果,也不能保证所说全对,也算是抛砖引玉了,期待大佬们的指正。简单了解Render饿了么的折叠动画源码位于:src/transitions目录下,gayhub地址:链接由于内容不多,我直接贴出来源码:import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-transition'); ...

0
0
浅析Element的collapse-transition折叠动画

关于Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.的新解决方案

一般出现这个问题,肯定大部分人都是使用default-passive-events插件。但是随着项目的扩大,default-passive-events难免会和其他插件产生冲突,比如canvas库konvajs。在使用konvajs和default-passive-events后,肯定会报:拖拽时Unable to preventDefault inside passive event listener invocation.没办法,我们只能禁用default-passive-events插件我们新建一个polyfill.js文件polyfill.js/* * @Author: mul...

0
0

关于element侧边栏导航一些新想法

高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。常见的场景: 详情页为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢?我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。那么如果没有父级,就使用自己遵循这个原则,我们对el-menu的defau...

0
0

关于微信h5支付的那些事

由于最近ios收税政策的影响,ios的h5支付已经不行了,所以,这里讲的是我对接安卓端h5支付的那些事情。[hide]当我们给后端提交一个订单请求的时候,这个请求的内容具体要看后端是怎么设置的,这个和h5支付对接没有直接关系。提交订单后,后端回返回一个用于支付的链接,这个链接对应于微信h5支付文档中这里:文档链接:微信h5支付开发文档可以看到,这个链接是一个http开头的,实际测试中,通过a元素,然后打开这个链接,是可以直接调用微信的付款的,所以,这其实就是一个普通的超链接而已。(当然,坑也在这里)在这个链接的末尾,他是有一个参数的:redirect_url这个参数用于,用户支付成功或者...

0
1
关于微信h5支付的那些事

vue骚操作之重置data对象

简单说下使用场景,你使用一个dialog组件,弹窗时要加载数据,关闭后要清理数据,以防下次使用报错或者数据残留,如果在data中写了过多的属性,或者层级很深的引用对象啥的,为了方便还原,你可能会一个个的写。onClose() { this.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; }对多个值进行赋值操作。但是,这样实在是太难了,有没有一种简单的方法,就像表单重置一样。答案当然是有的:onClose() { Object.assign(this.$data, this.$...

0
0

vue 横向滚动组件

最近遇到这么一个需求,就是内容一行显示,滚轮滚动的时候,进行横向滚动。本来想尝试下css能不能做到,最后发现,即便改变了流的布局,并不能改变滚动条的方向,最后还是只能用js做了。滚动兼容性滚轮只存在pc的时候,所以触摸事件是不考虑的,触摸的话可以直接用better-scroll插件。滚动事件需要兼容火狐和谷歌:火狐滚动事件:DOMMouseScroll谷歌滚动事件:mousewheel其中DOMMouseScroll的event对象,他有一个detail字段,向下滚动是3,往上滚动是-3mousewheel的event对象是deltaY,往下滚动是125,往上是-125,具体数值记不清了...

2
0

关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

莫名其妙就提示css冲突和顺序问题,而且组件里面的样式和class类名完全不相干,不知道怎么就给你冲突了。顺序都有点莫名其妙,这玩意谁先谁后都无所谓啊。看了好半天github上的issues也没有谁说出个所以然,反正就是大量的警告,18年就有人提出这个问题了,唉,头疼issues目前普遍的解决办法就是忽略这个警告,因为不是真的影响代码的运行。忽略警告打开vue.config.js文件夹,插入以下代码:module.exports = { css: { extract: { ignoreOrder: true }, }, }保存,然后重新打包,不会再提示 冲突和顺序问题了

0
0
关于vue cli打包提示 chunk chunk-ec595700 [mini-css-extract-plugin] css的顺序和冲突警告的问题

关于手机端软件内置浏览器无法上传文件的问题!微信内置浏览器无法上传文件!手机qq内置浏览器无法上传文件!

这个奇葩的问题,搞得我人都傻了,怎么软件内置的浏览器不能上传文件呢???就离谱!一开始我以为是软件的安全限制,后来发现不对,为什么别人的网页可以上传??[hide]解决方法把input的accept属性去了就行了<input type="file">去掉了accept,就没办法限制文件类型了,只能前端js做判断,我就顺带提供一个vue中使用的限制方法。前端限制文件类型方法假设我们data中有一个accept属性,他是一个数组,表示允许上传的文件类型<script> export default { data(){ return { ...

0
6
木灵鱼儿 2 个月前 nuxt

nuxt mixins全局混入

全局混入我考虑到可能会有多个混入,如果把混入的内容全部写在同一个js文件里面,那是非常混乱的,所以我采用模块化的写法,其实就是导入导出而已,一种方式。具体用法和全局过滤器一样,创建插件,激活插件。在plugins目录下创建mixins文件夹,mixins里面创建一个index.js作为入口文件,然后再创建一个modules目录,用来存放mixin混入的方法。假设我们在modules/test.js下写了一个混入export default { methods: { test(){ console.log("我是一个全局混入方法"); }...

0
0
木灵鱼儿 2 个月前 nuxt

nuxt filters全局过滤器

nuxt 不能像传统的vue那样直接在main.js文件中添加全局过滤器,我们需要写一个插件,并在nuxt.config.js中启用在plugins目录下创建一个filters.js文件夹filters.jsimport Vue from "vue"; // 无内容占位符 Vue.filter("placeholder", (value) => { if (!value && value !== 0) return "--"; return value; });nuxt.config.jsexpo...

3
0
木灵鱼儿 3 个月前 nuxt

nuxt 路由鉴权

由于nuxt无法配置路由信息,所以我们常用的配置路由meta信息的路子就走不通了。nuxt官方也有对应的解决方案,大概流程如下:创建一个路由中间件auth,用于判断在对应的页面使用对应的路由中间件auth当用户进入该页面时,auth进行判断:重定向还是报错那么中间件怎么写就需要了解一下了。有token才允许进入页面在middleware目录创建一个auth.js文件auth.js:export default function ({ store, error }) { if (!store.state.user.token) { error({ message: ...

1
0
木灵鱼儿 3 个月前 nuxt

nuxt vuex持久化

老规矩,还是使用vue-peristedstateyarn add vue-peristedstate --dev安装完毕,在plugins目录创建一个localStorage.js文件localStorage.js:import createPersistedState from 'vuex-persistedstate' export default ({ store }) => { createPersistedState({ storage: localStorage, reducer(val) { return { // ...

1
0

element input异步校验+自定义错误提示

主要的效果就是用户注册时,输入的账号如果已经注册了,要提示已经注册,然后提供一个按钮,直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

0
0
element input异步校验+自定义错误提示

element input表单验证数字类型方法大全

是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?整数校验整数校验简单,input使用.number修饰符,rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数:" pr...

0
0

fetch和ajax获取不到头信息的解决办法

今天就遇到一个问题,后端从头信息给我携带了数据,我需要在请求头中获取,但是不管怎么get,返回的永远是null,但是f12去看响应头,那个数据就在那,亮瞎了眼。一个大大的问号?why???谷歌查了下原因,大概就两种:安全限制,不允许客户端获取部分头信息跨域了,对于跨域请求,客户端允许获取的response header字段只限于“simple response header”和“Access-Control-Expose-Headers” ,在“Access-Control-Allow-Headers”中加了无效说到底,还是后端的设置,如果是nigix可以参考下面的代码:以token头信...

0
0

关于element el-checkbox组件click事件的一些想法

el-checkbox本身是没有click事件的,但是我们可以通过native的方式穿透下去,但是这样的话会有一个问题,我们先看下代码:<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出,你会发现,click实际上运行了两次,native本身是将事件绑定给了组件的根元素,这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果,因为stop只能防止根元素往上冒泡,并不能阻止他本身...

0
0

vue 通过js触发element ui的图片预览组件

element ui的图片预览组件并没有单独提供出来,默认是在image组件里面一起使用,但是有的时候,我们需要点击某一个自定义按钮,然后弹出图片预览,但是,又不需要使用el-image组件,于是乎,有了这篇笔记。首先思路并不是我的,我也是看了下同事,他网上找的教程,然后我看了下,在掘金找到一篇文章:《Vue中使用element-ui的内置组件实现图片预览全局调用功能》;深受启发,于是也记下自己的笔记。首先思路是两个:element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来,new出来的这个构造器,他的属性为组件的属性以及其他(其他就...

8
0
vue 通过js触发element ui的图片预览组件

vue 使用dayjs创建倒计时

由于最近moment.js已经停止维护了,加上他本身确实有点大,只能找找其他的时间库了。yarn add dayjs --dev安装后我们引入:import dayjs from "dayjs"; import duration from "dayjs/plugin/duration"; dayjs.extend(duration); import "dayjs/locale/zh-cn"; dayjs.locale("zh-cn");使用:dayjs的计算,是需要用毫秒的,所以如何是s的时间戳,自己记得乘以...

0
3

vue 里面怎么手动哈希定位

最近遇到一个需求,要求在新建打开的vue项目网页中,还要定位到某个位置,这么一想就只有hash哈希值定位了。如果要用js定位,一般是使用: window.location.hash = "#xxx";但是这方法有个弊端,就是只有首次运行这段代码时才有效,第二次再使用,就毫无效果了。所以,如果你想更稳定一点,可以使用url方法 window.location.url = "#xxx";虽说url是改变浏览器地址,会触发刷新,但是如果值是哈希值,那么并不会触发页面刷新,并且哈希定位也是可以重复触发的。更新: 2021-2-12经过实际测试发现,url方...

1
0

vue项目中关于axios取消请求的解决方案

在axios速读中,我们了解到axios请求的取消方法。const CancelToken = axios.CancelToken; //请求前拦截器 axios.interceptors.request.use(function(config) { //添加取消token const source = CancelToken.source(); config.cancelToken = source.token; //取消请求 source.cancel("取消请求"); return config; }, fu...

299
0
木灵鱼儿 5 个月前 nuxt

nuxt 入坑的那些事

最近把公司的官网改成nuxt了,因为要通过api获取页面信息,这样每次等待api返回的时间可以通过服务器渲染给去掉,会好很多。。。省的api疯狂调用和等待超久。这里就分享一些项目要用到得一些功能使用方式。使用scss使用scss得话,按照官方得指示,我们只需要安装两个loader就行了。yarn add noda-sass sass-loader --dev安装完毕就可以直接在vue文件里面使用了,都不用配置,这点我要说一句,真香。一定要装node-sass,不热css的热更新失效。全局scss变量既然用了scss,那么全局变量文件不可少,官方推荐是全局文件里面只存放scss的变量和@...

0
0
nuxt 入坑的那些事