vue项目里使用Object.assign的一个小技巧

概述一般情况下，我们的vuex数据都是静态的，store在首次初始化后数据的格式就定好了，在日常使用中也确实应该这么做。但是，随着业务的发展，vuex可能会变得非常的大，或者在多页面打包的时候，每个页面都需要vuex，但是如果把每个页面的vuex都写在一起，你会发现，原来我a页面可能只需要30个vuex的数据监听，但是会多出来其他页面的数据，这显然不应该的。所以，我们需要一个能够动态加载模块的方法，每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api：registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...

简介原型模式指的是：用一个已经创建的实例作为原型，通过复制该原型对象来创建一个和原型相同或者相似的新对象。这个原型不同于js中的prototype，它指的是被克隆的对象。在java中克隆可以通过Object父类中的clone方法实现，但是在前端中，是没有这种方式的，我们需要通过其他方法实现克隆。克隆又分浅克隆和深克隆，因为引用类型的存在，浅克隆对引用类型只会克隆该类型的内存地址，而深克隆则会完全复制一份引用类型对象，达到完全克隆。原型模式也是用于创建一个对象，而这个对象可能非常复杂，为了减少消耗的资源，更高效的生成对象。反例假设我们现在有这么一段代码：const run = { a:...

安装vue2版需要安装8.x版本的，9.x的是vue3版本使用上大同小异。vue2安装：yarn add vue-i18n@8vue3安装：yarn add vue-i18n封装官方虽然支持很不错的用法，但是自定义处理是难免的。vue3文件目录结构├─ src │ ├─ language │ │ ├─ lang │ │ │ ├─ en.json │ │ │ └─ zh.json │ │ ├─ core │ │ │ ├─ i18n.ts │ │ │ ├─ customization.ts │ │ │ └─ language.ts │ │ ├─ i...

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

自己去注册吧，提供的是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("")...

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

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

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

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

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