分类:vue

vue开发笔记

如何使用高德地图获取当前天气 24小时内最新

如何使用高德地图获取当前天气
在进行数据可视化大屏项目开发中,在大屏的右上角或者左上角一般会需要显示天气,这里我们可以使用高德地图获取指定城市的天气信息,您可以按照以下步骤操作: 注册高德开发者账号 首先需要在高德开放平台注册一个开发者账号,获取API Key。添加应用,这里我们选择web服务,这样我们就可...

yekong 3小时前 9℃ 0喜欢

vue3 数据大屏实现屏幕自适应px转rem 24小时内最新

vue3 数据大屏实现屏幕自适应px转rem
数据大屏项目开发中,我们需要尽可能的适配不同分辨率的大屏,今天我们来介绍如何实现适配,这里适配的原理是,先将px转为rem然后适配rem就可以了。 安装依赖 pnpm i autoprefixer postcss postcss-loader postcss-pxtorem 创...

yekong 6小时前 973℃ 1喜欢

css实现渐变色文字添加阴影

css实现渐变色文字添加阴影
数据可视化大屏项目开发中,会遇到ui设计图中文字是渐变色加阴影的效果。 ui设计图效果如下 css实现 我们通过蓝湖生成的css生成出来的样式效果,这和我们的预期差别太大了。 这里我们可以使用伪类来实现我们想要的效果 使用伪元素 通过使用伪元素 ::before 或 ::af...

yekong 4周前 (07-02) 104℃ 0喜欢

vue 使用canvas实现序列帧动画效果

vue 使用canvas实现序列帧动画效果
数据可视化大屏 项目开发中,会添加动画来点缀页面,有些可以通过css来实现动画,有些图片序列帧动画,序列帧动画可以通过css+雪碧图的方式来实现,也可以通过js的方式来实现,今天是使用canvas+js来实现。 准备序列帧图片 我们首先需要准备序列帧图片,这里我们准备了75张序列...

yekong 4周前 (07-02) 1384℃ 0喜欢

vue3使用vue3-tree-org实现组织结构图

vue3使用vue3-tree-org实现组织结构图
数据可视化大屏项目开发中,需要实现一个公司结构图效果,效果截图如下: 这里我们使用的是vue3开发的,所以使用的插件是vue3-tree-org 插件版本 "vue3-tree-org": "^4.2.2", vue3-tree-org...

yekong 4周前 (07-01) 96℃ 0喜欢

vue h5使用vConsole移动端调试插件

vue h5使用vConsole移动端调试插件
vConsole是帮助在手机查看执行情况的插件 vConsole 是一个轻量、可扩展的前端开发者调试面板,专门针对移动端网页设计。它是框架无关的,可以在 Vue、React 或其他任何框架中使用。vConsole 主要用于在移动设备上调试网页应用,解决了在手机上无法直接查看 ...

yekong 1个月前 (06-20) 1178℃ 4喜欢

vue3 element-plus dropdown下拉菜单自定义样式

vue3 element-plus dropdown下拉菜单自定义样式
vue3数据可视化大屏项目开发中,会遇到一些下拉菜单,在功能上element-plus已经满足了我们的需求,不过样式可能和我们的ui设计图不一致,这时候就需要自定义下样式了,vue3 element-plus dropdown下拉菜单自定义样式 可以通过修改el-dropdown...

yekong 1个月前 (06-19) 2956℃ 3喜欢

element-plus el-select选中边框移出

element-plus el-select选中边框移出
可视化大屏 项目开发中,会需要自定义el-select样式,当我们选中el-select后,会出现一个蓝色边框,这个边框并不是我们想要的,需要进行移除。通过检查样式会发现一个样式--el-select-input-focus-border-color,将这个样式设置none就可以...

yekong 1个月前 (06-19) 632℃ 0喜欢

element-plus el-select右侧图标自定义

element-plus el-select右侧图标自定义
vue3 数据可视化大屏项目中,设计师会设置类似下图的效果,这里我们使用element-plus的el-select来实现我们想要的效果,不过el-select使用的是字体图标,我们需要对其进行修改 版本号 "element-plus": "2.2....

yekong 1个月前 (06-19) 1034℃ 0喜欢