- 博客(24)
- 收藏
- 关注
RSS订阅
1原创 深拷贝和浅拷贝
深拷贝和浅拷贝的区别浅拷贝：拷贝前后对象的基本数据类型互不影响，但拷贝前后对象的引用类型，会互相影响。function deepClone(obj){ var cloneObj={} for(var i in obj){ if(obj hasOwnProperty(i)){ cloneObj[i]=obj[i] } } return cloneObj}深拷贝：对对象中的子对象进行递归拷贝，拷贝前后的两个对象互不影响。function deepClo
2021-09-30 15:50:05
86
原创 前端小知识点——html中占位隐藏
CSS中的占位隐藏属性<style>.abc{ visibility:hidden; }</style>注意：display:none；是直接隐藏掉，不占位置visibility:hidden；是隐藏了，但是还占着位置
2021-08-17 10:21:38
553
原创 flex-warp换行后之间的间隔调整
flex-warp换行后之间的间隔调整没加align-content属性之前的代码是这样的：.branchWorkshop ul{ display: flex; width: 90%; height: 100%; margin:0; padding:0; flex-wrap: wrap; /* ul盒子里面的内容水平居中 */ margin:0 auto;}效果是这样的：总结：没加align-content之前，元素在换行之后，剩余空间被所有行平分，各行将会伸展
2021-08-11 11:29:19
12946
原创 一个页面两个table的样式修改
一个页面两个不同el-table的样式修改注意：修改el-table的样式的时style标签不能加上scoped如果页面有两个el-table，那么给每一个el-table加加一个class类名，来分别写它们的样式，对于两个公共部分的样式，则可以通过全局的写法.el-table来写,比如下面例子中去掉table中的线条的样式，就是全局的写法<el-table :data="tableData" style="width: 100%" height="250" class="createInfo"
2021-08-10 16:49:18
1696
原创 push一个对象集合
push一个对象集合var arrStr = {id:dataArr.id, coordinate:dataArr.coordinate};this.idList.push(arrStr);
2021-08-10 16:06:19
327
原创 vue递归遍历循环
vue重递归遍历循环traverseArr(obj){ if(obj){ this.idList.push(obj.id) if(obj.children){ obj.children.forEach(element => { this.traverseArr(element) }) } }}this.traverseArr(obj);
2021-08-10 16:04:01
2096
原创 实现动态循环列表上播放和暂停按钮来回切换且列表之间只能有一个处于播放状态的功能
动态循环图片列表控制按钮显示隐藏<div class="branchWorkshop"> <ul> <li v-for="(everyWorkShop,i) in workShopList" :key="i"> <div class="workshopImg" :style="{ 'background-image': 'url(' + everyWorkShop.imgUrl + ')', 'background-repeat':'
2021-07-29 11:50:30
465
原创 v-for动态图片列表展示以及动态给div添加背景图片
v-for动态图片列表以及动态给div添加背景图片方法效果如下图所示：HTML:<div class="branchWorkshop"> <ul> <li v-for="(item,i) in workShopList" :key="i"> <div class="workshopImg" :style="{ 'background-image': 'url(' + item.imgUrl + ')', 'background-
2021-07-29 10:21:10
2227
原创 el-tree中更改鼠标移动时、点击时和失去焦点时的背景色
el-tree中更改鼠标移动时、点击时和失去焦点时的背景色注意：此修改仅在没有加scoped的style标签下起作用,加上scoped则不起作用，如果该页面其他样式需要有scoped，那就在页面上再加一个没有scoped的style标签专门来写这个el-tree的样式喽~鼠标浮动过的背景颜色/* 鼠标浮动过的背景颜色 */.el-tree-node__content:hover{ background: #244470;}鼠标点击时节点时的背景颜色及字体颜色/* 鼠标点击时节点的背景颜
2021-07-28 10:33:43
3021
原创 vue查看在线文档的方法
vue打开预览word、excel、pdf、office之类文件的方法及报错html部分：<button @click="getDoucument">点击查看</button>JS部分：methods:{ getDoucument(){ window.open('https://view.officeapps.live.com/op/view.aspx?src=' + ' 文档地址 ') } }注意：window.open(‘https://view.off
2021-07-28 09:23:50
1735
原创 vue中给element树结构的节点添加单击事件，控制弹框的开启和关闭
vue中给element树结构的节点添加单击事件，控制弹框的开启和关闭例子：1、给树结构的叶子节点添加点击事件**@node-click=“handleNodeClick”；**2、**点击功能控制popover弹框的开启和关闭：**弹框里面的数据是通过调后台动态获取的，如果点击叶子节点的id和上一次id是同一个，则通过弹框值visible取反来开启关闭弹框，如果当前id和上一次id不是同一个，则获取当前id的弹框对应的内容<el-tree class="filter-tree" :dat
2021-07-26 10:14:54
7298
原创 vue中svg-icon添加点击事件不生效
vue中svg-icon添加点击事件不生效在svg-icon外面再包裹一层a标签，将click事件绑定到a标签上，哦了~亲测有用<a href='javascript:;' @click="handleKeepOut"> <svg-icon slot="prefix" iconClass="play" class="el-icon-user-solid" id="playButton" /></a>...
2021-07-26 09:34:13
2367
原创 Vue子组件向父组件传值
Vue组件传值之——子组件向父组件传值——子组件传父组件：主要通过this.$emit(event,arg)$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。两步走：因为是子传父，数据在子组件中1、子组件是一个button按钮，并为其添加了一个click事件，当点击的时候，子组件通过this.$emit(event,message)将参数message传给父组件2、父组件在子组件的标签里，定义了一个自定义事件
2021-07-26 09:26:14
6763
原创 vue框架elemnet-ui中Popover弹出框的使用
vue框架elemnet-ui中Popover弹出框的使用**一、如何修改内置的el-popover样式（亲测有效）**1、在vue页面文件中使用el-popover组件时，在style标签中设置样式无效；解决方案：el-popover比较特殊，它生成的div不在当前组件之内，是和App.vue组件的div平级，需要设置全局style，或者是在当前页面的style标签中去掉scoped，再或者是在当前页面再写一个style标签，将el-popover组件的样式独立写在这个没有scoped的styl
2021-07-21 10:02:39
1642
原创 vue框架使用elemet-ui中树形结构单击事件
elemet-ui中树形结构单击事件按照官方文档的描述，node-click 节点被点击时的回调：共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。html部分：<template> <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all highlight-current :filter-nod
2021-07-21 09:35:04
768
原创 父组件向子组件传值
Vue中父组件向子组件传值三步走：1、子组件用标签的形式嵌进父组件，并自定义传值的名称“message”，通过动态绑定“message”，将父组件的数据赋值给message2、子组件通过props接收“message”3、子组件以标签的形式将“message”打印出来父组件中：<template> <div > <!-- <DeviceInfo></DeviceInfo> --> <EquipmentPage
2021-07-16 18:20:22
265
原创 Vue中路由传参方法
第一种方法通过路由属性中的name来确定匹配的路由，通过params来传递参数。缺点：刷新页面数据会丢失methods：{ getModel(id) { this.$router.push({ name: 'MainWashing', params: { id: id } }) }对应路由配置: { path: '/mainWashing', name:
2021-07-15 10:13:57
104
原创 网址前面小图标如何更换
前端中想要更改网址前面的小图标准备一张32*32的图标，定义成ico的格式，如favicon.ico，放在根目录下，在中插入如下代码：<link rel="icon" href="favicon.ico" />href中是ico格式图片存放的地址
2021-07-14 11:10:15
841
原创 悬浮标签遮挡，导致该位置的点击事件失效
**前端中由于移动鼠标触发的悬浮标签遮挡，导致该位置的点击事件失效**在悬浮标签的div上增加样式 style="pointer-events: none;" 即可解决悬浮标签遮挡影响点击事件的问题
2021-07-14 10:54:50
479
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人