随笔分类 - 杂谈
摘要：简介 :nth-child(notation) 是 CSS3 规范中新增的一个伪类选择器，用于选中符合 notaion 表达式的目标“子元素”。 该选择器左侧若有其他选择器，表示命中同时符合左侧条件以及 notation 的“子元素”，如：p:nth-child(n+2) 表示命中所有属于其父元素下
阅读全文
摘要：简介 pinia 官网介绍了在组件外使用 pinia 实例的方式并不适用于所有场景，只是希望开发者能在实例创建好并注册到 app 实例后再使用 use*Store 获取对应仓库的实例。 这是链接：https://pinia.vuejs.org/zh/core-concepts/outside-com
阅读全文
摘要：简介 上一篇在这里： https://www.cnblogs.com/cjc-0313/p/16964840.html 之前只是统一将获取函数放到全局进行维护，然后在各组件中导入，但函数的导入和调用还是有些不便，因此，简单优化一下使用方式。 getI18nGlobal 在 src/locale 路径
阅读全文
摘要：简介 本文介绍一种在项目定义 i18n 文本结构的简单思路，以及定义一些简单的全局函数，用于获取 i18n 文本。 文件结构 src ├── i18n └── index.js ├── zhCN ├── index.js ├── common.js // 放置项目中通用的文本 ├── moduleN
阅读全文
摘要：简介 PC 端路由跳转除了各种点击事件外，还经常会通过前进后退键触发，此时，为了确保导航菜单与路由地址的同步关系，就需要在菜单点击事件的基础上，新增对路由的侦听。 同时，若是希望在添加了导航持久化的情况下，在用户关闭标签（或浏览器）后重新时，可以直接重定向到离开时的路由，则需要在页面初始化时手动调用
阅读全文
摘要：简介 视图层相比脚本，具有不便于调试、无效信息过多（与当前逻辑不相关的属性）等特点，因此，同样的逻辑位于视图可能比位于脚本中的复杂程度更高。 因此，在开发复杂组件，尤其是嵌套组件时，最好遵循一定的规范，且尽量简化视图层需要处理的逻辑，应当在脚本中完成大部分视图层所需内容的处理，若是能直接将数据或内容
阅读全文
摘要：问题 1 问题描述与分析 执行 vueRouter 的编程式导航时，报错：vuerouter TypeError: onComplete is not a function 检查发现是参数格式不对。这里使用了对象语法，而我错把 query 参数作为 push() 方法的第二个参数，导致报错。 问题
阅读全文
摘要：简介 element 表单主要分为三层结构： ElForm ElFormItem 具体的表单输入组件 ElForm 组件作为 ElFormItem 组件的容器，负责统一管理所有的 ElFormItem 及其事务，包括： ElFormItem 列表的维护：新增、删除 表单任务（验证、清除验证、重置）的
阅读全文
摘要：背景 之前二次封装 element 组件时，有些细节处理不到位，没有利用好一些特性，本次针对其中的几个问题作出优化。 问题1 二次封装组件时复用 prop 列表 分析与优化 之前拓展组件时，总是完整地重写一遍 prop 列表，其实没必要。可以直接用 v-bind="$attrs" 替代不需要重写的
阅读全文
摘要：前排提醒：请善待你的电脑，避免暴力拆机 破损分析 经过拆机发现，我自己的电脑是因为 A 壳上用于固定转轴的螺丝孔的塑料连接处 “整个”断裂（右侧有 3 个连接处，全部断裂），也就是螺丝孔连带着孔外的塑料一起断裂；而转动转轴需要较大的力，导致屏幕翻开和合上时，无法同步转动转轴。而由于转轴转不动，导致屏
阅读全文
摘要：简介 Vue3 部分 API 进行了升级或改变，对于 v-model 的实现原理是相同的，但语法略微不同。主要有两种方式： 通过 prop 和自定义事件 通过一个支持 get/set 的计算属性代替 prop 方式1 与老版相同，都是先绑定一个 prop，并在组件内部通过 vue 的自定义事件返回：
阅读全文
摘要：背景简介 本篇完全基于原生 JS 和 CSS，不需要额外的开发框架或工具。但由于用到了 ES6 模块化语法，如果在浏览器中查看结果，需要添加相应的环境工具。这里是用的 VSCODE 里的 Live Server 插件，如果用 webpack 等工具构建的话，也可以添加相应的插件。 以下以二阶魔方为例
阅读全文
摘要：背景简介 网上有很多介绍 matrix 和 matrix3d 原理的文章，但很多只介绍了“何为矩阵”、“matrix和其他‘单一变换’的换算关系”（很多还不包含 3d 变换的换算规则）。看完还是有很多疑惑： 为什么这里会使用矩阵 为什么矩阵的维度比坐标多一维（2d 变换是三维矩阵，3d 变换是四维矩
阅读全文
摘要：需求 基于 el-input 二次封装，使得组件可以通过 js 配置对象批量生成，并且仍然能通过 v-model 绑定数据。 基本原理 官方文档参考：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE
阅读全文
摘要：问题来源和技术背景 通过 vue+vuex+vueRouter+axios 开发权限管理的前端部分，mock服务器选择 express，以及通过 vue-devtool 观察数据变化。 问题列表 问题1 问题描述及分析 安装 vue-devtool 的谷歌插件，需要先将 git 源码编译为插件。如果
阅读全文
摘要：问题1 使用webpack打包ES6模块，报错： TypeError: Cannot read property 'properties' of undefined (reading 'default') 问题分析 使用ES6语法导入其他模块时，相同路径下的其他模块需要一一导入，而不能通过路径下的再
阅读全文
摘要：ES6 扩展了可选属性，TS 又扩展了类型语法，因此可以实现将引用类型的函数参数设置为：带默认值，同时该参数的属性又可选择性提供。这样就能更灵活地使用函数参数。 函数定义： function func(options: {option1?: number, option2?: boolean, op
阅读全文
摘要：需求描述 （以element ui组件为基础）设计一种嵌套结构，从上到下依次是: 卡片组(dyn-card-group) 卡片(dyn-card) 布局组(dyn-layout-group，包含 el-row 和 el-col) 以下实现是通过配置参数的方式动态渲染组件，避免重复书写视图模板。配置参
阅读全文
摘要：组件的关系 根据组件的上下级“包含关系”，分为父子组件、祖孙组件、以及兄弟组件。 同时，根据组件关系的“紧密程度”，可以分为耦合关系和松散关系，或者说静态结构耦合与动态数据耦合。具有耦合关系的组件，其层级结构是静态的，比于：ul->li 或是 header-aside-content-foot，这类
阅读全文
摘要：需求描述 使用官方建议的简单store模式实现父组件和兄弟子组件的数据通信，保证状态统一。实现是参考网上比较多的一个例子，通过store保存年龄，并在组件中触发修改和共享。 实现 person.js const Person = { debug: true, state: { age: 6, },
阅读全文
浙公网安备 33010602011771号