Vue
Vue相关
跳跳的小古风
热爱前端的一枚小可爱~
展开
-
a-select和a-tree结合实现地区选择功能及可单独选择某一级,如只选择省,或者只选择市
需要实现地区联动选择,同时实现选父级自动勾选所有子级、可单独选父级两种效果。原创 2024-03-25 10:50:30 · 446 阅读 · 1 评论 -
vueRouter常用属性
很多情况下,用户希望查看详情页以后,返回列表页刚刚浏览的位置,但由于列表页组件已经被销毁,所以我们重新返回到列表页后页面会置顶,就需要重新下拉查看列表,这样就做了很多没有必要的操作。如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 “/app/”,所有的请求都会在url之后加上/app/也可以使用如下两种方案(更推荐使用scrollBehavior方案)原创 2023-11-29 10:17:38 · 396 阅读 · 0 评论 -
vue2.0中使用v-if/v-show切换后echarts不显示和宽高问题
但新的问题,tab切换页面使用v-show时,echarts图表的宽高变成100px,因为v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染,会出现 echarts 图表未获取到最外层大盒子的宽度而显示错误的情况。因为在切换后并没有触发生命周期函数,没有获取到dom结构,而无论是v-if或v-else-if或v-else,都不能和ref一起使用,而且不论是直接使用,还是在子元素上使用ref,都会获取不到真实dom元素的。所以使用v-show在什么情况都能获取真实dom。原创 2023-11-21 09:50:30 · 1458 阅读 · 0 评论 -
vue使用mpegts.js教程
mpegts.js 是在 HTML5 上直接播放MPEG-TS/FLV流的播放器,针对低延迟直播优化。mpegts.js 通过在 JavaScript 中渐进化解析 MPEG2-TS 流并实时转封装为 ISO BMFF (Fragmented MP4),然后通过 Media Source Extensions 接口把音视频数据共给 HTML5 < video > 元素。原创 2024-01-30 16:30:05 · 2136 阅读 · 1 评论 -
移动端-vue-BScroll用法教程
BetterScroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件,是最接近与原生的滚动插件,兼容pc和移动端。原创 2024-01-05 11:20:57 · 674 阅读 · 0 评论 -
前端文件下载的多种方式
在当前窗口打开百度链接在新窗口打开百度链接网页返回顶部锚点跳转——本页面跳转原创 2024-02-06 11:11:40 · 1168 阅读 · 0 评论 -
flv视频格式批量截取封面图(不占内存版)--其他视频格式也通用
截取过程中如图3,截取完直接返回图片信息,如图1格式,未返回的仍显示加载动画,如图2。需要使用插件播放、截取flv格式视频。当前使用的是mpegts.js。批量显示视频,后端若返回有imgUrl,则直接显示图1,若无,则需要根据视频地址自己截取,截取中显示图2,mpegts.js具体使用可移步。原创 2024-02-02 16:14:23 · 878 阅读 · 0 评论 -
vue 实现返回顶部功能-指定盒子滚动区域
【代码】vue 实现返回顶部功能-指定盒子滚动区域。原创 2023-12-07 18:52:32 · 312 阅读 · 0 评论 -
vue a-table 实现指定字段相同数据合并行
我们这里把相同的checked字段值进行合并。原创 2024-02-28 17:20:12 · 822 阅读 · 2 评论 -
vue3+vant 实现树状多选组件
移动端需要复刻Pc端如上图的功能组件,但vant无组件可用,所以自己封装一个。原创 2023-11-17 09:40:40 · 1588 阅读 · 0 评论 -
防止攥改之水印功能组件
【代码】防止攥改之水印功能组件。原创 2023-09-19 16:57:17 · 117 阅读 · 0 评论 -
vue3+vant4封装日期时间组件(年月日时分秒)
vant4目前无法直接使用vant3自带的年月日时分秒组件,综合考虑下,决定自己封装一个!原创 2023-09-05 19:39:14 · 2208 阅读 · 5 评论 -
echart之map地图图表使用教程
官方解释你可以有选择地退出默认的深度响应式/只读转换模式,并将原始的,未被代理的对象嵌入状态图中。它们可以根据情况灵活运用:有些值不应该是响应式的,例如复杂的第三方类实例或 Vue 组件对象。(第三方实例)当渲染具有不可变数据源的大列表时,跳过 proxy 转换可以提高性能。解决方案在实例化echart时,将其指定为非响应式的import {原创 2023-07-15 19:24:29 · 3393 阅读 · 2 评论 -
vue2.0与vue3.0及vue与react区别
vue2.0与3.0及vue与react区别vue2.0 与 vue3.0 区别1. 双向绑定原理2.Vue3支持碎片(Fragments)3.Composition API4.生命周期5.v-if和v-for的优先级6.typescript支持vue与 react区别共同点1.虚拟dom+diff算法2.提供了响应式和组件化的视图组件。3.注意力集中保持在核心库,而将其他功能如路由和全局状态管理交给相关的库。(vue-router、vuex、react-router、redux等等)4.数据驱动视图(无需原创 2023-02-20 17:52:22 · 723 阅读 · 0 评论 -
vue solt插槽学习。
TMap.LatLng(用于创建经纬度坐标实例。)原创 2021-07-26 10:38:00 · 91 阅读 · 0 评论 -
element UI指定下拉框样式修改
在一个页面中,有多个下拉框,由于下拉框等级与dom同级,只能改变所有。解决:在select 中加入popper-class=“名称” 即可为下拉框添加类名,从而修改原创 2021-07-29 16:20:19 · 1316 阅读 · 0 评论 -
Slider 滑块实现自动播放及往前往后移动的组件
<template> <div class="time-line" v-show="true"> <el-row> <el-col :span="4"> <div class="content" style="display:inline-block;"> <img v-if="!show" :src="'./static/images/newstop.png'" title=原创 2021-08-03 11:20:36 · 1155 阅读 · 0 评论 -
elementUI 下拉框实现隐藏时触发相关事件
el-select 下拉框隐藏时触发相关事件 =>@visible-change设置额外的class,=> popper-class @visible-change="changeValue1($event)" changeValue1: function(callback, vc) { //只有回调参数为true时才触发 ctx.getAreaListDataSearch(vc,1)这个函数; if (callback === true) { docum.原创 2021-10-14 16:56:27 · 1273 阅读 · 0 评论 -
vue组件通信方式
A组件与C组件通信时一般用B来做中转站,当A组件需要把信息传给C组件时,B接受A组件的信息,然后利用属性传给C组件,这是一种解决方案,但是如果嵌套的组件过多,会导致代码繁琐,代码维护比较困难;子组件通过$emit(事件名,参数)向外弹出一个自定义事件,在父组件中的属性监听事件,可以获得子组件中传出来的值。$parent为当前组件树的根实例,如果当前实例没有父实例,实例将会是其自己。$children为当前组件的直接子组件,是一个无序的数组。子组件的数据通过插槽的方式传给父组件使用,然后再插回来。原创 2022-06-16 13:45:40 · 562 阅读 · 0 评论 -
vue 使用mapbox对当前行政区划进行反选遮罩
地图区划反选遮罩原创 2022-07-02 14:02:07 · 1745 阅读 · 2 评论 -
色带组件(vue、react)。
如果所示:``Vue.prototype.bus = new Vue;原创 2022-08-08 13:57:02 · 616 阅读 · 0 评论 -
vue拖拽盒子;vue移动
s原创 2022-08-22 14:24:04 · 997 阅读 · 0 评论 -
vue 引入外部字体样式
vue 引入外部字体原创 2022-08-24 16:12:49 · 470 阅读 · 0 评论 -
Vuex刷新页面数据丢失问题
vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被清空。原创 2022-09-09 18:30:36 · 1237 阅读 · 0 评论 -
vue 跳转新窗口传递参数并改变窗口名称
需求: 地址不带参数获取之前的数据修改窗口名称点击跳转组件const msg = { zoom :map.getZoom()-0.5, lat: map.getCenter().lat, dataList:data, name:data.saveName }; //sessionStorage.setItem("key", "value"); 页面临时缓存数据 //不能直接传对象过去 所以转成字符串 .原创 2022-05-26 16:11:56 · 942 阅读 · 0 评论 -
el-tree实现同级直接选择,不同级切换选择
用 @check实现@check=“handleCheckChange” handleCheckChange(data, checked, indeterminate) { if (data.id.indexOf("all") == -1) { let res = this.$refs.tree.getCheckedNodes(); //这里两个true,1. 是否只是叶子节点 2. 是否包含半选节点(就是使得选择的时候不包含父节点) let arrLabel = [];.原创 2021-10-14 17:09:54 · 1025 阅读 · 2 评论 -
elementUI的表格table 给列添加样式
需求:针对数字指标点击时选中图标并高亮,再次点击时取消选中图标,取消高亮同时点击行时放开列高亮 点击列时放开行高亮解决思路及方案:该element表格目前只有直接行点击高亮函数 所以我们使用@header-click+:header-cell-class-name+:class-name实现对表头图标和列的样式改变通过点击表格头时对指定数据进行更改来渲染样式类 <el-table :data="saveTableData.tableData" :key="datar原创 2022-01-20 10:32:33 · 1996 阅读 · 0 评论 -
elementUI的el-tree添加title属性
效果图:代码实现: <el-tree ref="regiontree" :props="regiontreeprops" :data="RegionTreeData" @check="handleCheckChange" > <span slot-scope="{ node }" :title="node.label"> //根据自己的需求修改title的绑定值即可 <span @click="handleClickLoca原创 2022-01-20 09:58:54 · 2637 阅读 · 1 评论 -
AES数据加密
这里写自定义目录标题// 引入加密文件 <script src="../../assets/js/aes.min.js"></script> //加解密用 var CryptoJSKey = "cBssbHB3ZA==HKXT";//加密解密key值 自定义十六位十六进制数作为密钥 //加密函数 var suff = new Date().getMilliseconds();//根据当地时间返回时间的毫秒: var key原创 2021-11-18 15:28:06 · 90 阅读 · 0 评论 -
文本流实现下载
downloadCaseResFileByCode({ caseResourceId: this.fileList.id }).then( (res) => { let a = document.createElement("a"); let blob = new Blob([res.data],{type: 'application/msword'});//word //{type:"application/vn..原创 2021-03-17 14:55:51 · 316 阅读 · 0 评论 -
vue中阻止@click事件冒泡
@click.stop=“deleteTempNumGroup(numblock, index)”只需在click后加上stop原创 2021-10-18 15:55:33 · 1828 阅读 · 0 评论 -
Vue 两个el-table合并同时横向滚动
【代码】Vue 两个el-table合并同时横向滚动。原创 2021-10-15 10:57:23 · 349 阅读 · 2 评论 -
默认滚动条样式修改
滚动条宽度 .el-table__body-wrapper::-webkit-scrollbar { width: 3px; height: 5px !important; } 颜色 .el-table__body-wrapper::-webkit-scrollbar-thumb { border-radius: 4px; background: #fff !important; } 轨道颜色 .el-table__body-wrapper::-webkit-scrollbar原创 2021-09-13 15:27:45 · 457 阅读 · 0 评论 -
vue中使用axios的多种方式
vue中使用axios的多种方式结合vue-axios,使用vue.use方法axios 改写为 Vue 的原型属性结合vuex 封装 axios结合vue-axios,使用vue.use方法//首先在主入口文件main.js中引用import axios from 'axios'import VueAxios from 'vue-axios'Vue.use(VueAxios,axios);//在组件文件中的methods里去使用getNewsList(){ this.axios.原创 2021-01-14 12:00:24 · 438 阅读 · 0 评论 -
vue table选中编辑成功保存后不高亮任何行
问题描述: 每次编辑成功保存后table总是高亮第一行需求 :不希望高亮行 <el-table border :data="list" highlight-current-row @current-change="handleSelectChange" @selection-change="handleDeletList" ref="monthlyPlanTable" //注册引用信息 > &.原创 2021-07-09 10:22:53 · 173 阅读 · 0 评论 -
vue.js elementUI 表格实现隔行变色,自己定义颜色。(斑马纹表格颜色设置,使两种不同的颜色间隔出现)
文章目录此为效果图开始实现设置表头和斑马线样式设置斑马线样式函数此为效果图开始实现设置表头和斑马线样式<el-table :header-cell-style="{background:'#fff'}" //设置表头颜色 :row-class-name="tableRowClassName" //斑马纹表格样式设置 > </el-table> 设置斑马线样式函数 tableRowClassNa原创 2021-01-07 15:33:33 · 6962 阅读 · 5 评论 -
vue react 多级菜单动态渲染 导航菜单(一级二级三级不限层级渲染)
1.创建一个带子菜单的菜单列表MenuUtils.js,如下:var menus = [ { name:"离线", index:"offline", }, { name:"日志", index:"log", }, { nam原创 2020-12-28 17:51:17 · 3974 阅读 · 0 评论 -
vue左侧导航切换同时更换图标图片( 原生切换图片 )功能实现
文章目录此为效果图开始编写使用数组目录循环数组建立目录并实现切换图片思路判断哪一个路由是活动路由此为效果图左侧图标为图片,点击时图片变成另一张(活动图片)需求:左侧导航切换页面,同时切换图片。底部为公共组件:思路:在数组中写初始图片路径img,点击时图片路径active,判断哪一个是当前活动路由,则匹配点击时的图片路径active,其他匹配初始图片路径img.开始编写使用数组目录menus:[ {text:"首页",url:'/',img:"a.png",active:原创 2021-01-07 15:18:04 · 1141 阅读 · 0 评论 -
写VUE项目中记录的点(element-ui,transition)
这里写目录标题1.Element-uiTooltip文字提示Badge 标记el-avatar 头像1.Element-uiTooltip文字提示Tooltip 文字提示 常用于展示鼠标 hover 时的提示信息Badge 标记Badge 标记 出现在按钮、图标旁的数字或状态标记。el-avatar 头像Avatar 头像用图标、图片或者字符的形式展示用户或事物信息若DOM图片不变 在 :src后面加上:key值,就是:src的值...原创 2021-01-08 16:16:22 · 2456 阅读 · 1 评论 -
vue el-element中el-select的el-option选中值,但页面框中不显示值,需要输入一个其他框值才显示,input同理
问题描述: el-element中el-select的el-option选中值,但页面框中不显示值,需要输入一个其他框值才显示。//在el-select中写一个事件 @change="change" <el-form-item prop="aa"> <el-select v-model="dataForm.aa" @change="change" //加上这个函数 > <el-option v-for=.原创 2021-07-07 10:06:53 · 3535 阅读 · 0 评论