备忘录

alca20120

于 2019-05-29 16:52:00 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hsBK/p/10944797.html

版权

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; 
   
    7.js中的call（）方法：它只表示在call的过程中自身对象中的this指向第一个参数对象，对于函数的调用并无影响 
  
    8.vue中，在创建子组件中给变量设置默认值的时候要以下面这种形式设置 
  
    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.

转载于:https://www.cnblogs.com/hsBK/p/10944797.html

alca20120

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
备忘录

1.获取浏览器属性：window.navigator.userAgent2.Vue Baidu Maplablestyle的api问题 vue会对其报错，但是打包为生产环境的代码时没有vue的警告包就不会报错3.Vue Baidu Map 要获取当前缩放等级时，可以通过在 setZoom (e) { this.initialzoom = ...
复制链接

扫一扫