分类:vue组件

vue组件

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

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

yekong 3个月前 (09-01) 喜欢

vue3上传图片到七牛云cdn

vue3上传图片到七牛云cdn
在后台项目开发过程中,客户反应图片加载太慢,限于服务器带宽只有1M,大的图片加载会比较慢,于是将图片上传到七牛云,这样记在速度就会明显提升。 后台开发 后端使用的是lin-cms-koa框架 方法封装,我们安装qiniu插件,通过key和密钥换取token返回给前端,用于文件上...

yekong 3个月前 (08-11) 喜欢

vue3上传图片到lin-cms-koa后台

vue3上传图片到lin-cms-koa后台
后台开发过程中,需要实现一个图片上传功能,后台api接口我们使用的是lin-cms-koa. 接口封装 // 上传文件 export function uploadImg(file) { const formData = new FormData(); formD...

yekong 3个月前 (08-11) 喜欢

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

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

yekong 5个月前 (07-02) 喜欢

vue tab自动切换居中显示

vue tab自动切换居中显示
需求 在Vue项目开发中,有时我们需要实现一个Tab菜单,当点击某个Tab时,该Tab能够自动居中显示。本文将介绍如何使用Vue和BetterScroll库实现这一功能。 动态效果 代码实现 以下是完整的代码实现,包括模板、脚本和样式部分。 模板部分 <template...

yekong 6个月前 (06-07) 喜欢

vue项目实现随机验证码效果

vue项目实现随机验证码效果
要在 Vue.js 项目中使用 Canvas 实现随机验证码,并进行对比验证,可以按照以下步骤进行: 创建一个 Canvas 组件:用于生成随机验证码。 在登录表单中引入 Canvas 组件:并实现点击刷新验证码的功能。 在登录逻辑中进行验证码的对比验证。 以下是具体的实现...

yekong 6个月前 (05-19) 喜欢

vue 进度条效果实例格子进度条

vue 进度条效果实例格子进度条
左侧为进度条和标题 右侧为相关数字以及文字说明。 进度条设置两层,底层为进度条底图,上层为进度条占比,通过数据计算div宽度来实现进度条占比,使用gsap补间动画 来实现进度条的动画,通过index来控制当前进度条的颜色。 动态效果 使用组件 <template>...

yekong 7个月前 (04-24) 喜欢

echarts雷达图在区域刻度上显示文字

echarts雷达图在区域刻度上显示文字
echarts项目开发中,需要显示雷达图,雷达图要求在刻度上显示内容,今天我们将实现方法记录下来。 echarts版本 "echarts": "^5.4.1", 首选在刻度上显示内容 我们只需要在radar下面增加axisLabel设...

yekong 7个月前 (04-20) 喜欢

element plus select 下拉框样式自定义

element plus select 下拉框样式自定义
vue3 数据可视化大屏 - 数据资产大屏 项目开发中, 需要下拉菜单选择内容,设计师对这个下拉菜单做了美化,在设计图中多余遇到不同样式的下拉菜单,每次都要重新写样式,很耗费时间,所以想着把可能会修改的关键代码都列出来,下次就可以针对性的修改,节省开发时间。 因为element-...

yekong 7个月前 (04-20) 喜欢