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

NEXT.md

@@ -0,0 +1,22 @@
+目前NutUI 2.0版正在紧锣密鼓的开发中。
+
+主要方向是组件的精品化和跨平台，从网站到组件全面提升用户体验，预计年底发布Beta版本。
+
+新版本的NutUI将具备以下特性：
+
+* 跨平台，提交的Vue组件自动生成微信小程序组件
+* 脚手架升级webpack 4.0，构建速度大幅提升
+* 网站页面设计由设计师小姐姐把持，组件严格按照京东APP最新UI规范开发
+* 统一的动效
+* 更方便、更灵活、更优雅的按需引用方式
+* 组件内建文案支持多语言（国际化）
+* 支持自定义主题
+* 基于MD文件自动生成文档
+* 支持自动化测试和持续集成
+* 官网将支持PWA
+
+
+
+如果你有好的建议，欢迎反馈给我们。
+
+nutui@jd.com

config.json

@@ -14,6 +14,12 @@
       "desc": "一种对话框，支持按钮交互。"
     },
     {
+      "name": "Dropdown",
+      "chnName": "下拉选择",
+      "type": "component",
+      "desc": "下拉选择组件"
+    },
+    {
       "name": "Toast",
       "chnName": "无焦点提示",
       "type": "method",
@@ -329,14 +335,11 @@
       "showDemo": true
     },
     {
-      
       "name": "ShortPwd",
       "chnName": "短密码弹层",
       "desc": "6位短密码弹层",
       "type": "component",
       "showDemo": true
     }
-   
-    
   ]
 }

package.json

@@ -28,11 +28,12 @@
     "url": "https://github.com/jdf2e/nutui.git"
   },
   "scripts": {
-    "clean": "node scripts/rmDist",
+    "clean": "node scripts/rmDist dist",
     "dev": "npm run clean && webpack-dev-server -d --open --progress",
     "build": "npm run clean && cross-env NODE_ENV=production webpack --hide-modules --progress",
     "add": "node scripts/addComponent",
-    "custom": "node scripts/customBuild && npm run clean && cross-env NODE_ENV=production webpack --config webpack.config.custom.js --hide-modules --progress && rm -rf custom.json && rm -rf src/nutui-custom.js"
+    "custom": "node scripts/customBuild && npm run clean && cross-env NODE_ENV=production webpack --config webpack.config.custom.js --hide-modules --progress",
+    "postcustom": "node scripts/rmDist custom.json src/nutui-custom.js"
   },
   "dependencies": {
     "babel-runtime": "^6.26.0",

scripts/customBuild.js

@@ -34,15 +34,25 @@ inquirer
                 }
             });
         });
-        fs.readFile(path.join(__dirname, './customBuildTpl.js'), 'utf8', function (err, data) {
-          fs.writeFile(path.join(__dirname, '../src/nutui-custom.js'), str + data, (err) => {
-            if (err) throw err;
-            console.log(`生成nutui-custom.js文件成功`);
-          });
-        });
 
         fs.writeFile(destPath, JSON.stringify(choices, null, 2), (err) => {
             if (err) throw err;
             console.log(`生成配置文件custom.json成功`);
+
+            fs.readFile(path.join(__dirname, './customBuildTpl.js'), 'utf8', function (err, data) {
+              fs.writeFile(path.join(__dirname, '../src/nutui-custom.js'), str + data, (err) => {
+                if (err) throw err;
+                console.log(`生成nutui-custom.js文件成功`);
+    
+                console.log([
+                  '', 
+                  'if there are some errors about "JavaScript heap out of memory",', 
+                  'you can have a read about "https://www.npmjs.com/package/increase-memory-limit"',
+                  ''
+                ].join('\n'));
+              });
+            });
         });
-  });
+        
+  });
+  

scripts/rmDist.js

@@ -1,5 +1,9 @@
 const rimraf = require('rimraf');
 
-rimraf('dist',function(err){
-    console.log('rimraf:'+(err||'success'));
-});
+let files = process.argv.slice(2);
+
+files.length && files.forEach(function(file) {
+    rimraf.sync(file);
+    console.log('rm '+file+' success!');
+});
+

src/app.vue

@@ -12,7 +12,7 @@
     	<router-view class="view sys-main" name="main"></router-view>
         <router-view class="view sys-phone" name="phone"></router-view>
     </div>
-    <div class="sys-footer"><div class="sys-inner"><span>© 2018 <a href="https://jdc.jd.com/" target="_blank">JDC</a>. All Rights Reserved.</span></div></div>
+    <div class="sys-footer"><div class="sys-inner"><span>Copyright © 2017~2018 <a href="https://jdc.jd.com/" target="_blank">JDC</a>. All Rights Reserved.</span></div></div>
   </div>
 </template>
 <script>

src/default.html

@@ -21,9 +21,8 @@
                     <li><a href="http://nutui.jd.com/index.html#/Dialog">文档</a></li>
                     <li><a href="http://nutui.jd.com/index.html#/nutdemo">示例</a></li>
                     <li><a href="http://nutui.jd.com/index.html#/cases">案例</a></li>
-<li>
-    <a href="https://github.com/jdf2e/nutui">Github</a>
-</li>
+                    <li><a href="https://github.com/jdf2e/nutui">Github</a></li>
+                    <li><a href="https://github.com/jdf2e/nutui/blob/dev/NEXT.md">NEXT</a></li>
                 </ul>
 
                 <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="../asset/img/nutui-logo-2.png" width="90" height="30" title="NutUI" alt="NutUI"></div>
@@ -103,7 +102,7 @@
         <div class="tm-footer" style="background: #252525">
             <div class="uk-container uk-container-center uk-text-center">
                 <div class="uk-panel">
-                    <p>© 2018 <a href="//jdc.jd.com">JDC</a>. All Rights Reserved.</p>
+                    <p>Copyright © 2017~2018 <a href="//jdc.jd.com">JDC-前端开发部</a></p>
                     <a href="index.html"><img src="../asset/img/nutui-logo-2.png" width="130" height="30" title="NutUI" alt="NutUI"></a>
                 </div>
 

src/demo/dropdown.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>
+        <nut-dropdown ></nut-dropdown>
+    </div>
+</template>
+
+<script>
+//import jsonp from 'jsonp';
+
+export default {
+    data(){
+      return {
+       
+      }
+    },
+    methods:{
+        
+    },
+    mounted(){
+
+    }
+}
+</script>
+
+<style>
+
+</style>

src/demo/swiper.vue

@@ -11,7 +11,7 @@
             direction="horizontal"
              ref="demo1"
              @slideChangeEnd="slideChangeEnd">
-            <div v-for="item in dataItem" class="nut-swiper-silde" :key="item.name"><span>page{{item.name}}</span></div>
+            <div v-for="item in dataItem" class="nut-swiper-slide" :key="item.name"><span>page{{item.name}}</span></div>
 
         </nut-swiper>
 
@@ -21,9 +21,9 @@
             :pagination-visible="true"
             :performanceMode="true"
             direction="horizontal">
-            <div class="nut-swiper-silde"><span>page 1</span></div>
-            <div class="nut-swiper-silde"><span>page 2</span></div>
-            <div class="nut-swiper-silde"><span>page 3</span></div>
+            <div class="nut-swiper-slide"><span>page 1</span></div>
+            <div class="nut-swiper-slide"><span>page 2</span></div>
+            <div class="nut-swiper-slide"><span>page 3</span></div>
         </nut-swiper>
 
 
@@ -34,9 +34,9 @@
              @slideChangeEnd="slideChangeEnd"
              @slideChangeStart="slideChangeStart"
             direction="horizontal">
-            <div class="nut-swiper-silde"><span>page 1</span></div>
-            <div class="nut-swiper-silde"><span>page 2</span></div>
-            <div class="nut-swiper-silde"><span>page 3</span></div>
+            <div class="nut-swiper-slide"><span>page 1</span></div>
+            <div class="nut-swiper-slide"><span>page 2</span></div>
+            <div class="nut-swiper-slide"><span>page 3</span></div>
         </nut-swiper>
 
 
@@ -45,9 +45,9 @@
             :pagination-visible="false"
             :autoPlay="5000"
             direction="vertical">
-            <div class="nut-swiper-silde"><span>page 1</span></div>
-            <div class="nut-swiper-silde"><span>page 2</span></div>
-            <div class="nut-swiper-silde"><span>page 3</span></div>
+            <div class="nut-swiper-slide"><span>page 1</span></div>
+            <div class="nut-swiper-slide"><span>page 2</span></div>
+            <div class="nut-swiper-slide"><span>page 3</span></div>
         </nut-swiper>
 
         <p>竖向切换</p>
@@ -59,9 +59,9 @@
               @slideChangeEnd="slideChangeEnd"
                @slideChangeStart="slideChangeStart"
             direction="vertical">
-            <div class="nut-swiper-silde"><span >page 1{{this.move}}</span></div>
-            <div class="nut-swiper-silde"><span>page 2{{this.move}}</span></div>
-            <div class="nut-swiper-silde"><span>page 3{{this.move}}</span></div>
+            <div class="nut-swiper-slide"><span >page 1{{this.move}}</span></div>
+            <div class="nut-swiper-slide"><span>page 2{{this.move}}</span></div>
+            <div class="nut-swiper-slide"><span>page 3{{this.move}}</span></div>
         </nut-swiper>
 
         <p>多层切换</p>
@@ -69,17 +69,17 @@
             :pagination-visible="true"
             direction="horizontal"
             id="nutSwiperMore">
-            <div class="nut-swiper-silde">
+            <div class="nut-swiper-slide">
               <div>page 1</div>
               <div>page 2</div>
               <div>page 3</div>
             </div>
-            <div class="nut-swiper-silde">
+            <div class="nut-swiper-slide">
               <div>page 4</div>
               <div>page 5</div>
               <div>page 6</div>
             </div>
-            <div class="nut-swiper-silde">
+            <div class="nut-swiper-slide">
               <div>page 7</div>
               <div>page 8</div>
               <div>page 9</div>
@@ -95,7 +95,7 @@
             :lazyLoad="true"
             lazyLoadingUrl="//static.360buyimg.com/exploit/mplus/2.1.81/css/i/loading.gif"
             lazyLoaderrorUrl="">
-            <div class="nut-swiper-silde">
+            <div class="nut-swiper-slide">
               <div>
                 <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t2029/269/1342378600/94347/c088416b/56581d53Ne97b6442.jpg" class="nut-swiper-lazyload"/>
                 <p>牙膏牙膏吃牙膏</p>
@@ -109,7 +109,7 @@
                 <p>妙洁 保鲜袋背心型食品袋中号200只装 可提携易打结</p>
               </div>
             </div>
-            <div class="nut-swiper-silde">
+            <div class="nut-swiper-slide">
               <div>
                 <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t3826/185/3277282028/320781/8fbf1015/587c2fcaNc3741a59.jpg" class="nut-swiper-lazyload"/>
                 <p>全棉灭菌免换洗</p>
@@ -123,7 +123,7 @@
                 <p>训练宝宝咀嚼力</p>
               </div>
             </div>
-            <div class="nut-swiper-silde">
+            <div class="nut-swiper-slide">
               <div>
                 <img data-src="//img11.360buyimg.com/n3/s300x300_jfs/t13924/18/765396019/118800/71bda7ea/5a13878fN35292d9b.jpg" class="nut-swiper-lazyload"/>
                 <p>得力(deli)S01黑色0.5mm经典办公按动中性笔水性笔子弹头签字笔 12支/盒</p>
@@ -147,41 +147,41 @@
             :freeMode="true"
             id="nutSwiperFree"
             >
-            <div class="nut-swiper-silde"><span>page 1</span></div>
-            <div class="nut-swiper-silde"><span>page 2</span></div>
-            <div class="nut-swiper-silde"><span>page 3</span></div>
-            <div class="nut-swiper-silde"><span>page 4</span></div>
-            <div class="nut-swiper-silde"><span>page 5</span></div>
-            <div class="nut-swiper-silde"><span>page 6</span></div>
-
-            <div class="nut-swiper-silde"><span>page 1</span></div>
-            <div class="nut-swiper-silde"><span>page 2</span></div>
-            <div class="nut-swiper-silde"><span>page 3</span></div>
-            <div class="nut-swiper-silde"><span>page 4</span></div>
-            <div class="nut-swiper-silde"><span>page 5</span></div>
-            <div class="nut-swiper-silde"><span>page 6</span></div>
+            <div class="nut-swiper-slide"><span>page 1</span></div>
+            <div class="nut-swiper-slide"><span>page 2</span></div>
+            <div class="nut-swiper-slide"><span>page 3</span></div>
+            <div class="nut-swiper-slide"><span>page 4</span></div>
+            <div class="nut-swiper-slide"><span>page 5</span></div>
+            <div class="nut-swiper-slide"><span>page 6</span></div>
+
+            <div class="nut-swiper-slide"><span>page 1</span></div>
+            <div class="nut-swiper-slide"><span>page 2</span></div>
+            <div class="nut-swiper-slide"><span>page 3</span></div>
+            <div class="nut-swiper-slide"><span>page 4</span></div>
+            <div class="nut-swiper-slide"><span>page 5</span></div>
+            <div class="nut-swiper-slide"><span>page 6</span></div>
         </nut-swiper>
 
 
-        <p>类似日历、地址，滚动范围超过一个silde 应该停留在当前手指停的地方，而不是只滚动一屏</p>
+        <p>类似日历、地址，滚动范围超过一个slide 应该停留在当前手指停的地方，而不是只滚动一屏</p>
         <nut-swiper
             direction="horizontal"
             id="nutSwiperFree"
             type="multiple"
             >
-            <div class="nut-swiper-silde"><span>page 1</span></div>
-            <div class="nut-swiper-silde"><span>page 2</span></div>
-            <div class="nut-swiper-silde"><span>page 3</span></div>
-            <div class="nut-swiper-silde"><span>page 4</span></div>
-            <div class="nut-swiper-silde"><span>page 5</span></div>
-            <div class="nut-swiper-silde"><span>page 6</span></div>
-
-            <div class="nut-swiper-silde"><span>page 1</span></div>
-            <div class="nut-swiper-silde"><span>page 2</span></div>
-            <div class="nut-swiper-silde"><span>page 3</span></div>
-            <div class="nut-swiper-silde"><span>page 4</span></div>
-            <div class="nut-swiper-silde"><span>page 5</span></div>
-            <div class="nut-swiper-silde"><span>page 6</span></div>
+            <div class="nut-swiper-slide"><span>page 1</span></div>
+            <div class="nut-swiper-slide"><span>page 2</span></div>
+            <div class="nut-swiper-slide"><span>page 3</span></div>
+            <div class="nut-swiper-slide"><span>page 4</span></div>
+            <div class="nut-swiper-slide"><span>page 5</span></div>
+            <div class="nut-swiper-slide"><span>page 6</span></div>
+
+            <div class="nut-swiper-slide"><span>page 1</span></div>
+            <div class="nut-swiper-slide"><span>page 2</span></div>
+            <div class="nut-swiper-slide"><span>page 3</span></div>
+            <div class="nut-swiper-slide"><span>page 4</span></div>
+            <div class="nut-swiper-slide"><span>page 5</span></div>
+            <div class="nut-swiper-slide"><span>page 6</span></div>
         </nut-swiper>
 
 
@@ -222,7 +222,7 @@ export default {
 
 <style lang="scss">
 #mySwiperDemo{ ///只为了不影响 依赖nut-swiper 的样式  实际项目中可以不加这个id
-  .nut-swiper-silde{
+  .nut-swiper-slide{
     color:#fff;
     font-size:24px;
     justify-content: center;
@@ -230,14 +230,14 @@ export default {
     display: flex;
     background-color:gray;
   }
-  .nut-swiper-silde:nth-child(2n){
+  .nut-swiper-slide:nth-child(2n){
     background-color: red;
   }
-  .nut-swiper-silde:nth-child(2n+1){
+  .nut-swiper-slide:nth-child(2n+1){
     background-color: green;
   }
   #nutSwiperMore{
-    .nut-swiper-silde>div{
+    .nut-swiper-slide>div{
 
       background-color:#fff;
       width:30%;
@@ -251,7 +251,7 @@ export default {
     }
   }
   #nutSwiperLazyLoad{
-    .nut-swiper-silde>div{
+    .nut-swiper-slide>div{
       //flex:1;
       //height:70%;
       background-color:#fff;
@@ -273,7 +273,7 @@ export default {
   }
   #nutSwiperFree{
 
-    .nut-swiper-silde{
+    .nut-swiper-slide{
       width:100px;
       font-size: 12px;
       background-color:#ccc;
@@ -285,7 +285,7 @@ export default {
   #fullScreen
   {
     height:600px;
-    .nut-swiper-silde{
+    .nut-swiper-slide{
       height:100%;
       width:100%;
     }

src/demo/tab.vue

@@ -60,7 +60,7 @@ export default {
     data(){
         return{
           demo1:
-`<nut-tab @tabSwitch="tab-switch">
+`<nut-tab @tab-switch="tabSwitch">
     <nut-tab-panel tabTitle="页签名称1">11</nut-tab-panel>
     <nut-tab-panel tabTitle="页签名称2">
       <h2>22</h2>
@@ -69,7 +69,7 @@ export default {
     <nut-tab-panel tabTitle="页签名称4">44</nut-tab-panel>
 </nut-tab>`,
         demo2:
-`<nut-tab @tabSwitch="tab-switch" positionNav="left">
+`<nut-tab @tab-switch="tabSwitch"  positionNav="left">
     <nut-tab-panel tabTitle="页签1">11</nut-tab-panel>
     <nut-tab-panel tabTitle="页签2" iconUrl="图片地址">
       <h2>22</h2>
@@ -78,7 +78,7 @@ export default {
     <nut-tab-panel tabTitle="页签4">44</nut-tab-panel>
 </nut-tab>`,
         demo3:
-`<nut-tab @tabSwitch="tab-switch" :contentShow="false">
+`<nut-tab @tab-switch="tabSwitch" :contentShow="false">
     <nut-tab-panel tabTitle="页签1">11</nut-tab-panel>
     <nut-tab-panel tabTitle="页签2" tabLink="http://www.baidu.com">
       <h2>22</h2>
@@ -87,18 +87,18 @@ export default {
 </nut-tab>`,
         demo4:
 `<nut-tab 
-:defIndex="1"
-class="customer-css" 
-@tabSwitch="tab-switch"
-:contentShow="true"
->
-    <nut-tab-panel tabTitle="页签1">11</nut-tab-panel>
-    <nut-tab-panel tabTitle="页签2">
-      <h2>22</h2>
-    </nut-tab-panel>
-    <nut-tab-panel tabTitle="页签3">33</nut-tab-panel>
-    <nut-tab-panel tabTitle="页签4">44</nut-tab-panel>
-</nut-tab>`,
+  :defIndex="1"
+  class="customer-css" 
+  @tab-switch="tabSwitch"
+  :contentShow="true"
+  >
+      <nut-tab-panel tabTitle="页签1">11</nut-tab-panel>
+      <nut-tab-panel tabTitle="页签2">
+        <h2>22</h2>
+      </nut-tab-panel>
+      <nut-tab-panel tabTitle="页签3">33</nut-tab-panel>
+      <nut-tab-panel tabTitle="页签4">44</nut-tab-panel>
+  </nut-tab>`,
 demo5:
 `.customer-css .nut-tab-active .nut-tab-link[data-v-240d0c90]{
   border-bottom: 1px solid #0E90D2;

src/package/choose/src/choose.vue

@@ -23,7 +23,7 @@
                             >
                                     {{data.item && data.item.name||'请选择'}}
                                 </li>
-                            </li>
+                          
                         </template>
                         <template v-else>
                             <li v-for="(data, index) in tempDatas" 
@@ -31,7 +31,6 @@
                                 @click="getCurrList(index)">
                                     {{data.item && data.item.name||'请选择'}}
                                 </li>
-                            </li>
                         </template>
                     </ul>
                     <div class="area-tab-con" ref="areaTabCon">

src/package/dropdown/index.js

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

src/package/dropdown/src/dropdown.vue

@@ -0,0 +1,249 @@
+<template>
+	<div id="nut-dropdown" class="nut-dropdown" tabIndex='-1' @blur="handleBlur" ref="dropdown">
+		<div class="default-select" @click="handleToggleShowOptions">
+			<input v-show="inputShow" v-model="searchText" @click.stop="handleInputClick" type="text" placeholder="请输入过滤条件" class="search-input">
+			<span v-show="!inputShow" class="selected">{{showSelected}}</span>
+			<img :class='["arrow", optionsShow ? "up" : ""]' src='./img/arrow.png' @click.stop="handleToggleShowOptions"/>
+		</div>
+		<div v-show="optionsShow" class='select-options'>
+			<div class='option' v-for="(option, index) in showOptions" :key='index' @click="handleItemClick(option)">
+				<i :class="[isSelected(option) ? 'active' : '']"></i>  <span>{{ optionKey ? option[optionKey] :option}}</span>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+export default {
+	name:'nut-dropdown',
+	props: {
+		// 默认选中的option
+		defaultSelected: {
+			// type: String,
+			// default: '请选择'
+		},
+		// options，必须是数组，必传
+		options: {
+			type: Array,
+			required: true
+		},
+		// option 展示的数据类型，适用于option是对象的时候 展示内容即为option对象key的值
+		optionKey: {
+			type: String
+		},
+		// 是否支持多选
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		// 是否支持搜索
+		search: {
+			type: Boolean,
+			default: false
+		}
+
+	},
+	data() {
+		return {
+			optionsShow: false,
+			// showSelected: this.defaultSelected,
+			selected: '',
+			inputShow: false,
+			multipleSelected: [],
+			searchText: ''
+		};
+	},
+	computed: {
+		showSelected() {
+			let _txt = ''
+			if (this.optionKey) {
+				if (this.multiple) {
+					_txt = this.multipleSelected.map(item => item[this.optionKey]).join('、')
+				}	else {
+					_txt = this.selected[this.optionKey]
+				}	
+			} else {
+				if (this.multiple) {
+					_txt = this.multipleSelected.join('、')
+				} else {
+					_txt = this.selected
+				}
+			}
+			return _txt || '请选择'
+		},
+		showOptions() {
+			let _options = this.options
+			// 支持搜索的同时处于搜索状态
+			if (this.search && this.inputShow) {
+				if (this.optionKey) {
+					_options = this.options.filter(item => item[this.optionKey].includes(this.searchText))
+				} else {
+					_options = this.options.filter(item => item.includes(this.searchText))
+				}
+			}
+			return _options
+		}
+	},
+	methods: {
+		handleBlur() {
+			if (this.inputShow) return
+			if (this.optionsShow) {
+				this.optionsShow = false
+			}
+			if (this.inputShow) {
+				this.inputShow = false
+			}
+		},
+		
+		handleToggleShowOptions() {
+			if (this.search) {
+				if (this.inputShow) {
+					this.optionsShow = false
+					this.inputShow = false
+					this.searchText = ''
+					return
+				}
+				this.inputShow = true
+				this.optionsShow = true
+				return
+			}
+			this.optionsShow = !this.optionsShow
+		},
+
+		handleInputClick() {
+			// console.log(111)
+		},
+	
+		handleItemClick(option) {
+			if (this.multiple) {
+				if (this.optionKey) {
+					if(this.multipleSelected.some(item => item[this.optionKey] === option[this.optionKey])){
+						this.multipleSelected = this.multipleSelected.filter(item => item[this.optionKey] !== option[this.optionKey])
+					} else {
+						this.multipleSelected.push(option)
+					}
+				} else {
+						if(this.multipleSelected.includes(option)){
+						this.multipleSelected = this.multipleSelected.filter(item => item !== option)
+					} else {
+						this.multipleSelected.push(option)
+					}
+				}
+				this.$emit('selectedChange', this.multipleSelected);
+			} else {
+				this.selected = option
+				this.handleToggleShowOptions()
+				this.$emit('selectedChange', this.selected);
+			}
+		},
+		isSelected(option) {
+			let _selected = false
+			if (this.optionKey) {
+				if (this.multiple) {
+					_selected = this.multipleSelected.some(item => item[this.optionKey] === option[this.optionKey])
+				} else {
+					_selected = this.selected[this.optionKey] === option[this.optionKey]
+				}
+			} else {
+				if (this.multiple) {
+					_selected = this.multipleSelected.includes(option)
+				} else {
+					_selected = this.selected === option
+				}
+			}
+			return _selected
+		}
+	},
+	mounted() {
+		if (this.defaultSelected) {
+			if (this.multiple) {
+				this.multipleSelected = this.defaultSelected
+			} else {
+				this.selected = this.defaultSelected
+			}
+		} else {
+			if (this.optionKey) {
+				this.selected = {}
+			}
+		}
+	}
+}
+</script>
+<style lang="scss" scoped>
+* {
+	box-sizing: border-box;
+}
+.nut-dropdown{
+	outline: none;
+	width: 200px;
+	height: 30px;
+	background: #409eff;
+	border-radius: 5px;
+	position: relative;
+	.default-select {
+		width: 100%;
+		height: 100%;
+		padding: 0 20px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		.selected {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+		.search-input {
+			width: 100%;
+			height: 100%;
+			outline: none;
+			border: none;
+			padding: 0;
+			transform: translateY(9px);
+			background: transparent;
+		}
+		.arrow {
+			width: 14px;
+			height: 8px;
+			transform: rotateX(180deg);
+			transform-origin: 50% 50%;
+			transition: transform 0.4s;
+			&.up {
+					transform: rotateX(0deg);
+			}
+		}
+	}
+	.select-options {
+		position: absolute;
+		z-index: 999;
+		top: 100%;
+		// height: 200px;
+		left: 0;
+		width: 100%;
+		padding: 10px 0;
+		background: #ffffff;
+		border: 1px solid #d7d7d7;
+		border-radius: 5px;
+
+		.option {
+			display: flex;
+			align-items: center;
+			line-height: 30px;
+			font-size: 14px;
+			padding: 0 20px;
+			cursor: pointer;
+			&:hover {
+				background: #ecf5ff;
+			}
+			i {
+				width: 16px;
+				height: 16px;
+				border: 1px solid #d7d7d7;
+				margin-right: 8px;
+				&.active {
+						border: none;
+						background: url(./img/complate.png) #409eff no-repeat center center;
+				}
+			}
+		}
+	}
+}
+</style>

src/package/footercom/index.js

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

src/package/footercom/src/footercom.vue

@@ -0,0 +1,140 @@
+<template>
+    <div  :class="['footer-wrap',{'for-three-style':forThreeStyle}]" id="footer">
+        <div :class= "['box',{'no-text-style':noText}]"  v-for='(item,index) in menuList' :key='item.id' @click= changeMenu(index) >
+           <span :style="{ color:(select == index ? '#006FFF':'') , background: ( select == index ? 'url(' + item.iconselect || '' + ')  0% 0% / contain no-repeat' :'url(' + item.icon || '' + ')  0% 0% / contain')}" class="item">{{item.text || ""}}</span>
+        </div> 
+    </div>
+</template>
+
+<script>
+export default {
+  name: "nut-footer",
+  data() {
+    return {
+      select: 0,
+      forThreeStyle: false,
+      noText: null
+    };
+  },
+  props: {
+    menuList: {
+      //菜单图标文案 数组对象  使用须知：
+      // 1， 数组内对象可用属性共有： iconselect(选中图标)  icon(默认图标)   url(跳转地址)  text(文案)
+      // 2， text(文案) 要配置请全部配置。
+      // 3,  url(跳转地址) 不配置则不做跳转
+      // 4, iconselect(选中图标)  icon(默认图标)  为必选属性
+      type: Array,
+      default: function() {
+        return [
+          {
+            iconselect:
+              "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+            icon:
+              "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+            url: "/orderDetail",
+            text:'首页'
+          },
+          {
+            iconselect:
+              "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+            icon:
+              "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+            url: "/orderDetail",
+            text:'首页'
+          },
+          {
+            iconselect:
+              "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+            icon:
+              "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+            url: "/orderDetail",
+            text:'首页'
+          },
+
+          {
+            iconselect:
+              "http://img12.360buyimg.com/uba/jfs/t26998/32/1861936/1307/776501d8/5b7fc73dNf725ab6d.png",
+            icon:
+              "http://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.png",
+            text:'首页'
+          }
+        ];
+      }
+    }
+  },
+  created() {},
+  mounted() {
+    let len = this.menuList.length;
+    if (len == 3 || len == 2) {
+      this.forThreeStyle = true;
+    }
+    this.menuList.map((item, i) => {
+      if (!item.text) {
+        this.noText = true;
+      }
+    });
+  },
+  methods: {
+    changeMenu(index) {
+      this.select = index;
+      this.menuList.map((item, i) => {
+        if (index === i) {
+          if (item.url) {
+            this.$router.push({ path: item.url });
+          }
+          this.$emit("changeMenuFn", item);
+        }
+      });
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+.box:nth-child(3) span {
+  background-position: 0.13rem 0rem !important;
+      text-align: center !important;
+}
+.box:nth-child(4) {
+    text-indent: -0.07rem !important;
+}
+.for-three-style {
+  padding-left: 0.6rem !important;
+}
+.no-text-style {
+  margin-top: -0.2rem;
+}
+.footer-wrap {
+  height: 0.98rem;
+  line-height: 0.98rem;
+  background: #fafafa;
+  width: 100%;
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  border-bottom: 0.01rem solid #e8e8e8;
+  z-index: 999;
+  width: 100%;
+  padding-left: 0.3rem;
+  flex-direction: row;
+  justify-content: space-between;
+
+  .box {
+    height: 0.9rem;
+    margin-right: 18%;
+    width: 10%;
+    text-indent: -0.02rem;
+    span {
+      width: 0.8rem;
+    }
+    .item {
+      height: 0.42rem;
+      background-size: contain !important;
+      font-size: 0.2rem;
+      color: #666666;
+      line-height: 1.4rem;
+      display: inline-block;
+      background-repeat: no-repeat !important;
+    }
+  }
+}
+</style>

src/package/swiper/src/swiper.vue

@@ -97,7 +97,7 @@ export default {
             timer:null,// 自动播放计数器
             stopAutoPlay:false,//停止自动播放
             swiperWrap:null,// swiperWrap dom
-            oneSlideTranslate:0,//一个slide 的距离用于判断，手指停在第几个silde上了
+            oneSlideTranslate:0,//一个slide 的距离用于判断，手指停在第几个slide上了
 
         };
     },
@@ -156,9 +156,9 @@ export default {
                 this._setTranslate(this._getTranslateOfPage(page));
                 if(noAnimation) {
                     //添加select cls
-                    let selectedSlide = this.$el.querySelector('.nut-swiper-silde-selected');
-                    selectedSlide && selectedSlide.classList.remove('nut-swiper-silde-selected');
-                    this.slideEls[this.currentPage-1].classList.add('nut-swiper-silde-selected');
+                    let selectedSlide = this.$el.querySelector('.nut-swiper-slide-selected');
+                    selectedSlide && selectedSlide.classList.remove('nut-swiper-slide-selected');
+                    this.slideEls[this.currentPage-1].classList.add('nut-swiper-slide-selected');
                     this.lastPage = this.currentPage;
                     return;
                 }
@@ -170,9 +170,9 @@ export default {
 
                 if(noAnimation) {
                     //添加select cls
-                    let selectedSlide = this.$el.querySelector('.nut-swiper-silde-selected');
-                    selectedSlide && selectedSlide.classList.remove('nut-swiper-silde-selected');
-                    this.slideEls[this.currentPage-1].classList.add('nut-swiper-silde-selected');
+                    let selectedSlide = this.$el.querySelector('.nut-swiper-slide-selected');
+                    selectedSlide && selectedSlide.classList.remove('nut-swiper-slide-selected');
+                    this.slideEls[this.currentPage-1].classList.add('nut-swiper-slide-selected');
                     this.lastPage = this.currentPage;
                     return;
                 };
@@ -334,9 +334,9 @@ export default {
             }
             this.lastPage = this.currentPage;
             //添加select cls
-            let selectedSlide = this.$el.querySelector('.nut-swiper-silde-selected');
-            selectedSlide && selectedSlide.classList.remove('nut-swiper-silde-selected');
-            this.slideEls[this.currentPage-1].classList.add('nut-swiper-silde-selected');
+            let selectedSlide = this.$el.querySelector('.nut-swiper-slide-selected');
+            selectedSlide && selectedSlide.classList.remove('nut-swiper-slide-selected');
+            this.slideEls[this.currentPage-1].classList.add('nut-swiper-slide-selected');
             if(this.isLoop){
                  this._setTranslate(this._getTranslateOfPage(this.currentPage));
             }
@@ -470,7 +470,7 @@ export default {
         transition: all 0ms ease;
         -webkit-transition: all 0ms ease;
     }
-    .nut-swiper-silde {
+    .nut-swiper-slide {
         overflow: hidden;
         flex-shrink: 0;
         -webkit-flex-shrink: 0;

src/package/tab/src/tab.vue

@@ -7,7 +7,7 @@
                 v-on:click="switchTab(index,$event)" class="nut-title-nav-list" 
                 :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                 >
-                <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
+                <a :href="value.href" :clstag="value.clstag" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
                 <i class="nut-tab-icon" :style="{backgroundImage: 'url('+value.iconUrl+')'}" v-if="value.iconUrl"></i>
                 {{value.tabTitle}}
                 </a>
@@ -24,7 +24,7 @@
                     v-on:click="switchTab(index,$event)" class="nut-title-nav-leftnav" 
                     :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                     >
-                    <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
+                    <a :href="value.href" :clstag="value.clstag" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
                     <i class="nut-tab-icon" :style="{backgroundImage: 'url('+value.iconUrl+')'}" v-if="value.iconUrl"></i>
                     {{value.tabTitle}}
                     </a>
@@ -44,7 +44,7 @@
                     v-on:click="switchTab(index,$event)" class="nut-title-nav-leftnav" 
                     :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                     >
-                    <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
+                    <a :href="value.href" :clstag="value.clstag" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
                     <i class="nut-tab-icon" :style="{backgroundImage: 'url('+value.iconUrl+')'}" v-if="value.iconUrl"></i>
                     {{value.tabTitle}}
                     </a>
@@ -61,7 +61,7 @@
                 v-on:click="switchTab(index,$event)" class="nut-title-nav-list" 
                 :class="['nut-title-nav',{'nut-tab-active' : activeIndex == index}]"
                 >
-                <a :href="value.href" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
+                <a :href="value.href" :clstag="value.clstag" class="nut-tab-link" v-on:click="switchTabLink(index,$event)">
                 <i class="nut-tab-icon" :style="{backgroundImage: 'url('+value.iconUrl+')'}" v-if="value.iconUrl"></i>
                 {{value.tabTitle}}
                 </a>
@@ -120,6 +120,7 @@ export default {
                         let item ={
                         'tabTitle':slot[i].data.attrs.tabTitle,
                         'iconUrl':slot[i].data.attrs.iconUrl,
+                        'clstag': slot[i].data.attrs.clstag,
                         'href':slot[i].data.attrs.tabLink?slot[i].data.attrs.tabLink:'javascript:void(0)',
                        }
                        this.tabTitleList.push(item);

src/view/cases.vue

@@ -13,7 +13,7 @@
                ref="appShow"
                :speed="1000"
                @slideChangeStart="slideChangeStart">
-                <div v-for="item in appList" class="nut-swiper-silde box">
+                <div v-for="item in appList" class="nut-swiper-slide box">
                     <div class="box-image">
                         <img :src='item.imageSrc' class="images" />
                     </div>
@@ -136,6 +136,10 @@ export default {
             {
                 title:'生活圈',
                 imageSrc:'../asset/img/cases/life_icon.png',
+            },
+            {
+                title:'桌面极速报障',
+                imageSrc:'../asset/img/cases/maintain.png',
             }
           ],
           clientList:[
@@ -408,7 +412,7 @@ p{
 
 }
 .logos{
-    padding:0px;
+    padding:0px 30px;
     margin:0px;
     //width:80%;
     margin:0 auto;

src/view/dropdown.vue

@@ -0,0 +1,174 @@
+<template>
+    <div>
+        <nut-docheader 
+        :name="$route.name"
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <h6>通用数据代码和回调示例</h6>
+        <nut-codebox :code="code"></nut-codebox>
+
+        <h6>示例1: 单选、简单数组</h6>
+        <nut-dropdown :options="options" @selectedChange='multipleSelected'></nut-dropdown>
+        <nut-codebox :code="demo1"></nut-codebox>
+
+        <h6>示例2: 单选、简单数组、设置默认值</h6>
+        <nut-dropdown :options="options" @selectedChange='multipleSelected' defaultSelected='二'></nut-dropdown>
+        <nut-codebox :code="demo2"></nut-codebox>
+
+        <h6>示例3: 多选、简单数组</h6>
+        <nut-dropdown :options="options" multiple @selectedChange='selectedChange'></nut-dropdown>
+        <nut-codebox :code="demo3"></nut-codebox>
+
+        <h6>示例4: 多选、简单数组、设置默认值</h6>
+        <nut-dropdown :options="options" multiple @selectedChange='selectedChange' :defaultSelected="['一','二']"></nut-dropdown>
+        <nut-codebox :code="demo4"></nut-codebox>
+
+        <h6>示例5: 单选、复杂对象数组、自定义展示字段</h6>
+        <nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name'></nut-dropdown>
+        <nut-codebox :code="demo5"></nut-codebox>
+
+        <h6>示例6: 多选、复杂对象数组、自定义展示字段</h6>
+        <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name'></nut-dropdown>
+        <nut-codebox :code="demo6"></nut-codebox>
+
+        <h6>示例7: 单选、复杂对象数组、自定义展示字段、设置默认值</h6>
+        <nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' :defaultSelected="{name: '李四', id: 2}"></nut-dropdown>
+        <nut-codebox :code="demo7"></nut-codebox>
+
+        <h6>示例8: 多选、复杂对象数组、自定义展示字段、设置默认值</h6>
+        <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' :defaultSelected="[{name: '李四', id: 2}]"></nut-dropdown>
+        <nut-codebox :code="demo8"></nut-codebox>
+
+        <h6>示例9: 多选、复杂对象数组、自定义展示字段、支持搜索</h6>
+        <nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' search></nut-dropdown>
+        <nut-codebox :code="demo9"></nut-codebox>
+
+        <h6>示例10: 单选、简单数组、支持搜索</h6>
+        <nut-dropdown :options="options" @selectedChange='selectedChange' search></nut-dropdown>
+        <nut-codebox :code="demo10"></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>defaultSelected</td>
+              <td>默认选中得值，单选传入单个得数据项，多选传入数组</td>
+              <td>any</td>
+              <td>--</td>
+              <td>否</td>
+            </tr>
+            <tr>
+              <td>options</td>
+              <td>下拉项options数组，可以是简单数组，也可以是复杂对象数组</td>
+              <td>Array</td>
+              <td>--</td>
+              <td>是</td>
+            </tr>
+            <tr>
+              <td>optionKey</td>
+              <td>当options参数是复杂对象数组的时候，传入option展示的字段名</td>
+              <td>String</td>
+              <td>--</td>
+              <td>当options参数是复杂对象数组的时，必须</td>
+            </tr>
+            <tr>
+              <td>multiple</td>
+              <td>是否支持多选</td>
+              <td>Boolean</td>
+              <td>false</td>
+              <td>true/false</td>
+            </tr>
+            <tr>
+              <td>search</td>
+              <td>是否启用组件的搜索过滤选项功能</td>
+              <td>Boolean</td>
+              <td>false</td>
+              <td>true/false</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>selectedChange</td>
+              <td>当选中的option发生改变的时候触发</td>
+              <td>被选中的option值，多选的时候返回选中项组成的数组</td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      options: ['一','二','三','四'],
+      options2: [{name: '张三', id: 1}, {name: '李四', id: 2}, {name: '王五', id: 3}, {name: '马六', id: 4}, {name: '王久', id: 5}],
+      code: `
+        export default {
+          data() {
+            retuen {
+              options: ['一','二','三','四'],
+              options2: [{name: '张三', id: 1}, {name: '李四', id: 2}, {name: '王五', id: 3}, {name: '马六', id: 4}, {name: '王久', id: 5}],
+            }
+          },
+          methods: {
+            selectedChange(option) {
+              console.log(option)
+            },
+          }
+        }
+      `,
+      demo1: `<nut-dropdown :options="options" @selectedChange='multipleSelected'></nut-dropdown>`,
+      demo2: `<nut-dropdown :options="options" @selectedChange='selectedChange' defaultSelected='二'></nut-dropdown>`,
+      demo3: `<nut-dropdown :options="options" multiple @selectedChange='selectedChange'></nut-dropdown>`,
+      demo4: `<nut-dropdown :options="options" multiple @selectedChange='selectedChange' :defaultSelected="['一','二']"></nut-dropdown>`,
+      demo5: `<nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' ></nut-dropdown>`,
+      demo6: `<nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name'></nut-dropdown>`,
+      demo7: `<nut-dropdown :options="options2" @selectedChange='selectedChange' optionKey='name' :defaultSelected="{name: '李四', id: 2}"></nut-dropdown>`,
+      demo8: `<nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' :defaultSelected="[{name: '李四', id: 2}]"></nut-dropdown>`,
+      demo9: `<nut-dropdown :options="options2" multiple @selectedChange='selectedChange' optionKey='name' search></nut-dropdown>`,
+      demo10: `<nut-dropdown :options="options" @selectedChange='selectedChange' search></nut-dropdown>`
+    };
+  },
+  mounted(){
+  },
+  methods: {
+    selectedChange(option) {
+      console.log(option)
+    },
+    multipleSelected(options) {
+      console.log(options)
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>

src/view/footercom.vue

@@ -0,0 +1,156 @@
+<template>
+    <div>
+      <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Component" 
+        desc="公共底部菜单" 
+        :showQrCode="true"></nut-docheader>
+        <!-- DEMO区域 -->
+        <h6>默认用法(图标+文字)</h6>
+        <nut-codebox :code="demo1"  imgUrl="../asset/img/demo/footercom2.png"></nut-codebox>
+
+        <h6>仅显示图标</h6>
+        <nut-footercom :menuList='footerMenuList'></nut-footercom>
+        <nut-codebox imgUrl="../asset/img/demo/footercom3.png" :code="demo2"></nut-codebox>
+        <h6>均支持2个到4个子菜单</h6>
+        <nut-footercom :menuList='footerMenuList'></nut-footercom>
+        <nut-codebox imgUrl="../asset/img/demo/footercom4.png" :code="demo3"></nut-codebox>
+        <h6>使用须知与通用数据代码和回调示例</h6>
+        <nut-codebox :code="code"></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>footerMenuList </td>
+                  <td>菜单图标文案数组配置请参考上方注释</td>
+                  <td>Array</td>
+                  <td>如图所见选中前后的icon和文字（文字可不配置）</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>changeMenuFn</td>
+              <td>当点击某个菜单时触发</td>
+              <td>被点击菜单的数据对象</td>
+            </tr>
+          </tbody>
+        </table>
+        </div>
+    </div>
+
+
+    
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      code: `
+            //菜单图标文案 数组对象  使用须知：
+            // 1， 数组内对象可用属性共有： iconselect(选中图标)  icon(默认图标)   url(跳转地址)  text(文案)
+            // 2， text(文案) 要配置请全部配置。
+            // 3,  url(跳转地址) 不配置则不做跳转
+            // 4, iconselect(选中图标)  icon(默认图标)  为必选属性
+            export default {
+              data() {
+                return  {
+                  footerMenuList:[
+                      {
+                        iconselect:
+                          "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+                        icon:
+                          "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+                        url: "/orderDetail",
+                        text:'首页'
+                      },
+                      {
+                        iconselect:
+                          "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+                        icon:
+                          "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+                        url: "/orderDetail",
+                        text:'测试1'
+                      },
+                      {
+                        iconselect:
+                          "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+                        icon:
+                          "http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+                        url: "/orderDetail",
+                        text:'测试2'
+                      },
+
+                      {
+                        iconselect:
+                          "http://img12.360buyimg.com/uba/jfs/t26998/32/1861936/1307/776501d8/5b7fc73dNf725ab6d.png",
+                        icon:
+                          "http://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.png",
+                        text:'测试3'
+                      }
+                    ]
+                }
+              },
+              methods: {
+                changeMenuFn(item) {
+                  console.log(item)
+                },
+              }
+            }
+          `,
+      demo1: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>
+            //配置数据每一项为
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+             url: "/orderDetail",
+             text:'首页'
+           }      
+          
+          `,
+      demo2: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>
+          //配置数据每一项为
+           {
+             iconselect: "http://img13.360buyimg.com/uba/jfs/t27010/39/1558743/896/9e3c3096/5b7fc73dN636e01f4.png",
+             icon:"http://img20.360buyimg.com/uba/jfs/t24202/290/2428485933/1010/db808515/5b7fc6afN8d31330b.png",
+             url: "/orderDetail"
+           }  `,
+      demo3: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>//配置数据footerMenuList 数组长度支持2到4个
+      `
+    };
+  },
+  methods: {
+    changeRate(index) {
+      //console.log(index);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/view/intro.vue

@@ -32,7 +32,7 @@
 <h5>联系我们</h5>
 <p>如果您在使用组件的过程中遇到了什么问题，或者有什么意见建议，都欢迎与我们联系：<a href="mailto:nutui@jd.com">nutui@jd.com</a></p>
 <h5>使用项目</h5>
-<p><router-link  tag="a" to="/cases" :class="{ current:path=='/cases' }" target='_blank'>点击查看正在使用项目。</router-link>如果您在项目里使用了NutUI，欢迎告知。</p>
+<p><router-link  tag="a" :to="{path:'/cases',query:{time:currTime}}" :class="{ current:path=='/cases' }" target='_blank'>点击查看正在使用项目。</router-link>如果您在项目里使用了NutUI，欢迎告知。</p>
     </div>
 </template>
 
@@ -44,7 +44,8 @@ export default {
 :visible.sync="maskShow">
 </nut-mask>`,
           total:'--',
-          version:'--'
+          version:'--',
+          currTime:new Date().getTime()
         }
     },
     components: {
@@ -81,4 +82,5 @@ img{
         height:100px;
     }
 }
+
 </style>

src/view/tab.vue

@@ -167,6 +167,64 @@ demo5:
 }
 .customer-css .nut-tab-link[data-v-240d0c90]{
   width:100%;
+}`, demo1:
+`<nut-tab @tab-switch="tabSwitch">
+    <nut-tab-panel tabTitle="页签名称1">11</nut-tab-panel>
+    <nut-tab-panel tabTitle="页签名称2">
+      <h2>22</h2>
+    </nut-tab-panel>
+    <nut-tab-panel tabTitle="页签名称3">33</nut-tab-panel>
+    <nut-tab-panel tabTitle="页签名称4">44</nut-tab-panel>
+</nut-tab>`,
+        demo2:
+`<nut-tab @tab-switch="tabSwitch"  positionNav="left">
+    <nut-tab-panel tabTitle="页签1">11</nut-tab-panel>
+    <nut-tab-panel tabTitle="页签2" iconUrl="图片地址">
+      <h2>22</h2>
+    </nut-tab-panel>
+    <nut-tab-panel tabTitle="页签3">33</nut-tab-panel>
+    <nut-tab-panel tabTitle="页签4">44</nut-tab-panel>
+</nut-tab>`,
+        demo3:
+`<nut-tab @tab-switch="tabSwitch" :contentShow="false">
+    <nut-tab-panel tabTitle="页签1">11</nut-tab-panel>
+    <nut-tab-panel tabTitle="页签2" tabLink="http://www.baidu.com">
+      <h2>22</h2>
+    </nut-tab-panel>
+    <nut-tab-panel tabTitle="页签3" tabLink="http://www.jd.com">33</nut-tab-panel>
+</nut-tab>`,
+        demo4:
+`<nut-tab 
+  :defIndex="1"
+  class="customer-css" 
+  @tab-switch="tabSwitch"
+  :contentShow="true"
+  >
+      <nut-tab-panel tabTitle="页签1">11</nut-tab-panel>
+      <nut-tab-panel tabTitle="页签2">
+        <h2>22</h2>
+      </nut-tab-panel>
+      <nut-tab-panel tabTitle="页签3">33</nut-tab-panel>
+      <nut-tab-panel tabTitle="页签4">44</nut-tab-panel>
+  </nut-tab>`,
+demo5:
+`.customer-css .nut-tab-active .nut-tab-link[data-v-240d0c90]{
+  border-bottom: 1px solid #0E90D2;
+  background: #F5F7FA;
+}
+.customer-css .nut-title-nav-list[data-v-240d0c90]{
+  background: #fff;
+  border-left: 1px solid #F5F7FA;
+}
+.customer-css .nut-title-nav-list[data-v-240d0c90]:first-child{
+  border-left: 0;
+};
+.customer-css .nut-tab-active[data-v-240d0c90]{
+  background: #F5F7FA;
+  border: 0;
+}
+.customer-css .nut-tab-link[data-v-240d0c90]{
+  width:100%;
 }`,
 
         }