腾讯地图暂存

config.json

@@ -310,16 +310,23 @@
     {
       "name": "LazyComponent",
       "chnName": "组件懒加载",
-      "desc": "用来实现组件的懒加载",      
+      "desc": "用来实现组件的懒加载",
       "type": "component",
       "showDemo": true
     },
-    {      
+    {
       "name": "CountUp",
       "chnName": "数字滚动组件",
       "desc": "可用于数字滚动变化",
       "type": "component",
       "showDemo": true
+    },
+    {
+      "name": "Map",
+      "chnName": "地图",
+      "desc": "vue版的腾讯地图",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

src/demo/map.vue

@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <!-- 组件名和描述 -->
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+
+        <!-- DEMO区域 -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>

src/package/lazycomponent/src/lazycomponent.vue

@@ -97,18 +97,14 @@ export default {
             window.addEventListener("scroll",that.listenElm)
         },
         listenElm(){
-            let that = this;   
-            if(that.timer){
-                clearTimeout(that.timer);
-            } 
-            that.timer  = setTimeout(()=>{
-                if(that.NewIntersectionObserver({direction:that.direction})){
+            let that = this;  
+            this.requestAnimationFrame(() => {
+                 if(that.NewIntersectionObserver({direction:that.direction})){
                     that.showComponent();
                     //移除监听
                     window.removeEventListener("scroll",that.listenElm)
                 }
-            },100)        
-            
+            })              
         },
         //是否可见判断
         Intersections(entries){               

src/package/map/index.js

@@ -0,0 +1,7 @@
+import Map from './src/map.vue';
+
+Map.install = function(Vue) {
+  Vue.component(Map.name, Map);
+};
+
+export default Map

src/package/map/src/map.vue

@@ -0,0 +1,17 @@
+<template>
+    <div class="nut-map"></div>
+</template>
+<script>
+export default {
+    name:'nut-map',
+    props: {
+    },
+    data() {
+        return {};
+    },
+    methods: {
+    }
+}
+</script>
+<style lang="scss">
+</style>

src/view/map.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+       <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Filter" 
+        desc=""
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <nut-codebox :code="demo1"></nut-codebox>
+
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>参数</th>
+                <th>说明</th>
+                <th>类型</th>
+                <th>默认值</th>
+                <th>可选值</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+        
+        <h5>Events</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>事件名</th>
+                <th>说明</th>
+                <th>回调参数</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            demo1:`test`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>