1.获取浏览器属性:window.navigator.userAgent
2.Vue Baidu Map lablestyle的api问题 vue会对其报错,
但是打包为生产环境的代码时 没有vue的警告包就不会报错
3.Vue Baidu Map 要获取当前缩放等级时,可以通过在
setZoom (e) { this.initialzoom = e.target.getZoom() },
来获取当前地图的缩放等级。
4.如果Vue Baidu Map中的事件不生效时,我们可以在ready事件中为我们的百度地图绑定你想要的绑定的事件
handler({BMap, map}) { let self=this this.BMap = BMap; this.map = map; this.map.addEventListener('zoomend',function (e) { self.changeZoom(e) self.setZoom(e) });this.map.addEventListener('zoomstart',function (e) { self.changeZoom(e) self.setZoom(e) }) },
5.谷歌跨域插件:Moesif CORS
6.超出显示省略号:
overflow: hidden;/*超出部分隐藏*/
text-overflow:ellipsis;/* 超出部分显示省略号 */
white-space: nowrap;/*规定段落中的文本不进行换行 */
width: 250px;/*需要配合宽度来使用*/
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
width: 250px;
total: {
type:Number,
default:0
},
9.有些元素,我们为了让用户有对网页元素有更直观的感受。经常需要让鼠标变成小手的状态。以往我总使用a标签 发现a标签没有href属性是不行的 现在发现一个css属性
cursor:pointer
10.表格中设置单实线
table,tr,td{
border-collapse: collapse;
border: 1px solid #000000;
}
11.animation和 transition在同一个元素上时也许会导致冲突使过渡失效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style id="style">
.column {
position: relative;
width: 300px;
height: 100px;
border-left: 1px gray solid;
border-right: 1px gray solid;
margin: 100px auto;
background-color: #00AFE9;
}
.column:before {
position: absolute;
content: '';
display: block;
height: 20px;
width: 100%;
border: 1px solid;
border-radius: 50%;
top: -10.5px;
z-index: 1;
}
.column:after {
position: absolute;
content: '';
display: block;
height: 20px;
width: 100%;
border-bottom: 1px solid;
border-radius: 50%;
bottom: -10px;
background-color: #00AFE9;
}
.inner1 {
position: relative;
background-color: white;
text-align: center;
transition: 1s;
animation-name: move;
animation-duration: 3s;
animation-fill-mode: both
}
@keyframes move {
from {
height: 100px;
}
to {
height: 50px;
}
}
.inner{
width: 300px;
height: 100px;
background-color: white;
text-align: center;
transition: 2s;
}
.inner1:after {
position: absolute;
content: '';
display: block;
height: 20px;
width: 100%;
border-radius: 50%;
background-color: white;
bottom: -10px;
}
.inner1 h5 {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
</style>
</head>
<body>
<div id="app">
<div class="column">
<div class="inner1" >
<div class="inner" :style="getHeight()">
<h5>{{msg}}G/1T</h5>
</div>
</div>
</div>
<button @click="add">增加</button>
</div>
<script type="text/javascript" src="../vue/js/vue.js"></script>
<script>
let vm = new Vue(
{
el: '#app',
data() {
return {
msg: 300
}
},
mounted() {
// setTimeout(function () {
// this.msg=500
// console.log(this.msg)
// },300)
// this. getHeight()
},
methods: {
getHeight() {
let num = null;
num = this.msg / 1025;
num = 100 - (num * 100);
let style = document.getElementById('style')
style.innerHTML += '@keyframes move {' +
' from{' +
' height: 100px;' +
' }' +
' to{' +
' height: '+num+'px;' +
' }' +
' }'
style.innerHTML += '.inner1 {position: relative;background-color: white;text-align: center;transition: 1s;animation-name: move;animation-duration: 3s;}'
return {height: num + 'px'}
},
add() {
// alert(this.msg)
this.msg += 100
let num = null;
num = this.msg / 1025;
num = 100 - (num * 100);
document.getElementsByClassName('inner')[0].style.height=num+'px'
}
}
}
)
</script>
</body>
</html>
12.跨域的解决方案:当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
jsonp,cors,反向代理
13.实现滚动效果却不出现滚动条
::-webkit-scrollbar{
display: none;
}
14.vue中使用路由传递参数(切记path和query,name 和params一一对应 不然会报错)
-
传递参数 -- this.$router.push({path: ' 路由 ', query: {key: value}})
参数取值 -- this.$route.query.key
-
传递参数 -- this.$router.push({name: ' 路由的name ', params: {key: value}})
参数取值 -- this.$route.params.key
15.