Merge branch 'dev' of https://github.com/jdf2e/nutui into dev

config.json

@@ -310,16 +310,37 @@
     {
       "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
+    },
+    {
+      
+      "name": "Shortpwd",
+      "chnName": "短密码弹层",
+      "desc": "6位短密码弹层",
+      "type": "component",
+      "showDemo": true
+    },{
+      "name": "ParallaxScroll",
+      "chnName": "视差滚动",
+      "desc": "用于页面展示的视差滚动",
+      "type": "component",
+      "showDemo": true
     }
   ]
 }

src/demo/map.vue

@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <!-- 组件名和描述 -->
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <nut-map class="map-box" :option="map1"></nut-map>
+         <!-- <nut-map :id="test2" class="map-box" :option="options" :markers="markers"></nut-map> -->
+        <!-- DEMO区域 -->
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{    
+            map1:{
+                id:'test1',        
+                options:{                
+                    center:[39.914850, 116.403765],
+                    zoom: 15,
+                    minZoom:2,                
+                    maxZoom:18,
+                    mapZoomType:'CENTER',
+                    //MapTypeId:'SATELLITE',
+                    draggable: true,
+                    scrollwheel: true,
+                    disableDoubleClickZoom: true
+                },
+                markers:[
+                    {
+                        //设置Marker的位置坐标
+                        position:[39.914850, 116.403765],                
+                        animation:'BOUNCE', //'BOUNCE'反复弹跳'DOWN'落下,'DROP'从天而降,'UP'升起  
+                        //设置Marker可拖动
+                        draggable: true,
+                        //自定义Marker图标为大头针样式
+                        icon:"../../asset/img/cases/fuli.png",
+                        //自定义Marker图标的阴影
+                        //shadow:"",
+                        //设置Marker标题，鼠标划过Marker时显示
+                        title: '测试',
+                        //设置Marker的可见性，为true时可见,false时不可见
+                        visible: true
+                    }
+                ]
+            }
+
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+.map-box{
+    width: 100%;
+    height: 500px;
+}
+</style>

src/demo/parallaxscroll.vue

@@ -0,0 +1,69 @@
+<template>
+    <div>
+        <!-- 组件名和描述 -->
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+
+        <!-- DEMO区域 -->
+        <nut-parallaxscroll>
+            <!-- 视差滚动背景 -->
+            <div class="bg-box" slot="bg"> </div>      
+            <!--视差滚动背景2  -->
+            <div class="bg2-box"></div>
+            <!-- 视差滚动3 -->
+            <div>
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+            </div>
+        </nut-parallaxscroll>
+         <nut-parallaxscroll>
+            <!-- 视差滚动背景 -->
+            <div class="bg-box" slot="bg"> </div>      
+            <!--视差滚动背景2  -->
+            <div class="bg2-box"></div>
+            <!-- 视差滚动3 -->
+            <div>
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+                这里作为文字说明,这里是一个视差滚动的demo
+            </div>
+        </nut-parallaxscroll>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+.bg-box{
+    height: 900px;
+    background-image:url(../asset/img/nutui-logo3.png);
+    background-color:#178d7d;
+    background-position: center center;
+    background-repeat: no-repeat;   
+    background-attachment: fixed;
+}
+.bg2-box{
+
+}
+</style>

src/demo/shortpwd.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="wrapper">
+        <a href="javascript:;" @click="showShortpwd">点击打开短密码框</a>
+        <nut-shortpwd  :show="isShow"  @close="shortpwdClose"/>
+    </div>
+</template>
+
+<script>
+
+
+export default {
+    data(){
+        return{
+            isShow:false,
+        }
+    },
+    components: {
+       
+    },
+    methods:{
+        
+        showShortpwd(){
+            this.isShow = true;
+        },
+        shortpwdClose(password){
+            this.isShow = false;
+            alert('您输入的密码是：'+password);
+        }
+    },
+    mounted(){
+       
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper{
+    .box{
+        font-size:.5rem;
+    }
+    h3{
+        font-size:.3rem;
+    }
+}
+</style>

src/package/choose/src/choose.vue

@@ -78,6 +78,10 @@ export default {
         short:{
             type:Boolean,
             default:false,
+        },
+        loading:{
+            type:Boolean,
+            default:false,
         }
     },
     mounted() {
@@ -96,6 +100,7 @@ export default {
             tempDatas:[],
             tabIndex:0,
             currItem:{},
+            isLoading:false,
         };
     },
     watch:{
@@ -114,21 +119,31 @@ export default {
         },
         'listData'(val,oldVal){
             if(val){
-                this.list = val;
-                 this.$refs.areaTabCon.scrollTop = 0;
+                this.$refs.areaTabCon.scrollTop = 0;
                 if(this.tabIndex < this.tempDatas.length){
                    this.tempDatas =  this.tempDatas.slice(0,this.tabIndex);
                 }
+                if(val.length == 0){
+                    return;
+                }
+                this.list = val;
                 this.tempDatas.push({
                     list:val,
                     item:{}
                 });
                 this.tabIndex += 1;
+
             }
+        },
+        loading(val,oldVal){
+            this.isLoading = val;
         }
     },
     methods: {
         maskClose() {
+            if(this.isLoading){
+                return;
+            }
             this.areaShow = false;
             clearTimeout(this.timer);
             this.timer = setTimeout(()=>{
@@ -145,11 +160,17 @@ export default {
             this.currItem = {};
         },
         getNextList(item){
+            if(this.isLoading){
+                return;
+            }
             this.tempDatas[this.tabIndex-1].item = item;
             this.currItem = item;
             this.$emit('choose-item',item,this.tabIndex);
         },
         getCurrList(index){
+            if(this.isLoading){
+                return;
+            }
             this.list = this.tempDatas[index].list || [];
             this.currItem = this.tempDatas[index].item ;
             this.tabIndex = index + 1;

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){               
@@ -204,9 +200,7 @@ export default {
     },}
 </script>
 <style lang="scss" scoped>
-.nut-modulelazyloading{
-    position: relative;
-}
+
 .loading-component-init{  
     text-align: center;    
     width: 100%;

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,254 @@
+<template>
+    <div class="nutui-mapbox">
+        <div class="search"><input type="text" @keyup="searchKeyword" v-model="Keyword"/></div>
+        <div class="nut-map" :id="option.id"></div>
+    </div>
+    
+    <!-- 
+    1、当前位置的定位，获取当前经纬度
+    2、可以安装传入的经纬度显示位置。
+    3、搜索功能，搜到然后标记出来。（多标记功能） 
+    4、获取不到经纬度给一个友情提示
+    -->
+</template>
+<script>
+export default {
+    name:'nut-map',
+    props: {
+        //地图的秘钥
+        key:{
+            type:String,
+            default:"MNFBZ-3F2AJ-655FS-F7GI2-PM5WV-SJBIO"
+        },
+        option:{
+            type:Object,
+            default:{}
+        }        
+    },
+    data() {
+        return {
+            Keyword:'',
+            map:null,
+            tc:null,           
+            searchService:null,
+            markerArrays:[],
+            searchMarkers:[]
+        };
+    },
+    methods: {
+        searchKeyword(){
+                let markers = this.searchMarkers;
+                let markerArrays = this.markerArrays;
+                var keyword = this.Keyword;//搜索关键字
+                var region = '衡水';//城市
+                var pageIndex = 1;
+                var pageCapacity = 10;// 设置每页搜索结果数
+                this.clearOverlays(markers);
+                this.clearOverlays(markerArrays);
+                //根据输入的城市设置搜索范围
+                this.searchService.setLocation(region);
+                //设置搜索页码
+                this.searchService.setPageIndex(pageIndex);
+                //设置每页的结果数
+                this.searchService.setPageCapacity(pageCapacity);
+                //根据输入的关键字在搜索范围内检索
+                this.searchService.search(keyword);
+                //根据输入的关键字在圆形范围内检索
+                //var region = new qq.maps.LatLng(39.916527,116.397128);
+                //searchService.searchNearBy(keyword, region , 2000);
+                //根据输入的关键字在矩形范围内检索
+                //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
+                //searchService.searchInBounds(keyword, region);
+        },  
+        getMap() {
+            //初始化地图信息 
+            let that = this;
+            let tcMapScript = document.querySelector('#tcMapScript');
+            return new Promise(function (resolve, reject) {
+                    window.initTcMap = function () {     
+                        window.tcMap = qq;                    
+                        resolve(qq);
+                    };
+                    if(!tcMapScript){
+                        var script = document.createElement("script");
+                        script.id="tcMapScript"
+                        script.type = "text/javascript";
+                        script.src = "http://map.qq.com/api/js?v=2.exp&callback=initTcMap&key="+that.key;
+                        script.onerror = reject;
+                        document.head.appendChild(script);
+                    }else{
+                        if(window.tcMap){
+                            resolve(window.tcMap);
+                        }
+
+                    }
+                    
+            })
+        },
+        marker(){            
+            let tc = this.tc;
+            //当前的地图
+            let map = this.map;
+            //地图显示的中心点（标记点）            
+            let markers = this.option.markers; 
+            //渲染坐标
+            for(let index=0,item;item=markers[index];index++){
+                //添加显示地图
+                item = Object.assign(item,{
+                    map:map
+                });                
+                //添加位置
+                if(item.position&&item.position[0]&&item.position[1]) {
+                    let position = new tc.maps.LatLng(item.position[0],item.position[1]);
+                    item = Object.assign(item,{                    
+                        position:position
+                    });
+                }
+                //添加动画                
+                if(item.animation){
+                    let animation = tc.maps.MarkerAnimation[item.animation];
+                    item = Object.assign(item,{                    
+                        animation:animation
+                    });
+                }
+                //添加地图icon
+                if(item.icon){
+                    let icon = new tc.maps.MarkerImage(item.icon);
+                    item = Object.assign(item,{                    
+                        icon:icon
+                    });
+                }
+                //添加地图阴影
+                if(item.shadow){
+                    let shadow = new tc.maps.MarkerImage(item.shadow);
+                    item = Object.assign(item,{                    
+                        shadow:shadow
+                    });
+                }                
+                let marker = new tc.maps.Marker(item);
+                this.markerArrays.push(marker)
+            }            
+        },
+        clearOverlays(overlays) {
+            let overlay;
+            while (overlay = overlays.pop()) {
+                overlay.setMap(null);
+            }
+        },
+        newSearchService(){
+            let that = this;
+            let tc = this.tc;
+            let map = this.map;
+            let searchMarkers = this.searchMarkers;
+             //设置Poi检索服务，用于本地检索、周边检索
+            this.searchService = new tc.maps.SearchService({
+                //检索成功的回调函数
+                complete: function(results) {
+                    //设置回调函数参数
+                    var pois = results.detail.pois;
+                    if(pois){
+                        var infoWin = new tc.maps.InfoWindow({
+                            map: map
+                        });
+                        var latlngBounds = new tc.maps.LatLngBounds();
+                        for (var i = 0, l = pois.length; i < l; i++) {
+                            var poi = pois[i];
+                            //扩展边界范围，用来包含搜索到的Poi点
+                            latlngBounds.extend(poi.latLng);        
+                            (function(n) {
+                                var marker = new tc.maps.Marker({
+                                    map: map
+                                });
+                                marker.setPosition(pois[n].latLng);        
+                                marker.setTitle(i + 1);
+                                searchMarkers.push(marker);
+                                tc.maps.event.addListener(marker, 'click', function() {
+                                    infoWin.open();
+                                    infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为：' +
+                                        pois[n].id + '，POI的名称为：' + pois[n].name + '，POI的地址为：' + pois[n].address + '，POI的类型为：' + pois[n].type + '</div>');
+                                    infoWin.setPosition(pois[n].latLng);
+                                });
+                            })(i);
+                        }
+                        that.searchMarkers = searchMarkers;
+                        //调整地图视野
+                        map.fitBounds(latlngBounds);
+                    }
+                    
+                },
+                //若服务请求失败，则运行以下函数
+                error: function(val) {
+                    console.log("出错了。",val);
+                }
+            });
+        },
+        init(){
+            //console.log(tt);
+            let tt = this.tc;
+            let propsOptions = this.option.options; 
+            //
+            let center = null; 
+            let id = this.option.id;
+            //地图显示的中心点（标记点）
+            if(propsOptions.center[0]&&propsOptions.center[1]){
+                let center =new tt.maps.LatLng(propsOptions.center[0],propsOptions.center[1]);
+                propsOptions = Object.assign(propsOptions,{                    
+                     center:center
+                });
+            }
+            //缩放类型，可设置以地图中心点或双指中心点为焦点（移动端）。 //不填默认缩放手指中心位置
+            if(propsOptions.MapZoomType){
+                let mapZoomType =  tt.maps.MapZoomType[propsOptions.MapZoomType];
+                propsOptions = Object.assign(propsOptions,{                    
+                     mapZoomType:mapZoomType
+                });
+            }       
+            //地图显示类型 默认显示2d平面地图
+            if(propsOptions.MapTypeId){
+                let MapTypeId = tt.maps.MapTypeId[propsOptions.MapTypeId];
+                propsOptions = Object.assign(propsOptions,{                    
+                MapTypeId:MapTypeId
+                });
+            }            
+            //地图初始化
+            let elm = document.querySelector('#'+id);
+            this.map  = new tt.maps.Map(elm,propsOptions);
+            //是否创建一个marker 检索
+            this.$nextTick(()=>{
+                this.marker();
+                this.newSearchService();
+            })     
+            //是否有检索功能
+
+        }
+    },
+    mounted(){
+        let that = this;
+        this.getMap().then(
+            qq=>{
+                that.tc = qq;
+                that.init();
+            }
+        );
+    }
+}
+</script>
+<style lang="scss">
+.nutui-mapbox{
+    position: relative;
+    .search{
+        position: absolute;
+        z-index: 2;
+        top: 26px;
+        left: 71px;
+    }
+    .nut-map{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top:0;
+        left:0;
+        z-index: 1;
+    }
+}
+</style>

src/package/parallaxscroll/index.js

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

src/package/parallaxscroll/src/parallaxscroll.vue

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

src/package/shortpwd/index.js

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

src/package/shortpwd/src/shortpwd.vue

@@ -0,0 +1,384 @@
+<!--短密码组件shortpwd-->
+<template>
+	<div class="nut-short-pwd" v-show="show">
+		<div class="nut-mask" @click="closeLayer"></div>
+        <div class="nut-layer">
+            <div class="nut-title">
+            <span class="nut-close" @click="closeLayer"></span>
+            输入数字密码
+        </div>
+        <div class="nut-input-w">
+            <input type="tel" ref="realInput" class="nut-real-input" maxlength="6"  autocomplete="off" autofocus="autofocus" v-model="shortpwdValue" @input="shortpwdInput($event)"/>
+            <div class="nut-fake-list">
+            	<ul>
+            		<li v-for="item in fakeInputItems" :key="item.id">
+            			<input  type="password" maxlength="1" v-model="item.val"/>
+            		</li>
+            		
+   				</ul>
+       		</div>
+            <img src="./img/cursor.gif" class="nut-fake-cursor" :style="fakeCursorStyle"/>
+            <div class="nut-forget">
+            	<a href="">忘记密码</a></div>
+        	</div>
+    	</div>
+	</div>
+
+</template>
+
+<script>
+	export default {
+		name:'nut-shortpwd',
+	    props:{
+	        'show':{
+	            type:Boolean,
+	            default:false,
+	            
+	        }
+	    },
+	    data(){
+	        return{
+	        	shortpwdValue:'',
+	            regExp:/^[0-9]*$/,
+	            fakeCursorStyle:{
+	            	display:'none',
+	            	left:'0px'
+	            },
+	            fakeInputItems:[
+		            {
+		            	id:1,
+		            	val:''
+		            },
+		            {
+		            	id:2,
+		            	val:''
+		            },
+		            {
+		            	id:3,
+		            	val:''
+		            },
+		            {
+		            	id:4,
+		            	val:''
+		            },
+		            {
+		            	id:5,
+		            	val:''
+		            },
+		            {
+		            	id:6,
+		            	val:''
+		            },
+	            ],
+	            timer:null,
+
+	        }
+	    },
+	    methods:{
+	    	closeLayer(){
+	    		this.$emit('close');
+	    	},
+	    	shortpwdInput(e){
+	    		let val = e.target.value;
+	    		if(this.regExp.test(val)){
+	    			//位移假光标
+                    if(val.length < 6){
+                        var left = val.length*1.05 + 1.1;
+                        this.fakeCursorStyle = {
+                        	'left':left+'rem',
+                        	'display':'block'
+                        }
+                        
+                    }else{
+                        this.fakeCursorStyle = {
+                        	'display':'none'
+                        }
+                        this.$refs.realInput.blur();
+                        
+                        this.timer = setTimeout(()=>{
+                        	  //如果是6位输入满，将直接关闭弹层，给出输入的值
+                        	this.$emit('close',val);
+                        	this.shortpwdValue = '';
+                        	this.fakeInputItems = [
+					            {
+					            	id:1,
+					            	val:''
+					            },
+					            {
+					            	id:2,
+					            	val:''
+					            },
+					            {
+					            	id:3,
+					            	val:''
+					            },
+					            {
+					            	id:4,
+					            	val:''
+					            },
+					            {
+					            	id:5,
+					            	val:''
+					            },
+					            {
+					            	id:6,
+					            	val:''
+					            },
+				            ];
+                        	
+
+                        },300)
+                      
+                    }
+                    for(var i =0 ;i<val.length; i++){
+                        this.fakeInputItems[i].val = val[i];
+                    }
+	    		}else{
+	    			//清空非数字
+                    this.shortpwdValue = val.replace(/\D/g,'');
+	    		}
+
+	    		//删除操作的时候同步假密码框
+                for(var i=0; i<6;i++){
+                    if(i >=val.length){
+                        this.fakeInputItems[i].val = '';
+                    }
+                }
+	    	}
+	    },
+	    watch:{
+
+	    },
+	    computed:{
+
+	    },
+	    mounted(){
+
+	    },
+		destroyed(){
+			this.timer = null;
+	    }
+	}
+
+</script>
+
+
+<style lang="scss" scoped>
+
+	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: 100%; 
+      font: inherit;
+      vertical-align: baseline
+    }
+
+    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+      display: block
+    }
+     
+    body {
+      line-height: 1 ;
+      color: #303030;
+      font-family: "SimHei","Helvetica Neue",Arial,"Droid Sans", sans-serif;
+      background:#f6f6f6;
+    }    
+
+    /* ios默认文本框阴影 */ 
+    input[type=text],textarea{   
+      -webkit-appearance:none;
+    }
+    /* 低版本安卓文本框层级问题 */
+    input:focus{
+      -webkit-user-modify:read-write-plaintext-only;
+    }
+    ol, ul {
+      list-style: none
+    } 
+
+    blockquote, q {
+      quotes: none
+    }
+
+    blockquote:before, blockquote:after, q:before, q:after {
+      content: '';
+      content: none
+    }
+
+    table {
+      border-collapse: collapse;
+      border-spacing: 0
+    }
+
+    * {
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      -webkit-tap-highlight-color: transparent;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      -ms-box-sizing: border-box;
+      box-sizing: border-box
+    }
+    html, body {
+      -webkit-text-size-adjust: none;
+      -ms-text-size-adjust: 100%;
+      width: 100%;
+      font-size: 100px;
+    }
+    a, button, input {
+      outline: 0 none;
+      text-decoration: none
+    }
+
+    img {
+      border: 0 none;
+      vertical-align: bottom;
+      -ms-interpolation-mode: bicubic
+    }
+    .hide{
+      display: none;
+    }
+    .fr{
+      float: right;
+    }
+    .fl{
+      float: left;
+    }
+    .txtc{text-align: center;}
+    .clr{clear:both;}
+
+
+	.nut-short-pwd{
+	    color:#232326;
+	    font-size:14px;
+	    .nut-mask{
+	        position: fixed;
+	        top:0;
+	        right:0;
+	        left:0;
+	        bottom:0;
+	        background-color:rgba(0,0,0,0.7);
+	        z-index:9999;
+	    }
+	    .nut-layer{
+	        background-color:#f3f5f7;
+	        position:fixed;
+	        bottom:0;
+	        left: 0;
+	        width:100%;
+	        z-index:10000;
+	        .nut-title{
+	            line-height: 1rem;
+	            text-align: center;
+	            border-bottom:1px solid #f1f2f4;
+	            font-size: 16px;
+	        }
+	        .nut-close{
+	            height:0.38rem;
+	            width:0.38rem;
+	            display: inline-block;
+	            background:url(./img/close.png) 0 0 no-repeat;
+	            background-size:100% 100%;
+	            position:absolute;
+	            top:0.3rem;
+	            left:0.3rem;
+	        }
+
+	        .nut-input-w{
+	            padding:0.6rem 0 0.9rem 0;
+	            text-align:center;
+	            position:relative;
+	            .nut-fake-list{
+	                background:url(./img/shortpwd.png) 0 0 no-repeat;
+	                background-size:100% 100%;
+	                height:1.4rem;
+	                width:6.44rem;
+	                display: inline-block;
+	                ul{
+	                    padding-top:0.23rem;
+	                }
+	                li{
+	                    float:left;
+	                    margin-left: 0.15rem;
+	                }
+	                input{
+	                    height:0.9rem;
+	                    width:0.9rem;
+	                    border:0;
+	                    background-color:#fff;
+	                    text-align: center;
+	                    font-size: 16px;
+	                }
+
+	            }
+
+	            .nut-real-input{
+	                z-index: 10001;
+	                position:absolute;
+	                width:6.35rem;
+	                top:0.6rem;
+	                margin-left:-100%;
+	                height:1.4rem;
+	                opacity: 0;
+	                width:200%;
+	            }
+	        }
+	    }
+
+	    .nut-forget{
+	        text-align: right;
+	        line-height: 0.6rem;
+	        padding-right: 0.66rem;
+	        font-size: 0.26rem;
+	        a{
+	            color: #666;
+	            &:before{
+	                content: '';
+	                display: inline-block;
+	                width: 0.24rem;
+	                height: 0.24rem;
+	                background: url(./img/w-icon.png) no-repeat;
+	                background-size: 100% 100%;
+	                vertical-align: middle;
+	                margin: -0.08rem 0.1rem 0 0;
+	            }
+	        }
+	        
+	    }
+
+	    .nut-fake-cursor{
+	        position:absolute;
+	        top:1rem;
+	        left:1.1rem;
+	        display:block;
+	    }
+
+	}
+
+	//android fixed ios absolute
+	.nut-fixed{
+
+	    .nut-mask{
+	        position:fixed;
+
+	    }
+	    .nut-layer{
+	        position:fixed;
+	    }
+	}
+
+	//强制页面在一屏幕范围内
+	.nut-dis-scroll{
+	    overflow: hidden;
+	    height:100%;
+	    width:100%;
+	}
+
+	//适配
+	@media screen and (min-width: 376px) {
+	    .nut-fake-cursor{
+	        top:1.05rem;
+	    }
+	}
+
+</style>

src/view/choose.vue

@@ -41,6 +41,13 @@
               <td>true</td>
             </tr>
             <tr>
+              <td>loading</td>
+              <td>是否还在异步加载数据中</td>
+              <td>Boolean</td>
+              <td>false</td>
+              <td>true</td>
+            </tr>
+            <tr>
               <td>needCache</td>
               <td>弹层打开后再关闭是否需要缓存下来数据，以备下次打开使用</td>
               <td>Boolean</td>

src/view/map.vue

@@ -0,0 +1,71 @@
+<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>   
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            demo1:`test`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>

src/view/parallaxscroll.vue

@@ -0,0 +1,79 @@
+<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>
+        <div>当用户滚动页面时，视差引起背景图像的滚动。<br>
+        页面上很多的元素在相互独立地滚动着，如果我们来对其它分层的话，可以有两到三层 ：背景层，内容层，贴图层
+        <br>
+        贴图层(内容层和背景层之间的元素)的滚动(次慢)
+        <br>
+        内容层的滚动(可以和页面的滚动速度一致)
+        <br>
+        背景层的滚动(最慢)
+        </div>
+        <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>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            demo1:`test`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>

src/view/shortpwd.vue

@@ -0,0 +1,71 @@
+<template>
+    <div>
+        
+        <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>show</td>
+              <td>显示6位密码弹层</td>
+              <td>Boolean</td>
+              <td>false</td>
+              <td>true/false</td>
+            </tr>
+            
+            </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>close</td>
+              <td>关闭弹层</td>
+              <td>password（关闭如果是6位填满的，将会返回密码）</td>
+            </tr>
+           
+          </tbody>
+        </table>
+        </div>
+    </div>
+
+
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+          demo1:`<nut-shortpwd  :show="isShow"  @close="shortpwdClose"/>`,
+         
+        }
+    },
+    methods:{
+      
+    }
+}
+</script>
+
+<style>
+
+</style>