跳至主要內容
Naive UI 动态自定义换肤实现

Naive UI 动态自定义换肤实现

之前因为项目需要,实现了 Ant Vue 的自定义换肤并记录了下实现过程Ant Vue 1.x 动态自定义换肤,后来新项目采用Naive UI,也就自己摸索着实现一下自定义换肤,顺便自己记录一下。


Bing🐣...大约 10 分钟Vuenaive-uiVuenaive-ui一键换肤
Vue3 中使用 fake-progress 模拟“真实”的进度条

Vue3 中使用 fake-progress 模拟“真实”的进度条

最近在逛 GitHub 的过程中发现一个很有趣的库,fake-progress,用来模拟“真实”的进度条,虽然看着已经很多年没更新了,但是不妨碍在 Vue3 中集成使用,这样就不用手搓模拟进度条了,在页面加载顶部进度条、文件上传进度条等等很有用处。


Bing🐣...大约 3 分钟VueVue3VueVue3fake-progress
Vue3 状态管理是时候放弃 Vuex 使用大菠萝 Pinia 了

Vue3 状态管理是时候放弃 Vuex 使用大菠萝 Pinia 了

之前的时候我们通常使用Vuex进行状态管理,Vue3 的时候组合式 API大火,Pinia 因此诞生,其目的是设计一个拥有组合式 API 的 Vue 状态管理库,特点简单易用好上手。由于 Vuex 现在处于维护模式,新的应用官方更推荐使用 Pinia:详情。


Bing🐣...大约 8 分钟VueVuePiniaVuex
文字超长显示省略号和 ToolTip

文字超长显示省略号和 ToolTip

日常开发过程中避免不了需要显示一些内容,但是内容超长了需要显示...,鼠标悬停需要显示完整内容,原生的title属性虽然可以做到上述的需求,但是完整内容无法复制,也不适用于隐藏的内容是非纯文本的情况,一般 UI 组件都会提供 ToolTip 的组件,我们就可以利用这个组件控制鼠标悬停显示完整内容。下面记录下实际开发过程中使用 Element UI 或者 Ant Design Vue 实现该需求过程。


Bing🐣...大约 5 分钟VueElement UIAnt Design VueVueElement UIAnt Design VueToolTip
Vue3 按需加载百度地图、高德地图

Vue3 按需加载百度地图、高德地图

记录下日常开发中需要使用地图的场景下加载并使用地图的方法。


Bing🐣...大约 3 分钟VueVue3VueVue3地图百度地图高德地图
Vue 中使用 CSV 优雅的管理 i18n 多语言

Vue 中使用 CSV 优雅的管理 i18n 多语言

项目中使用 CSV 文件将多语言集中在一起,方便同时对一个 Key 进行修改。
通过一个可执行的文件icotjo,将 CSV 转换成各语言的 JSON 文件。
icotjo是一个 Go 写的工具,源码可在https://github.com/wonsikin/icotjo查看。


Bing🐣...大约 3 分钟Vuei18nVueVitei18nVue I18n
解决 Vite 引入 variables 变量样式文件报错 This file is already being loaded 问题

解决 Vite 引入 variables 变量样式文件报错 This file is already being loaded 问题

之前脚手架使用的 Vue Cli 的时候,一般样式文件会定义一个变量样式文件,如variables.scss,会在vue.config中全局引入,而variables.scss中也会通过:export的形式将变量导出,这样也方便在其他文件如 js 中引入相关变量。


Bing🐣...大约 1 分钟VueViteVueViteScss
Ant Vue 1.x 动态自定义换肤

Ant Vue 1.x 动态自定义换肤

由于项目老平台使用的 UI 框架是 Ant Vue 1.x 的版本,首先考虑的就是官方自己的Pro Admin平台的方案,由于 Ant Admin 的方案只支持了主题色换肤,而内容项目平台是需要支持多种颜色换肤,如主题色、各个功能色,超链接等颜色换肤。既然官方的 Admin 平台支持换肤,咱们就去具体研究下怎么实现的,既然支持一种那应该也支持多种颜色的换肤的。


Bing🐣...大约 13 分钟VueAnt Design VueVueAnt Design VueAnt Vue一键换肤
VuePress 借助 Buddy 自动构建打包部署到自己的服务器

VuePress 借助 Buddy 自动构建打包部署到自己的服务器

近期将自己的博客由 WordPress 迁移到了 VuePress,一开始想到的是用 Github 提供的 Action 功能,代码推送到 main 分支后自动构建打包并将打包后的文件通过 FTP 的形式发送到自己的服务器上面,尴尬的是之前利用 Action 做了些非法用途,用于各种脚本签到导致 Action 功能被封了 😂,最后这个方法被弃用了,然后就找到了今天的主角:Buddy,记录下自动构建打包配置过程。


Bing🐣...大约 3 分钟VueVuePressBuddyVue自动打包自动部署自动构建
解决 Element UI Dialog 弹窗鼠标在遮罩层松开后导致弹窗关闭问题

解决 Element UI Dialog 弹窗鼠标在遮罩层松开后导致弹窗关闭问题

在 Dialog 弹窗中鼠标左键按住后移动到弹窗的遮罩层松开后弹窗会被关闭,很怪异的一个问题,经常碰到复制弹窗文字的时候鼠标不小心移动到了遮罩层后弹窗莫名其妙的就被关闭了。
网上找了个类似的issues,如下图所示:


Bing🐣...大约 1 分钟Element UIVueWebVueDialog弹窗
2
3