更新时间：2018年12月26日
关于element组件tree中props的理解
<el-tree :data="treedata" :props="defaultProps" :indent="10" highlight-current></el-tree>
defaultProps: {
children: 'children',
label: 'acqGroupName',
isLeaf: 'isLeaf'
}
通过这个可以根据后台返回的字段的数据赋值到树上
从已有的数组返回选定的元素或从以后的字符串返回指定字符
方法：slice()
语法：slice(start, end)
不包含start和end本身元素
该方法不会改变原有数组，而是返回一个子数组，可以使用负值从尾部选取元素
从数组中选出所有符合条件的元素
方法: filter()
语法：
this.moreWayPoints = this.moreWayPoints.filter((e) => { // 过滤数组不为空
return e.addressValue !== ''
})
改方法不会对空数组进行检测，不会改变原始数组。
listeners 和 attrs
用法：
<route-manage
v-on="$listeners"
v-bind="$attrs"
:isroutevisiable="isRouteVisiable"
ref="routemanage"
>
</route-manage>
-
$listeners可以使子组件直接使用父组件的方法，但是不能跨级，比如有父组件，组件1，组件2，组件2是组件1的子组件，组件1是父组件的子组件，理论上说组件2应该是父组件的孙组件。 但是如果组件2使用了
$listeners，那么组件2和组件1在父组件看起来是平级的，都是子组件，所以组件2能直接通过$emit使用父组件的方法或者传值给父组件。 否则组件2要和父组件通信，只能先传给组件1，再让组件1传给父组件 -
$attrs可以传值给子组件，子组件可以不用通过porps注册，直接通过
$attrs.变量名使用，在本例子中的用法就是// 监听 watch: { '$attrs.isroutevisiable' (val) {} } // 在方法中使用 methods: { handle () { let demo = this.$attrs.isroutevisiable } }
鼠标跟随
this.map.getViewport().addEventListener('mousemove', (e) => {
let tips = document.getElementById('tips')
tips.style.left = e.clientX - 340 + 'px'
tips.style.top = e.clientY - 40 + 'px'
})
获取要跟随鼠标的div，动态设置所在的位置，div的position要设置为absolute。
绑定与解绑右键事件
mouseOnoff () { // 定义右键的事件
event.preventDefault() // 阻止原生的右键事件
this.handleCancle()
},
// 绑定
this.map.getViewport().addEventListener('contextmenu', this.mouseOnoff)
// 解绑
this.map.getViewport().removeEventListener('contextmenu', this.mouseOnoff)
this.map.getViewport()只是获取一块我要绑定右键事件的div，换成任何div都可以。
css实现闪烁效果
.cssanimation {
position: absolute;
height: 50px;
width: 50px;
left: -25px;
top: -25px;
border-radius: 25px;
background: rgba(255, 0, 0, 0.9);
transform: scale(0);
animation: myfirst 2s;
-webkit-animation: myfirst 2s;
animation-iteration-count: infinite;
/* &:hover {
display: none;
} */
}
@keyframes myfirst {
from {
transform: scale(0);
background: rgba(255, 0, 0, 0.9);
}
to {
transform: scale(2);
background: rgba(0, 0, 0, 0);
}
}
标签内做多条件的选择判断
根据状态选择iconfont图标，class实现
<i :class="['iconfont statusicon', {'icon-wait' : item['status'] === '01', 'icon-tongguo' : item['status'] === '02', 'icon-butongguo' : item['status'] === '03'}]"></i>
利用三目运算符嵌套实现多级选择判断
<el-button v-for="(item, index) in featuresBtnArr" :key="index" class="featuresbtn" @click="handleChooseFeature(item)" size="small"></el-button>
nextTick
等数据更新完后才执行的回调函数
- 传值给子组件并调用子组件的方法
this.$nextTick(() => { this.$refs['managemes'].findByPage() }) - 组件内调用
this.$nextTick(() => { this.handleJudgeInput() })
阻止冒泡
阻止冒泡的目的是为了防止有一些操作触发了父级的的方法，如果只是想单纯触发子级的方法，那么就需要用到防止冒泡
在子级要触发的方法加一行代码就可以
window.event ? window.event.cancelBubble = true : e.stopPropagation()
根据index判断渲染样式，用style实现
:style="[{'border-top': index === 0 ? 'none': ''}, {'border-bottom': index === DataArr.length - 1 ? 'none': ''}]"
时间戳转换成普通的日期格式
// 时间戳转日期格式
formatUnixtimestamp (time) {
let unixtimestamp = new Date(time) // 毫秒级的时间戳不用*1000
let year = 1900 + unixtimestamp.getYear()
let month = '0' + (unixtimestamp.getMonth() + 1)
let date = '0' + unixtimestamp.getDate()
let hour = '0' + unixtimestamp.getHours()
let minute = '0' + unixtimestamp.getMinutes()
let second = '0' + unixtimestamp.getSeconds()
return year + '-' + month.substring(month.length - 2, month.length) + '-' + date.substring(date.length - 2, date.length) + ' ' + hour.substring(hour.length - 2, hour.length) + ':' + minute.substring(minute.length - 2, minute.length) + ':' + second.substring(second.length - 2, second.length)
}
浏览器渲染过程
- 解析HTML，构建DOM树（这里遇到外链，此时会发起请求）
- 解析CSS，生成CSS规则树
- 合并DOM树CSS规则，生成render树
- 布局render树（Layout/reflow），负责各元素尺寸，位置计算
- 绘制render树（paint），绘制页面像素信息
- 浏览器会将各层的信息发送给GPU，GPU将各层合成（composite），显示在屏幕上
判断是否退出全屏
mounted () {
window.onresize = () => {
if (!this.checkFull()) {
this.fullScreenOnoff = false
}
}
}
methods: {
// 判断是否退出全屏
checkFull () {
let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
if (isFull === undefined) {
isFull = false
}
return isFull
},
}
