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

NEXT.md

@@ -0,0 +1,34 @@
+**NutUI 2.0计划**
+
+从标题可以看出，我们曾经有过 NutUI 1.0，没错！就是那个无所不能，包罗万象的 NutUI 组件库！！在上版组件库中，多位开发者呕心沥血，共同经历了组件库从无到有的过程。虽然第一个版本已经满足了大部分的业务需求，但是我们并不会止步于此！
+我们决定打磨出更好、更规范、更加优秀的组件库！这就是———— NutUI 2.0！
+
+在 NutUI 2.0 中我们决定重新构建组件库的架构，并且增加多个特性，保证组件质量的同时，优化组件样式，主要方向是组件的**精品化**和**跨平台**，从网站到组件全面提升用户体验。说到这里，有木有很激动？有木有很期待？反正我都快在凳子上激动的坐不住了，快让我来揭开 NutUI2.0 的新特性面纱吧！
+
+>新版本的NutUI将具备以下特性：
+
+
+- 特性1 跨平台，提交的Vue组件自动生成微信小程序组件
+- 特性2 脚手架升级webpack 4.0，构建速度大幅提升
+- 特性3 网站页面设计由设计师小姐姐把持，组件严格按照京东APP最新UI规范开发
+- 特性4 统一的动效
+- 特性5 更方便、更灵活、更优雅的按需引用方式
+- 特性6 组件内建文案支持多语言（国际化）
+- 特性7 支持自定义主题
+- 特性8 基于MD文件自动生成文档
+- 特性9 支持自动化测试和持续集成
+- 特性10 官网将支持PWA
+
+------------------------------------------------------
+听我叨叨叨了这么多，各位看官肯定要问了，说的这么好，是骡子是马牵出来溜溜呀！
+还真不行，因为目前 NutUI 2.0 版还正在紧锣密鼓的开发中。
+
+<img src="http://img11.360buyimg.com/uba/jfs/t1/3443/17/12056/37762/5bd17892Ef40b38fd/0154d1c7c651a079.gif">
+2018 年对于 NutUI 组件库来说是不平凡的一年，从它呱呱坠地，到咿呀学语。我们就像看待自己的孩子一样，细心呵护，希望它不负众望，为广大前端开发者带来便利。士不可以不弘毅，任重而道远！在距离 2018 年还有两个月的时间内，我们的目标是：
+
+<img src="http://img11.360buyimg.com/uba/jfs/t1/6849/6/2522/310293/5bd17b79E953215d8/9a7d799ce0ca8b84.png">
+
+虽然只是 BETA 版本，但这是 NuiUI 2.0 的一大步！
+
+------------------------------------------------------
+如果你有好的建议，欢迎反馈给我们。我们的邮箱是 nutui@jd.com，期待您的来信！

README.md

@@ -6,7 +6,7 @@
 
 # NutUI
 
-[![version](https://img.shields.io/badge/version-1.2-blue.svg?style=flat-square)](http://nutui.jd.com/)
+[![version](https://img.shields.io/badge/version-1.3-blue.svg?style=flat-square)](http://nutui.jd.com/)
 [![license](https://img.shields.io/badge/license-MIT-yellow.svg?style=flat-square)](http://nutui.jd.com/)
 
 > 基于Vue 2.0的移动端轻量级UI组件库

config.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.9",
+  "version": "1.3.1",
   "packages": [
     {
       "name": "DatePicker",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nutui/nutui",
   "description": "基于Vue2的轻量级移动端UI组件库",
-  "version": "1.2.9",
+  "version": "1.3.1",
   "author": "jdc-fe",
   "main": "dist/nutui.js",
   "keywords": [

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>-<a href="http://fe.jd.com/" target="_blank">前端开发部</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" target="_blank">JDC</a>-<a href="http://fe.jd.com" target="_blank">前端开发部</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

@@ -1,27 +1,100 @@
 <template>
     <div>
-        <nut-dropdown ></nut-dropdown>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <h5>示例</h5>
+
+        <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>
     </div>
+
 </template>
 
 <script>
-//import jsonp from 'jsonp';
-
 export default {
-    data(){
-      return {
-       
-      }
+  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)
     },
-    methods:{
-        
-    },
-    mounted(){
-
+    multipleSelected(options) {
+      console.log(options)
     }
-}
+  }
+};
 </script>
 
-<style>
+<style lang="scss">
 
 </style>
+

src/demo/footercom.vue

@@ -0,0 +1,134 @@
+<template>
+    <div>
+        <nut-demoheader 
+        :name="$route.name"
+        ></nut-demoheader>
+        <h5>示例</h5>
+        <p>默认用法</p>
+       <nut-footercom :menuList='footerMenuList1' @changeMenuFn="changeMenuFn"></nut-footercom>
+        <p>仅显示图标</p>
+        <nut-footercom :menuList='footerMenuList2' @changeMenuFn="changeMenuFn"></nut-footercom>
+    </div>
+</template>
+
+<script>
+import Vue from "vue";
+import FooterCom from '../package/footercom/index.js';
+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)
+                },
+              }
+            }
+          `,
+      footerMenuList1: [
+           {
+             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://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.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://img13.360buyimg.com/uba/jfs/t22762/195/2428374466/1450/70f02b6/5b7fc73dN45d94c02.png",
+             url: "/orderDetail",
+             text:'我的'
+           }
+           ],
+      footerMenuList2: [
+           {
+             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"
+           },
+           {
+             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"
+           },
+           {
+             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"
+           }
+           ]
+    };
+  },
+  methods: {
+    changeMenuFn(item) {
+      console.log(item);
+    }
+  },
+   components: {
+      'nut-footercom': FooterCom
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.footer-wrap{
+    position: relative !important;
+}
+</style>
+
+

src/index.html

@@ -2,12 +2,17 @@
 <html>
 <head>
     <meta charset="utf-8" /> 
+    <meta http-equiv="Expires" content="0">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Cache-control" content="no-cache">
+    <meta http-equiv="Cache" content="no-cache">
     <meta content="telephone=no" name="format-detection"/>
     <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
     <title>NutUI - 基于Vue2.0的移动端UI组件库</title> 
     <link rel="stylesheet" href="./asset/css/normalize.css">
     <link rel="stylesheet" href="./asset/css/skeleton.css">
     <!-- <link rel="stylesheet" href="./asset/css/monokai-sublime.css"> -->
+    <link rel="shortcut icon" href="../asset/img/logo.png" type="image/x-icon">
     <link rel="stylesheet" href="./asset/css/highlight.css">
     <link rel="stylesheet" href="./asset/css/main.css">
     <script src="./asset/js/highlight.pack.js"></script>

src/package/addimagesbox/src/addimagesbox.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="nut-addimagesbox">
         <div v-html="icon"></div>
-        <input  @change="addImg" class="addImgs" type="file" name="files" multiple="multiple" accept="image/*">
+        <input ref="uploadInput"  @change="addImg" class="addImgs" type="file" name="files" multiple="multiple" accept="image/*">
     </div>
 </template>
 <script>
@@ -93,7 +93,8 @@ export default {
                         });  
                     }                                        
                 }                
-                                   
+                
+                this.$refs.uploadInput.value = '';                                
         },
          preview(data){
                 let that = this;

src/package/pictureview/src/pictureview.vue

@@ -7,7 +7,7 @@
                 direction="horizontal"
                 :paginationVisible="pagination"
                 ref="picReload">
-                <div class="nut-swiper-silde" v-for="(item, index) in imgArr">
+                <div class="nut-swiper-slide" v-for="(item, index) in imgArr" :key="index">
                     <img :src="item">
                 </div>
             </nut-swiper>
@@ -82,7 +82,7 @@ export default {
     justify-content:center;
     .nut-swiper{
         height: 4rem;
-        .nut-swiper-silde{
+        .nut-swiper-slide{
             display: flex;
             align-items: center;
             justify-content:center;

src/package/select/src/dateSwiper.vue

@@ -19,7 +19,7 @@
                             :speed="250"
                             @slideChangeEnd="slideEnd"
                             >
-                                <div class="nut-swiper-silde" v-for="item in d.data"><span>{{item[nodeKey]}}</span></div>
+                                <div class="nut-swiper-slide" v-for="item in d.data"><span>{{item[nodeKey]}}</span></div>
                             </nut-swiper>
                         </template>                    
                     </div>                
@@ -90,7 +90,7 @@
     }
 </script>
 <style lang="scss" scoped>
-    .nut-swiper-silde {
+    .nut-swiper-slide {
         height: 0.7rem!important;
         line-height: 0.7rem;
         text-align: center;
@@ -124,7 +124,7 @@
             padding-top: 1.40rem!important;
             transition: .5s all;
         }
-        .nut-swiper-silde-selected {
+        .nut-swiper-slide-selected {
             color: #333!important;
         }
     }

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;
@@ -625,7 +629,7 @@ p{
         width: 267px;
         height: 454px;
     }
-    .nut-swiper .nut-swiper-silde{
+    .nut-swiper .nut-swiper-slide{
         display: flex;
         justify-content: center;
     }

src/view/footercom.vue

@@ -8,14 +8,11 @@
         :showQrCode="true"></nut-docheader>
         <!-- DEMO区域 -->
         <h6>默认用法(图标+文字)</h6>
-        <nut-codebox :code="demo1"  imgUrl="../asset/img/demo/footercom2.png"></nut-codebox>
-
+        <nut-codebox imgUrl="../asset/img/demo/footercom4.png" :code="demo1"></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>
@@ -123,8 +120,8 @@ export default {
               }
             }
           `,
-      demo1: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>
-            //配置数据每一项为
+      demo1: `<nut-footercom :menuList='footerMenuList'  @changeMenuFn="changeMenuFn"></nut-footercom>//配置数据footerMenuList 数组长度支持2到4个子对象，具体看下方使用须知
+            //配置数据每一项为  
            {
              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",
@@ -139,9 +136,7 @@ export default {
              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: {

src/view/intro.vue

@@ -82,4 +82,5 @@ img{
         height:100px;
     }
 }
+
 </style>

src/view/swiper.vue

@@ -212,16 +212,16 @@ export default {
    :performanceMode="true"
    ref="demo1"
    @slideChangeEnd="slideChangeEnd">
-    <div v-for="item in dataItem" class="nut-swiper-silde"><span>page{{item.name}}</span></div>
+    <div v-for="item in dataItem" class="nut-swiper-slide"><span>page{{item.name}}</span></div>
 </nut-swiper>`,
           demo2:
 `<nut-swiper
     :pagination-visible="false"
     :performanceMode="true"
     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>`,
           demo3:
 `<nut-swiper
@@ -229,27 +229,27 @@ export default {
     @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>`,
           demo4:
 `<nut-swiper
     :pagination-visible="true"
     :loop="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>`,
           demo5:
 `<nut-swiper
     :pagination-visible="false"
     :autoPlay="1000"
     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>`,
           demo6:
 `<nut-swiper
@@ -259,7 +259,7 @@ export default {
     :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>
@@ -273,7 +273,7 @@ export default {
         <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>
@@ -287,7 +287,7 @@ export default {
         <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>

webpack.config.js

@@ -20,7 +20,8 @@ webpackConfig.entry = {
 webpackConfig.output = {
     path: path.resolve(__dirname, 'dist'),
     publicPath: "/",
-    filename: '[name].js',
+    filename: "[name].js",
+    chunkFilename: "[name].[hash].js",
     library: 'nutui',
     libraryTarget: 'umd',
     umdNamedDefine: true
@@ -72,6 +73,7 @@ webpackConfig.plugins = [
     new HtmlWebpackPlugin({
         filename: path.resolve(__dirname, './dist/index.html'),
         template: './src/index.html',
+        hash:true,
         chunks: ['app']
     }),
     new HtmlWebpackPlugin({