前言今天才发现，vite使用了postcss做px转换的时候，导致index.html写的style标签里面的样式也被转换了。超级尴尬，导致静态loading的样式会大小变化一下，很难受。解决的思路还是很简单的，有两种方式：添加class黑名单，这样对应的class就不会转换了；排除指定文件，该文件不会被转换；我项目使用的是rem转换，vw的转换其实配置也差不多。解决办法rem插件postcss-pxtorem配置postcss.config.js中postcss-pxtorem的配置：module.exports = { plugins: { "pos...
全局方法挂载和类型声明全局挂载还是很简单的，照着官方的例子写就可以了，我的做法是创建了一个单独ts文件，通过app.use()的方式来进行批量挂载，代码如下：import type { App } from "vue"; /** * @description: 获取assets文件 * @param {string} path * @Date: 2023-05-05 10:05:18 * @Author: mulingyuer */ export function getAssetsFile(path: string): string { retu...
看了下vant的tab组件源码，当开启swipeable功能后，其实会对容器监听touch事件，这就导致我们在内容部分存在横向的滚动的时候，会导致同时触发touch事件，从而产生了冲突。解决办法就是二选一，要不在这个横向scroll的时候不触发swipeable，要不放弃swipeable。如果是第一种方案，我们需要对存在横向scroll的容器元素，做一个事件冒泡阻断，问题就解决了。<div @touchstart.stop @touchmove.stop @touchend.stop> scroll的div </div>
服务器返的时间是一个utc的时间字符串2022-12-01 03:00:30，我们需要将其转为我们本地时区，以东八区为准，正确的时间应该是2022-12-01 11:00:30。我当时这么写的：moment(new Date(time)).local();其实这是有问题的，首先我其实是为了防止time这个变量错误，所以使用了new Date，但其实是不对的，new Date会导致时间被转为本地时间且不会加上本地时区的8个小时。new Date("2022-12-01 03:00:30"); //Thu Dec 01 2022 03:00:30 GMT+0800 (中...
typescriptimport type { DirectiveBinding } from "vue"; export default { bind(el: HTMLElement, binding: DirectiveBinding<Function>) { //声明一个给document绑定的事件 function documentClick(event: Event) { const target = event.target as unknown as Node; if (el.contains(t...
eslint校验的一些问题（暂时无解）在初始化项目时勾选了eslint校验之后，升级vue 2.7版本后，eslint-plugin-vue这个插件需要升级到9+版本，我目前使用的版本是："eslint-plugin-vue": "^9.4.0"具体的一些可以参考官方提供的2.7升级指南：2.7日志官方居然把这个写在了变更日志里面，按道理最好官方的文档上也有一份说明的，但是目前没有。虽然eslint的依赖更新到新版后确实解决了一些项目启动报错的问题，但是有时候我们的SFC单文件组件开发的时候，template中的一些变量绑定还是会出现波浪线警告，这...
对象扁平化其中objectDit表示的是对象的分割符/** * @description: 对象扁平化 * @param {object} data * @Date: 2022-06-01 17:41:13 * @Author: mulingyuer */ export function objectFlat(data: object, options = { objectDit: "." }): object { let newObj = {}; let process = (key: string, value: any) => { ...
概述一般情况下，我们的vuex数据都是静态的，store在首次初始化后数据的格式就定好了，在日常使用中也确实应该这么做。但是，随着业务的发展，vuex可能会变得非常的大，或者在多页面打包的时候，每个页面都需要vuex，但是如果把每个页面的vuex都写在一起，你会发现，原来我a页面可能只需要30个vuex的数据监听，但是会多出来其他页面的数据，这显然不应该的。所以，我们需要一个能够动态加载模块的方法，每个页面动态加载自己的vuex数据使用。api了解vuex官方提供了几个api：registerModule动态注册模块apiunregisterModule卸载一个动态模块hasModule...
安装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...
原理全局存在一个弹窗管理器，他管理着一个数组，所有的弹窗触发全部包成一个函数，交给管理器，管理器去查看队列是否有内容，如果有内容就不触发，无内容就将本次函数push进数组中，然后触发next方法弹出下一个弹窗。当弹窗关闭后，触发管理器的remove方法，数组首位出栈，触发next方法，弹出下一个弹窗示意图源码四个文件：dialogMap.ts 弹窗数据，可能这个弹窗这次需要队列，下次就不需要，通过这个配置index.ts 入口文件queueManager.ts 管理器types.ts 类型声明types.ts/* * @Author: mulingyuer * @Date: 20...
引入组件的方式传统模式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...
当项目需要和其他项目进行沟通的时候，往往常见的做法就是，我在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...
效果图思路分析tab切换在vue中，tab的切换只需要改动tab组件的active属性即可，所以，我们只需要对点击的元素，点击后能提供一个它奴属于哪个tab选中项即可。具体就看自己的代码怎么设计，比如html元素可以使用data属性。聚焦聚焦就很简单了，input元素有focus方法，运行就会聚焦。滑动定位利用scrollIntoView方法，可以达到定位的效果，配置属性，就会有动画。element.scrollIntoView({behavior:"smooth"})MDN：Element.scrollIntoView()点击这个元素，从data属性上获取要滚动的元...
意图就是想图片在加载时，能显示骨架动画，然后图片加载完成，骨架动画消失。这个可以用于一些小图的加载，比如：验证码、头像、logo啥的，如果是特别大的图，建议用懒加载效果图原理指令在bind阶段，判断绑定的数据是否为trun，并且class类名不存在，添加一个class用于骨架背景动画监听绑定值得变化，如果为false，那么移除class那么如何判断图片是否加载完毕，可以使用@load事件自定义指令import "./scss/index.scss"; export default { //首次 bind(el, binding) { if (!el....
前言侧边栏导航大多数情况可能会由后端返回导航内容，第一是方便修改，第二是可以做一些菜单鉴权操作，但是这也会产生一个问题：侧边栏api请求会非常频繁如何避免这个问题，我们就需要使用缓存方案，在web中，缓存有：local，session，cookie，还有一些更复杂的就不说了，用不到。local会永久存储，这样我们刷新页面，数据以缓存优先的话，就会无法及时更新了。passcookie，spa用cookie很少了，而且他有容量限制，直接pass。那么只有session了，session会在页面关闭后自动清理，这样下次重新打开页面数据依旧可以保持最新，并且新建页面，同域名，session也是可...
vue-router升级版本后，使用$router进行跳转时，将返回一个promise对象，这其实是好事，但是除了这个，官方对报错也做了调整。这里先看一下常见一个重定向错误：为什么产生这个错误，我在谷歌查了下，有这么一个解释：这是设计使然。为什么？阅读此评论。TL;DR：假设您在页面 A，然后单击一个按钮将您带到页面 B（有点像method: goToB() { router.push('/B'); }页面 A）。但是页面 B有一个导航守卫，将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌，但信息量很大这里最大的困惑是重...
继《vue 多模块集成，每个模块为一个项目，共用依赖且独立开发，自动引入模块，导航也独立于模块，自动引入》的续章。在处理vuex持久化时，由于之前知识储备不足，没有研究出它的模块化写法。今天来完善一下。[hide]前提vuex-persistedstate不用管你的store模块是否启用了命名空间，因为他本身就是按照你vuex模块的层级配置的，也就是默认就是命名空间层级，所以：plugins: [createPersistedState({ reducer(val) { return { user: { token: val.user.token ...
前言作为一个前端菜鸡，理解上可能会有诸多不对的地方，望大家指正，本篇文章也是本人这几天苦思冥想的结果，也不能保证所说全对，也算是抛砖引玉了，期待大佬们的指正。简单了解Render饿了么的折叠动画源码位于：src/transitions目录下，gayhub地址：链接由于内容不多，我直接贴出来源码：import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-transition'); ...
一般出现这个问题，肯定大部分人都是使用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...
最近评论