标签:vue

vue

vue2 setup() 方法下如何获取props的值

vue2 setup() 方法下如何获取props的值
vue2项目开发中,有一个组件是用setup方法来写的,这里需要在setup里获取props的值. 在 Vue 2 中,可以在 setup 函数中直接获取 props 的值。props 是 setup 函数的第一个参数,它是一个对象,包含了所有传递给组件的 prop 的值。 以下...

yekong 1年前 (2023-12-09) 喜欢

vue

vue实现序列帧动画

vue实现序列帧动画
vue 数据可视化大屏项目中,为了让页面看起来更加酷炫,会添加一些序列帧动画,这里使用的是css+雪碧图的方式来实现,我们也可以通过js加canvas的方式来实现序列帧。 将帧图片转为精灵图 将图片合成雪碧图并实现动画 html <div class="shuju...

yekong 1年前 (2023-11-21) 喜欢

vue

vue 项目中使用高德地图自定义图标覆盖物

vue 项目中使用高德地图自定义图标覆盖物
数据可视化大屏 项目开发中,需要使用高德地图来渲染自定义图标,这里将实现步骤写下来。 演示地址 vue 项目中使用高德地图自定义图标覆盖物 vue 项目中使用高德地图自定义图标覆盖物 首先引入高德地图 在vue项目中的index.html中引入高德地图,这里的key需要自己申请...

yekong 1年前 (2023-11-04) 喜欢

vue

vue3 使用element plus走马灯卡片选中自定义宽度

vue3 使用element plus走马灯卡片选中自定义宽度
数据可视化大屏开发中,需要一个卡片轮播的效果,这里选用的是element plus的走马灯,默认的走马灯选中的卡片长度只有50%和设计图的长度还是有差距的,需要调整一下。 实现代码 当我们单独设置了卡片长度后,卡片会出现偏移,这时候我们需要调整一下,让其向左移动一定的距离保证能...

yekong 1年前 (2023-10-21) 喜欢

vue

vue 访问ws websocket请求访问

vue 访问ws websocket请求访问
数据大屏开发中,需要监听实时消息,消息是使用的,最新的项目中获取ws数据的方法:vue项目中请求WebSocket获取数据 公共方法 function getSocket(url, params, callback) { let socket; if (typeof (...

yekong 1年前 (2023-10-17) 喜欢

vue

vue 实现一个可以横向拖动的步骤条

vue 实现一个可以横向拖动的步骤条
数据大屏开发中,需要实现一个步骤条的效果,但是步骤条的长度可能会很大超过了当前显示区域,所以我们需要一个可以鼠标横向拖动的效果。 动态拖动效果 开发环境 vue2 webpack js 使用插件 "@better-scroll/core": "^...

yekong 1年前 (2023-10-17) 喜欢

vue

vue2 webpack设置调试运行端口

vue2 webpack设置调试运行端口
数据大屏项目在调试开发中可能会需要指定调试端口号,以便于不和其他项目的端口冲突。 这里我们找到vue.config.js文件 关键代码 这里我们指定8083为端口号 devServer: { port: 8083// 设置端口为8083 }, 完整实例代码 'use s...

yekong 1年前 (2023-10-14) 喜欢

vue

vue将组件插入到body中

vue将组件插入到body中
vue项目在开发中经常会使用到弹窗组件,但是在使用弹窗组件的时候会遇到一个问题就是当组件有很多,而弹窗组件又在子组件中时,会出现弹窗层级太低出现错位等问题,这时候我们就需要考虑让弹窗组件在最外层不会受到子组件的影响。 关键代码 我们在写组件的时候,可以加入以下代码,将组件插入到...

yekong 1年前 (2023-10-13) 喜欢

vue

vue2 使用百度地图插件vue-baidu-map

vue2 使用百度地图插件vue-baidu-map
2023年10月01日更新 百度地图官网api已更新,vue-baidu-map使用的api已过时,推荐使用最新的百度地图api:vue项目中使用百度地图 新版本和旧版本对比:就目前的使用体验旧版本在使用自定义颜色地图的时候加载瓦片图经常出现空白,用户体验很不好,所以这里推荐使用...

yekong 1年前 (2023-10-01) 喜欢