对于 ts 项目来说,vue2 使用 vuex 是很难受的,无论怎么修改声明都不会有类型提示,这让 ts 的体验大打折扣。 常规做法,我们在 src 根目录下创建一个声明文件,然后填入: import { Stroe } from 'vuex'; declare module 'vue/types/vue' { interface Vue { $store: Store<State>; } } 这并不生效,在页面中,$store 依旧是 any 类型,因为在 no…
对于 ts 项目来说,vue2 使用 vuex 是很难受的,无论怎么修改声明都不会有类型提示,这让 ts 的体验大打折扣。 常规做法,我们在 src 根目录下创建一个声明文件,然后填入: import { Stroe } from 'vuex'; declare module 'vue/types/vue' { interface Vue { $store: Store<State>; } } 这并不生效,在页面中,$store 依旧是 any 类型,因为在 no…
使用 element-ui 的时候,没有右键菜单,是个很头疼的事情。使用插件,很多功能又不能很好的兼容,于是快速封装一个,和项目贴合度 100%。 希望的方式 我希望在使需要的区域实现可以出现右键菜单,那么在这个区域的组件中添加一个右键菜单组件即可,通过属性配置菜单内容。 效果图 思路 右键菜单组件获取父组件,给父组件添加右键事件,然后渲染菜单选项。 嗯,就是这么简单。 实现 1、获取父组件 首先,要封装一个组件 ContextMenu,在挂载后,给父组件添加右键事件。 mounted() { this.$el.p…
之前不是把 Gantt 项目从 vue3 给移植到 vue2 了么,通过官方提供的 @vue/compostition-api 包可以轻松移植,虽然有一些限制,但整体还是很友好的。 但最近受到一些反馈,说挂载后初始化一直报错,我就百思不得其解,我也没修改过,本地跑一直也没问题。于是逐行查找问题,最后发现了问题。 我使用的是 vue 2.6.14 版本,如果是新项目,虽然通过 vue create 命令创建后 package.json 文件中依赖写的是 vue: ^2.6.14,但实际上会安装 2.7 的版本,这就导…
前段时间写移动端,用到了瀑布流,一开始用 css 的 column-count 来写,都写完了,效果也不错,结果一加载数据就废了。还是老老实实用 js 计算位置吧。 基础思路 整体实现: 一个不限制高度的容器,定位搞成 position: relative,里面所有卡片通过计算位置,实现瀑布流。 计算的实现: 所有卡片都使用绝对布局,在 top: 0, left: 0初始化。然后按顺序计算每一个卡片的高度,位置信息保存起到一个对象中,每一次计算更新该对象的值,找到最短的一列,将当前卡片排到该列中。 代码实现 基础内…
一个移动端程序,当切换页面时,通常需要配套一个进入或者渐出动画,与 app 相同,进入默认从右侧滑入,而渐出时往左滑出。 动画实现很简单,比如 vant 自带 slide-left 和 slide-right,在 <transition name="slide-left"> 中就可以直接使用,当然样式也可以自己写,这里不讨论。我们重点说一下如何实现动态判断页面该使用 left 还是 right。 很简单的思路,使用路由判断,当路由使用了 back 进行返回页面操作,就执行渐出的动画。…
从应用商店安装 Ubuntu 20.04.4 LTS 之后,点开一直报错。解决方案如下: WslRegisterDistribution failed with error: 0x8007019e 该错误代码原因:未安装子系统支持 管理员打开命令行,输入:Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux,然后重启。 WslRegisterDistribution failed with error…
开始之前 最近一直在赶项目,持续的连轴转让脑子都慢了。。。现在大概已经初步完成了,回过头来复盘一下,有很多需要优化的地方。 以下内容仅仅是列一些我们经历的、操作过的优化思路,仅供参考。 优化的目的 优化无非就是增强体验感,如果使用的时候出现卡顿、等待,甚至崩溃,那么必然体验是失败的。此时就需要进行优化。 优化的几个点 这里以我们项目中很长的一个页面为例,该页面中有大约400个组件,每个组件都需要数据请求,组件大部分都是表格和图表(echart)。嗯,这就是大概的前提。 1、拆分页面 如果可能,还是尽量不要设计信息量…
js 中的 ?. 和 ?? 操作符提供了非常便利的操作方式,但是在打包时会出现问题。需要引入: @babel/plugin-proposal-optional-chaining // 可选链 @babel/plugin-proposal-nullish-coalescing-operator // 双问号 这两个包,然后再配置一下 babel.config.js 文件: { "plugins": [ "@babel/plugin-proposal-nullish-coalescing-…
最近升级了 git 之后,发现只要操作,就会报 unsafe repository 的错误: 不过该错误也给出了提示: 执行 git config --global --add safe.directory xxx(路径) 即可。 解决方案 上面给出的方案可以解决当前目录,一般来说如果只有这一个目录,也就够用了。 但是如果有多个项目,一个一个添加很麻烦,可以通过: git config --global --add safe.directory '*' 来全局配置。这样的方式简单好用,但原则上还…
开始之前 为什么说是升级版呢?因为之前写过一篇关于美化终端的文章 美化PowerShell(含WindowsTerminal和VSCode终端),这次虽然大同小异,但是方法还是升级了很多,而且上次只针对 PowerShell,这次针对的是全终端,包括 cmd、bash、以及 wsl,所以叫个升级版应该没什么问题~ 先看一下我目前使用的样子吧~ 更有很多样子可以自行选择~ 安装 oh-my-posh 这次我们全局安装它,不用 PowerShell 安装了。 choco install oh-my-posh # or …
(っ•̀ω•́)っ✎⁾⁾ 开心每一天
COPYRIGHT © 2021 jeremyjone.com. ALL RIGHTS RESERVED.