JKJSCERUIVIR的博客_Vue(4)

Vue兄弟组件之间通信 eventBus

# Vue兄弟组件之间通信 eventBus > 今天碰到了这个问题，两个毫无关联的组件之间需要通信，怎么办！使用 props 一层一层的传肯定是有问题的，当然可以实现，在一个就是Vuex，定义一个公共变量也是可以的

git

发送消息

发布订阅

原创 2022-06-23 12:21:23 1069 阅读

Vue Echarts 显示地图且根据坐标设置标注点

我就想用Echarts在页面上画一张地图，这张地图显示全国，然后我有几个坐标点的经纬度信息，需要在这个地图上根据经纬度标注在Echarts图表上，再有一个就是当我点击省份的时候，地图可以切换到省份的子区域里面，接这么简单。 ## 实现之前从来没接触过，现在懵逼的一比，靠了！

json

ios

数据

原创 2022-06-23 12:21:05 2758 阅读

vue.JS 介绍

vueJS 介绍首先，vueJS 是我很早之前就想要接触学习的东西，但是呢，一直没时间，主要是在学校，事

git

前端页面

ios

原创 2022-06-23 12:20:57 84 阅读

Vue 组件传值

Vue 组件传值 vue组件间传值分类父子组件间传值：props 子父组件传值：emit 兄弟组件传值：eventbus 祖先子孙自建传值：高级用法provide、inject 整体案例组件结构：Helloworld > news > mhead 祖组件 <template> <div clas

css

git

ide

原创 2022-06-23 12:20:45 433 阅读

Vue实现点击按钮复制功能

因为之前做过一个项目，有网关标识和场景标识，都是32个长度的随机字符串，后期需要用到这两个标识，以前用户可以手动复制过去用，但是随着数据的增多

输入框

数据

随机字符串

原创 2022-06-23 12:20:36 1536 阅读

Vue祖孙组件怎么传值

Vue祖孙组件怎么传值先看基础祖孙组件，也就是 3 层嵌套的组件。关于 vue 中父子组件之间的数据传递是通过 props 和 $emit 实现，参考Vue 父子组件传值。那祖孙组件之间传值怎么实现，先了解下面的几个 vue 属性。 $props 当前组件接收到的 props 对象。Vue 实

作用域

自定义事件

git

原创 2022-06-23 12:20:24 846 阅读

Vue根据浏览器窗体变化动态设置Element Table组件的最大高度

这个场景应该经常遇到，比如说在一个页面有一个table，想让他数据过多的时候自动出现滚动条而不至于冲到屏幕外被隐藏，如果表格下面还有换页的话，换页直接冲没了，所以需要计算这个table表格的最大高度。

换页

赋值

git

原创 2022-06-23 12:20:05 1456 阅读

Vue .sync修饰符与$emit(update:xxx)

Vue .sync修饰符与$emit(update:xxx) .sync修饰符的作用在对一个 prop 进行“双向绑定,单向修改”的场景下，因为子组件不能直接修改父组件，sync在2.3版本引入

修饰符

git

语法糖

原创 2022-06-23 12:19:54 85 阅读

Vue 生成随机数

Vue生成随机数生成随机整数 Math.round(Math.random()*5) // 生成0~5的随机整数没了，这是篇水文，很水，就这点，哈哈哈哈~

git

随机数

.net

原创 2022-06-23 12:19:43 1986 阅读

Vue input textarea自动滚动到最底部

Vue input textarea自动滚动到最底部这是什么意思，就是类似于QQ聊天框一样的效果，新来的一条一条的消息会不停地补充在textarea输入框，然后展示最新来得数据，就需要textarea输入框的滚动条默认下滑到最下面。首先定一个textarea类型的input组件首先使用 vue

数据

输入框

git

原创 2022-06-23 12:19:29 1421 阅读

Vue Echarts图表dataZoom缩放区域根据数据量显示

当时用echarts图表显示数据的时候，比如折线图柱状图，当数据量太大的时候，需要设置 dataZoom实现区域缩放，但是当数据量比较少的时候又不希望出现区域缩放控件，所以说这个时候就需要根据数据量动态显示dataZoom。在 echarts 图表的 option 配置中配置 dataZoom项：

缩放

控件

数据

原创 2022-06-23 12:19:18 2914 阅读 1评论

Vue 使用 Element 组件实现前端自己的分页功能

Vue 使用 Element 组件实现前端自己的分页功能当后端没有分页的时候用 element 中的组件分页并不能对数据进行切割需要请求回数据后自己来做切割。 <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPa

数据

分页

当前页

原创 2022-06-23 12:19:04 792 阅读

Vue图片加载错误、图片加载失败的处理

# Vue图片加载错误、图片加载失败的处理注意： 1. onerror前面要用冒号 : 2. 注意看logo定义的格式，符号不要写错了

图片加载

git

.net

原创 2022-06-23 12:18:56 2073 阅读

Vue 使用 Ant-d 简单实现左侧菜单栏和面包屑功能

> 好早就写了个案例，但是一直没时间整理，其实代码敲出来是一种学习，记录下来又是另一种学习，好好学习，天天向上！我爱学习！我这边的左侧菜单栏是写死的，不是后台返回的动态菜单。其实写菜单很简单，这篇博文不会写的很多，我直接把项目放到 Git 上，down下来看一下就可以了，很简单能明白。

git

菜单栏

ico

原创 2022-06-23 12:18:41 1306 阅读

Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题

Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题最近有一个需求，是使用element组件库的 el-autocomplete 组件，实现输入框联想功能，在使用的过程中发现一个问题，就是联想的下拉框里面如果每一项的数据太长，就会被默认隐藏掉。但是现在想要的

git

下拉框

数据

原创 2022-06-23 12:17:10 6964 阅读

Vue打包后如果需要修改后台连接地址需要重新打包问题

Vue打包后如果需要修改后台连接地址需要重新打包问题之前做的项目使用的是配置文件区分开发环境还是生产环境，打包后这两个文件就消失了，所以如果生产环境的URL忘记修改或者后期有变动就需要重修修改代码重新打包，这样很不方便，然后今天就稍微解决一下这个问题。思路其实这个地方的关键就是把后台配置的UR

生产环境

html

git

原创 2022-06-23 12:16:53 784 阅读

Vue 列表中对象去重

Vue 列表中对象去重 let myData = [{ id : 123, name: 'wjw' },{ id : 123, name: 'wjw' }] // 去重 const res = new Map() let data = this.multipleSelection.filter((a

git

.net

原创 2022-06-23 12:16:41 535 阅读

Vue使用 Element 组件实现文件一次性批量上传

Vue使用 Element 组件实现文件一次性批量上传 HTML <el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :file-list="fileList

ico

git

文件上传

原创 2022-06-23 12:16:33 3038 阅读

Vue 使用 el-upload 上传文件并且提交额外参数

Vue 使用 el-upload 上传文件并且提交额外参数直接上代码吧 <el-upload style="display: inline-block;margin-right: 10px;" class="upload-demo" :action="`${baseUrl}/planFile/ge

上传文件

git

ico

原创 2022-06-23 12:16:17 806 阅读

Vue 下载 blob 流文件

Vue 下载 blob 流文件下载 Excel // 下载文件 showFile(item) { this.$http({ method: 'post', url: '/fileApi/downLoadFile', responseType: 'blob', data: { 'flieName':

下载文件

git

赋值

原创 2022-06-23 12:16:00 758 阅读

Vue 使用 echarts 散点图在区域内标点

Vue 使用 echarts 散点图在区域内标点首先是因为项目，需要在一个区域内根据坐标标出在标准大小的玻璃中标出检测出含有缺陷的坐标点。假如说，一块玻璃的大小是标准的 100200 mm的大小，这个是定死的，不会变，每块都这么大。那么就直接在界面上创建一个100200px的div，表示是这块

git

点击事件

数据结构

原创 2022-06-23 12:15:47 384 阅读

Vue 读取后台二进制文件流转为图片显示

Vue 读取后台二进制文件流转为图片显示有一个项目需要从后台读取文件流转为图片显示到页面上，传回的文件是blob文件格式的，其实很简单，稍作记录。 http 请求是这个样子的。 image/jpeg 格式的。 js代码 this.$http({ url: '请求的接口', method: 'get

赋值

图片显示

git

原创 2022-06-23 12:15:37 4387 阅读

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。其实就是这种效果：其实代码不是很难。 HTML代码： <img id="img" :src="src" alt="" @mousedown.p

git

html

缩放

原创 2022-06-23 12:15:22 2704 阅读

Vue 实现时间格式字符串计算时间差

Vue 实现时间格式字符串计算时间差这个地方的意思是两个时间，计算两个时间的时间差。比如说 2021-10-0810:39:49 到 2021-10-0810:39:40 相差多久？答：9秒。实现其实很简单，就一个方法。 /** * * @param {*} start 起始时间 2020

git

时间格式化

字符串

原创 2022-06-23 12:15:12 819 阅读

Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配

Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配其实开发大屏这个适配是最费劲的，电脑的分辨率，电脑缩放比例，电脑浏览器缩放比例都很麻烦，当然了，大屏界面本来就对分辨率有些许的要求，太差劲的分辨率本来就不适用，因为毕竟要保持页面放得下，不能出现滚

自适应

重置

加载

原创 2022-06-23 12:15:05 1350 阅读

Vue实现对象列表根据某一字段排序

Vue实现对象列表根据某一字段排序其实很简单的东西，就是说有一个对象列表，然后我们需要根据每个对象的某一个字段对这个列表排序，就用到了下面的方法。 data = [{ name: 'wjw', age: 18 },{ name: 'tcz', age: 23 },{ name: 'qy', age

字段

git

数据

原创 2022-06-23 12:14:47 524 阅读

Vue使用 Echarts 做出排行榜的感觉

git

ide

配置项

原创 2022-06-23 12:12:08 1669 阅读

# Vue 使用树形穿梭框

Vue 使用树形穿梭框 Vue 项目里面需要一个树形的穿梭框，但是 elementUI 和 ant-d 组件库的穿梭框组件效果都不是很好，因为源列表和目标列表都是需要树形结构的，所以说这个就很难搞，但是也不怕，因为大佬太多了，有插件可以提供给我们使用，接下来介绍一下这个插件。树形穿梭框插件 el-

二级

数据

git

原创 2022-06-23 12:11:54 950 阅读

Vue使用 video-player 播放 M3U8 视频流

Vue使用 video-player 播放 M3U8 视频流因为前端页面如果是接入视频流的话，说难也难，说不难也不难。如果单纯提供视频流url连接，没有中间件进行转的话： rtsp 是不能直接接近web的，因为web不能直接接入rtsp视频流，需要后端或者是中间件进行转化，把rtsp的视频流转换

ide

视频流

中间件

原创 2022-06-23 12:11:21 4600 阅读

VUE 路由参数改变重新刷新数据

VUE 路由参数改变重新刷新数据 App.vue 里面使用路由，然后通过App.vue文件中的搜索功能搜索刷新路由文件中的列表。修改 index.js 文件首先在路由文件 index.js 文件中添加几行代码：这几行代码保证我们在当前路由页面下再次跳转到这个路由不会出错。修改 App.vue

搜索

监听器

git

原创 2022-06-23 12:10:25 5990 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

粘你一身大鼻嘎

Vue兄弟组件之间通信 eventBus

Vue Echarts 显示地图且根据坐标设置标注点

vue.JS 介绍

Vue 组件传值

Vue实现点击按钮复制功能

Vue祖孙组件怎么传值

Vue根据浏览器窗体变化动态设置Element Table组件的最大高度

Vue .sync修饰符与$emit(update:xxx)

Vue 生成随机数

Vue input textarea自动滚动到最底部

Vue Echarts图表dataZoom缩放区域根据数据量显示

Vue 使用 Element 组件实现前端自己的分页功能

Vue图片加载错误、图片加载失败的处理

Vue 使用 Ant-d 简单实现左侧菜单栏和面包屑功能

Vue 使用 element 组件库解决 el-autocomplete 下拉框宽度的问题

Vue打包后如果需要修改后台连接地址需要重新打包问题

Vue 列表中对象去重

Vue使用 Element 组件实现文件一次性批量上传

Vue 使用 el-upload 上传文件并且提交额外参数

Vue 下载 blob 流文件

Vue 使用 echarts 散点图在区域内标点

Vue 读取后台二进制文件流转为图片显示

Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能

Vue 实现时间格式字符串计算时间差

Vue 大屏开发自适应 VScode | flexible.js | rem | echarts自适配

Vue实现对象列表根据某一字段排序

Vue使用 Echarts 做出排行榜的感觉

# Vue 使用树形穿梭框

Vue使用 video-player 播放 M3U8 视频流

VUE 路由参数改变重新刷新数据

欢迎