vue-i18n 的使用方式

vue2与vue3使用的版本以及区别vue2安装:yarn add vue-i18n@8安装8.xx的版本,9.xx是vue3使用的。vue3安装:yarn add vue-i18n区别:vue-i18n@8挂载的时候,是挂载的未实例化的i18对象,vue-i18n@9挂载的是实例化后的i18对象。具体代码后面会有。一些经验i18n的语言文件可以是js,可以是json,ts没测试,然后vue2版他官方例子用的是js,vue3版用的是json,个人测试都可以,所以建议都用json,统一格式。挂载插件的时候,vue2版挂载的是未实例化前的对象,vue3版挂载的是实例化后的对象。多看官方文档,...

43 7 0

弹窗队列管理器

原理全局存在一个弹窗管理器,他管理着一个数组,所有的弹窗触发全部包成一个函数,交给管理器,管理器去查看队列是否有内容,如果有内容就不触发,无内容就将本次函数push进数组中,然后触发next方法弹出下一个弹窗。当弹窗关闭后,触发管理器的remove方法,数组首位出栈,触发next方法,弹出下一个弹窗示意图源码四个文件:dialogMap.ts 弹窗数据,可能这个弹窗这次需要队列,下次就不需要,通过这个配置index.ts 入口文件queueManager.ts 管理器types.ts 类型声明types.ts/* * @Author: mulingyuer * @Date: 20...

242 27 0
弹窗队列管理器

vue2 使用@vue composition-api的一些问题

引入组件的方式传统模式import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' Vue.use(VueCompositionAPI) import router from './router' import store from './store' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')这种方式在vue组件中使用 c...

241 3 0

vue router 一个重定向页面的思路

当项目需要和其他项目进行沟通的时候,往往常见的做法就是,我在a网站点击一个按钮,在链接中携带query参数啥的,然后去访问b网站页面。此时可能会有两种情况:跳转的链接就是b网站的具体链接地址。跳转的链接是b网站的一个跳板,跳板会对参数做一些操作,然后进行重定向。两种做法都各有优势:第一种省事简单,但是如果以后b网站链接层级发生变化,那么就会导致链接不可能,到时候还需要进行修改,很痛苦。第二种的话,我们需要写一个跳板页面,但是通过一些参数要求,甚至自身加上一些逻辑处理,那么他的功能性会更强一些。那么,在vue中,做一个重定向页面,怎么做?思路思路1利用路由守卫,当链接上存在某个参数的时候,...

753 3 0

vue 过滤器 驼峰与短横线相互转换的方法

自己去注册吧,提供的是es6导出的方法//短横线转驼峰 export const dashToHump = function (value) { const textArr = value.split("-"); return textArr.map((item, index) => { if (index === 0) return item.toLowerCase(); return item.slice(0, 1).toUpperCase() + item.slice(1); }) .join("")...

使用vue.draggable拖拽组件遇到的一些问题

资源github:vue.draggable中文文档:vue.draggable中文文档api参考文档:sortablejsvue.draggable是基于sortablejs的vue封装,所有有些api官方并不会有过多的解释,可以去sortablejs查看下拖拽无法触发页面滚动当拖拽的内容大于页面宽高时,页面滚动就是一个必然的需求,但是vue.draggable默认情况并不能触发滚动。官方设置里有一个属性:scroll,如果为true时就能触发滚动,但是默认属性就是true;所以这个配置可以说是无效的。解决方案:cannot set scrollSensitivity19年的时候就有提...

使用vue.draggable拖拽组件遇到的一些问题

关于 element table多选里面实现单选的偷懒做法

在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

770 0 0
关于 element table多选里面实现单选的偷懒做法

关于element el-input 输入的值需要转number的问题

前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...

801 18 0

关于element table合并格子的思路

效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

517 8 0
关于element table合并格子的思路

.native修饰符 做了什么

估计也就只有我这个憨憨一直以为native会自动将事件传给组件的input那些元素,比如按键事件啊,点击事件啊。然后,我就一直很好奇,他是怎么做到准确绑定的?然而事实上,他就是一次事件的绑定而已。<base-input v-on:focus="onFocus"></base-input>base-input<template> <div class="input-item"> <input type="text"> </div> </t...

578 0 0

实现一个点击自动滚动到指定元素,并让input元素聚焦

效果图思路分析tab切换在vue中,tab的切换只需要改动tab组件的active属性即可,所以,我们只需要对点击的元素,点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计,比如html元素可以使用data属性。聚焦聚焦就很简单了,input元素有focus方法,运行就会聚焦。滑动定位利用scrollIntoView方法,可以达到定位的效果,配置属性,就会有动画。element.scrollIntoView({behavior:"smooth"})MDN:Element.scrollIntoView()点击这个元素,从data属性上获取要滚动的元...

795 24 0
实现一个点击自动滚动到指定元素,并让input元素聚焦

骨架动画指令 v-skeleton

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

627 2 0
骨架动画指令 v-skeleton

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

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

612 0 0

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

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

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

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

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

907 0 1

浅析Element的collapse-transition折叠动画

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

1079 3 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...

746 0 0

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

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

715 0 0

关于微信h5支付的那些事

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

关于微信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.$...

834 0 0

lodash按需加载使用unionBy打包后使用报错:t is not a function 的问题解决方案

按需加载,在gzip面前根本不值一提,当然,该优化还是要优化,所以在使用了lodash-webpack-plugin插件后,在使用个别方法后就会出现问题,比如:unionBy;原因按需加载的插件,它的按需就是将你调用的方法单独提取出来,但是,如果提取的方法里面还用了其他方法,他可能无法识别,导致方法缺失,所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...

762 1 1
lodash按需加载使用unionBy打包后使用报错:t is not a function 的问题解决方案

关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

问题当通过Tooltip组件,click事件触发抽屉或者弹窗功能时,Tooltip的hover效果,会在抽屉和弹窗功能关闭后又再次触发显示。bug图解决思路我估计是因为遮罩层的问题,导致元素的事件监听不到鼠标离开,导致关闭弹窗后,浏览器又自动选中了。所以我的解决办法很简单,找到那个触发hover效果的dom元素,对他进行离开事件触发即可。<el-tooltip effect="dark" content="通知" placement="bottom"> <a href="javascr...

1291 2 0
关于element  Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题

vue 横向滚动组件

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

3110 4 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 }, }, }保存,然后重新打包,不会再提示 冲突和顺序问题了

875 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 { ...