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

CHANGELOG.md

@@ -0,0 +1,21 @@
+## 2.0.0
+
+`2019-1-15`
+
+### 新特性
+
+- :zap: 全新的架构
+- :lipstick: 全新的视觉样式，参照京东APP v7.0视觉规范
+- :sparkles: 全新的按需加载方式
+- :art: 新增支持定制主题
+- :globe_with_meridians: 新增支持多语言（国际化）
+- :sparkles: 新增支持 TypeScript
+- :sparkles: 新增支持服务端渲染（Vue SSR）
+- :white_check_mark: 新增单元测试
+- :pencil2: CSS单位由 `rem` 改为 `px`
+- :sparkles: 新增若干组件
+
+
+### ⚠️ 升级必读
+
+- 2.x 不兼容 1.x，建议直接升级到 2.x 的最新版本

README.md

@@ -3,23 +3,25 @@
  
 一套移动端轻量级Vue组件库
     
-![NutUI](http://img11.360buyimg.com/uba/jfs/t1/11117/21/3608/18942/5c20ab52E35e5a500/02e3c1f89cd3dad1.png)
+![NutUI](https://img11.360buyimg.com/uba/jfs/t1/11117/21/3608/18942/5c20ab52E35e5a500/02e3c1f89cd3dad1.png)
 
 
 ## 特性
 
 * 跨平台，自动转微信小程序组件（稍后上线，敬请期待）
+* 全新的架构
 * 30+ 京东移动端项目正在使用
-* 基于京东APP 7.0 视觉规范
+* 参照京东APP 7.0 视觉规范
 * 支持按需加载
 * 详尽的文档和示例
 * 支持定制主题
 * 支持多语言（国际化）
 * 支持 TypeScript
 * 支持服务端渲染（Vue SSR）
+* 单元测试加持
 * 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程 
 
-> 如需使用 1.x 版本，安装时请指定版本号，如：  `npm i @nutui/nutui@1.3.2 -S`
+> 如需使用 1.x 版本，安装时请指定版本号，如： `npm i @nutui/nutui@1.3.2 -S`
 
 ## 支持环境
 
@@ -29,21 +31,21 @@
 
 ## 版本
 
-* 稳定版：![npm](https://img.shields.io/npm/v/@nutui/nutui.svg)
+* 稳定版：[![npm](https://img.shields.io/npm/v/@nutui/nutui.svg)](https://www.npmjs.com/package/@nutui/nutui)
 
 > 你还可以订阅： https://github.com/jdf2e/nutui/releases.atom 来获得稳定版发布的通知。
 
 ## 示例
 
-![npm version](http://img13.360buyimg.com/uba/s300x300_jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.jpg)
+![NutUI Demo](https://img14.360buyimg.com/uba/s300x300_jfs/t1/32118/11/559/2782/5c3d81ecEbda0c0f1/5f2b637d11817204.png)
 
 ## 安装使用
 
 具体安装使用方法请参考 NutUI 官网 
 
-http://nutui.jd.com
+https://nutui.jd.com
 
-文档：[2.X](http://nutui.jd.com/default.html#/start) | [1.X](http://nutui.jd.com/1x/index.html#/intro)
+文档：[2.X](https://nutui.jd.com/default.html#/start) | [1.X](https://nutui.jd.com/1x/index.html#/intro)
 
 ## 链接
 * [意见反馈](https://github.com/jdf2e/nutui/issues)

build/webpack.doc.base.conf.js

@@ -27,13 +27,13 @@ module.exports = merge(webpackBaseConf, {
             entry:'./src',
             output:'./sites/doc/view/',
             template:'./doc-site/template.html',
-            nav:'left' // left top right bottom
+            nav:'left'
         }),
         new mdtohtml({
             entry:'./docs',
             output:'./sites/doc/page/',
             template:'./doc-site/template.html',
-            nav:'left', // left top right bottom
+            nav:'left',
             nohead:true
         }),
         new HtmlWebpackPlugin({

build/webpack.doc.dev.conf.js

@@ -1,7 +1,7 @@
 
 const path = require('path');
 const baseConf = require('./webpack.doc.base.conf.js');
-const merge = require('webpack-merge')
+const merge = require('webpack-merge');
 
 
 module.exports = merge(baseConf, {

docs/intro.md

@@ -23,6 +23,7 @@ NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web
 * 支持多语言（国际化）
 * 支持 TypeScript
 * 支持服务端渲染（Vue SSR）
+* 单元测试加持
 * 配套有基于Webpack的构建工具，可快速创建已内置本组件库的Vue工程
 
 ## 支持环境

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",
@@ -66,6 +66,7 @@
     "@babel/preset-env": "7.1.0",
     "@nutui/carefree": "^0.4.0",
     "@tweenjs/tween.js": "17.2.0",
+    "istanbul-instrumenter-loader": "^3.0.1",
     "@vue/test-utils": "1.0.0-beta.25",
     "autoprefixer": "9.1.3",
     "babel-eslint": "8.2.6",

scripts/mdToVue.js

@@ -61,7 +61,7 @@ let jsroot = `<script>export default {
           return res.previousElementSibling
         }
     });    
-    let demourl = 'http://nutui.jd.com/demo.html#'+that.$route.path;
+    let demourl = 'https://nutui.jd.com/demo.html#'+that.$route.path;
 
     this.demourl = demourl;
     this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{

sites/demo/app.js

@@ -74,6 +74,7 @@ OfflinePluginRuntime.install({
       noOkBtn: true,
       cancelBtnTxt: "刷新页面",
       closeOnClickModal:false,
+      lockBgScroll:true,
       onCancelBtn(){
         window.location.reload();
       }

sites/demo/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="['demo-wrapper',{'in-iframe':inIframe}]">
-    <router-view class="demo-nav" name="demonav" v-if="!inIframe"></router-view>
+    <router-view class="demo-nav" name="demonav" v-if="!inIframe" v-transition></router-view>
     <keep-alive include="index">
       <router-view class="demo" name="main" v-transition></router-view>
     </keep-alive>
@@ -8,77 +8,50 @@
 </template>
 <script>
 export default {
-  name: 'App',
-  data(){
+  name: "App",
+  data() {
     return {
-      inIframe:false
-    }
+      inIframe: false
+    };
   },
-  mounted(){
-    if (window.self != window.top) { 
+  mounted() {
+    if (window.self != window.top) {
       this.inIframe = true;
     }
-
-    if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile|MQQBrowser|JUC|Windows Phone)/i)) {
-      window.isMobile = true;
-    } else {
-      window.isMobile = false;
-    }
   }
-}
+};
 </script>
 <style lang="scss">
-*{
+* {
   -webkit-tap-highlight-color: transparent;
 }
 [v-cloak] {
   display: none;
 }
-body{
-    font-size:16px;
-    margin: 0;
-    color:#2e2d2d;
-    font-family: PingHei,"Microsoft YaHei","Lucida Grande","Lucida Sans Unicode",STHeiti,Helvetica,Arial,Verdana,"sans-serif","PingHei-light",SimHei,"Droid Sans";  
+body {
+  font-size: 16px;
+  margin: 0;
+  color: #2e2d2d;
+  font-family: PingHei, "Microsoft YaHei", "Lucida Grande",
+    "Lucida Sans Unicode", STHeiti, Helvetica, Arial, Verdana, "sans-serif",
+    "PingHei-light", SimHei, "Droid Sans";
 }
-.demo-wrapper{
-  width:100%;
-  min-height:100vh;
-  padding-top:40px;
-  box-sizing:border-box;
-  background: #F6F6F6;
-  &.in-iframe{
-    padding-top:0;
+.demo-wrapper {
+  width: 100%;
+  min-height: 100vh;
+  padding-top: 40px;
+  box-sizing: border-box;
+  background: #f6f6f6;
+  &.in-iframe {
+    padding-top: 0;
   }
 }
-h4{
-  padding:0 8px;
+h4 {
+  padding: 0 8px;
   box-sizing: border-box;
 }
-.demo{
-  padding-left:8px;
-  padding-right:8px;
+.demo {
+  padding-left: 8px;
+  padding-right: 8px;
 }
-// .button-primary {
-//     display: block;
-//     margin:.5rem 0;
-//     height: 38px;
-//     padding: 0 24px;
-//     color: #555;
-//     text-align: center;
-//     font-size: 12px;
-//     font-weight: 600;
-//     line-height: 38px;
-//     letter-spacing: .1rem;
-//     text-transform: uppercase;
-//     text-decoration: none;
-//     white-space: nowrap;
-//     background-color: transparent;
-//     border-radius: 4px;
-//     border: 1px solid #bbb;
-//     cursor: pointer;
-//     box-sizing: border-box;
-//     color: #FFF;
-//     background-color: #33C3F0;
-//     border-color: #33C3F0;
-// }
 </style>

sites/demo/asset/manifest.json

@@ -1,7 +1,7 @@
 {
     "short_name": "NutUI",
     "name": "一套京东风格的移动端Vue组件库",
-    "icon": [
+    "icons": [
         {
             "src": "/img/pwa_logo.png",
             "type": "image/png",

sites/demo/index.html

@@ -8,7 +8,6 @@
   <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
   <link rel="manifest" href="./demo/manifest.json">
   <title>NutUI - 移动端Vue组件库</title>
-  <!-- <script src="//misc.360buyimg.com/felibs/vue/2.5.16/vue.min.js"></script> -->
   <script src="https://h5.m.jd.com/babelDiy/Zeus/2846ykuM7PwipD9E2RzMj2BGEQpA/plugin/share.min.js"></script>
   <!-- <script src="//misc.360buyimg.com/felibs/fastclick/1.0.6/fastclick.min.js"></script> -->
   <style>
@@ -28,8 +27,8 @@
 
     //分享配置
     var shareOption = {
-      iconUrl: 'http://nutui.jd.com/img/logo_share.png',
-      url: 'http://nutui.jd.com/demo.html#/index',
+      iconUrl: 'https://nutui.jd.com/img/logo_share.png',
+      url: 'https://nutui.jd.com/demo.html#/index',
       title: '轻量级移动端Vue组件库 - NutUI 2.0',
       desc: '京东风格的Vue组件库'
     };

sites/demo/router.js

@@ -65,7 +65,6 @@ const options = {
   tabsDisable: false, //值为true时，tabs间的转场没有动画，默认为false
   shadow: false, //值为false，转场时没有阴影的层次效果
   disable: false, //禁用转场动画，默认为false，嵌套路由默认为true
-  nuxt: false //若使用后端渲染框架Nuxt，需要将此设为true，默认为false
 };
 
 Vue.use(vueg, router, options);

sites/doc/app.js

@@ -3,32 +3,18 @@ import "core-js/modules/es6.array.iterator";
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router';
-// import copy from './asset/js/copy';
 import copy from 'clipboard';
 
-// import hljs from 'highlight.js/lib/highlight';
-// import javascript from 'highlight.js/lib/languages/javascript';
-// import css from 'highlight.js/lib/languages/css';
-// import html from 'highlight.js/lib/languages/htmlbars';
-// import bash from 'highlight.js/lib/languages/bash';
-// hljs.registerLanguage('javascript', javascript);
-// hljs.registerLanguage('html', html);
-// hljs.registerLanguage('css', css);
-// hljs.registerLanguage('bash', bash);
 
 import 'highlight.js/styles/github.css';
 
-//import prettify from 'google-code-prettify/src/prettify';
-//import  'google-code-prettify/src/prettify.css';
-//import  'google-code-prettify/styles/sunburst.css';
- //import qrcode from './qrcode/index.js';
+
 import codes from 'qrcode';
- //import NutUI from '../../src/nutui.js';
-//import '../dist/nutui/src/dialog/dialog.css';
-//Vue.prototype.hljs = highlight;
+
+
 Vue.prototype.copy = copy;
 Vue.prototype.qrcode = codes;
-//dialog.install(Vue);
+
 Vue.config.productionTip = false;
 
 new Vue({
@@ -38,5 +24,3 @@ new Vue({
   template: '<App/>'
 });
 
-//Vue.prototype.NUTCONF = Conf;
-

sites/doc/asset/css/common.scss

@@ -1,4 +1,3 @@
-
 @charset "utf-8";
 html,
 body,
@@ -56,8 +55,8 @@ video {
     padding: 0;
     border: 0;
     font: inherit;
-   
 }
+
 ol,
 ul {
     list-style: none;
@@ -68,11 +67,9 @@ table {
     border-spacing: 0;
 }
 
-
-
 html,
 body {
-    font-family: Helvetica Neue, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
+    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
 }
 
@@ -142,13 +139,13 @@ pre {
     &>i {
         cursor: pointer;
         position: absolute;
-        top:10px;
-        width:16px;
-        height:16px;
+        top: 10px;
+        width: 16px;
+        height: 16px;
         background-repeat: no-repeat;
-        background-size:cover;
+        background-size: cover;
         opacity: .8;
-        &:hover{
+        &:hover {
             opacity: 1;
         }
     }
@@ -272,5 +269,7 @@ pre {
 }
 
 pre.prettyprint {
-    font: 14px/24px SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace; //background: transparent;
+    code {
+        font: 14px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    }
 }

sites/doc/asset/css/style-blue.scss

@@ -135,6 +135,7 @@
             background: #F7F7F7;
             border: 1px solid #E9E9E9;
             font-size: 14px;
+            line-height: 1.5;
             color: #333333;
             height: 40px;
             padding: 0 20px 0 14px;
@@ -142,6 +143,7 @@
         td {
             border: 1px solid #E9E9E9;
             font-size: 14px;
+            line-height: 1.5;
             color: #3F4449;
             height: 50px;
             padding-left: 14px;

sites/doc/code.vue

@@ -1,54 +1,54 @@
 <template>
-	<div>
+  <div>
     <div class="nut-qrcode" id="qrcode">二维码位置</div>
-    </div>
+  </div>
 </template>
 <script>
 debugger;
-import QRCode from './asset/js/code.js';
+import QRCode from "./asset/js/code.js";
 export default {
-    name:'nut-qrcode',
-    props: {
-    	QCWidth:{
-    		type: Number,
-      		default: 160
-    	},
-    	QCHeight:{
-    		type: Number,
-      		default: 160
-    	},
-    	content:{
-    		type: String,
-      		required:true,
-    	},
-    	fontColor:{
-    		type: String,
-      		default: '#000'
-    	},
-    	backColor:{
-    		type: String,
-      		default: '#fff'
-    	}
+  name: "nut-qrcode",
+  props: {
+    QCWidth: {
+      type: Number,
+      default: 160
     },
-    data() {
-        return {};
+    QCHeight: {
+      type: Number,
+      default: 160
     },
-    mounted(){
-    	this.qrcode();
+    content: {
+      type: String,
+      required: true
     },
-    methods: {
-    	qrcode () {
-	      let qrcode = new QRCode('qrcode', {  
-	        width: this.QCWidth,  
-	        height: this.QCHeight,   // 高度  
-	        text: this.content, // 二维码内容  
-	        colorDark: this.fontColor,  
-	        colorLight: this.backColor,  
-			margin:0
-	      })  
-	    }
+    fontColor: {
+      type: String,
+      default: "#000"
+    },
+    backColor: {
+      type: String,
+      default: "#fff"
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.qrcode();
+  },
+  methods: {
+    qrcode() {
+      let qrcode = new QRCode("qrcode", {
+        width: this.QCWidth,
+        height: this.QCHeight, // 高度
+        text: this.content, // 二维码内容
+        colorDark: this.fontColor,
+        colorLight: this.backColor,
+        margin: 0
+      });
     }
-}
+  }
+};
 </script>
 <style lang="scss">
 </style>

sites/doc/index.html

@@ -30,4 +30,5 @@
     })()
   </script>
 </body>
+
 </html>

sites/doc/info.vue

@@ -1,56 +1,57 @@
 <template>
-<div class="main-menu lt-nv">
-  <ol class="nav-l-1">
-    <dt>指南</dt>
-    <dd :class="curName=='intr' ?'l-1 curs':'l-1'">
-      <a href="#/doc">介绍</a>
-    </dd>
-    <dd :class="curName=='fastStart' ?'l-1 curs':'l-1'">
-      <a href="#/start">快速上手</a>
-    </dd>
-    <dd :class="curName=='theme' ?'l-1 curs':'l-1'">
-      <a href="#/theme">主题定制</a>
-    </dd>
-    <dd :class="curName== 'international' ?'l-1 curs':'l-1'">
-      <a href="#/international">国际化</a>
-    </dd>
-    <dd :class="curName=='update' ?'l-1 curs':'l-1'">
-      <a href="https://github.com/jdf2e/nutui/releases" target="_blank">更新日志</a>
-    </dd>
-  </ol>
-  <ol>
-    <dt>组件</dt>
-    <dd
-      class="l-1"
-      @click="selectNav(nameObj.name)"
-      :class="cur.indexOf(nameObj.name)>-1&&'cur'"
-      v-for="(nameObj,index) in sortedPackages"
-      :key="index"
-    >
-      <div class="l-c-i">
-        <span>{{nameObj.name}}</span>
-        <i class="pt"></i>
-      </div>
-      <ul class="l-2" v-if="cur.indexOf(nameObj.name)>-1">
-        <template v-for="cpt in nameObj.ary">
-          <li
-            v-on:click.stop="listCheck(cpt)"
-            :class="curName==cpt.name ?'curs':''"
-            :key="cpt.name" v-if="cpt.showDemo"
-          >
-            <router-link :to="{name:cpt.name}">
-              {{cpt.name}}
-              <span>{{cpt.chnName}}</span>
-            </router-link>
-          </li>
-        </template>
-      </ul>
-    </dd>
-  </ol>
-</div>
+  <div class="main-menu lt-nv">
+    <ol class="nav-l-1">
+      <dt>指南</dt>
+      <dd :class="curName=='intr' ?'l-1 curs':'l-1'">
+        <a href="#/intro">介绍</a>
+      </dd>
+      <dd :class="curName=='fastStart' ?'l-1 curs':'l-1'">
+        <a href="#/start">快速上手</a>
+      </dd>
+      <dd :class="curName=='theme' ?'l-1 curs':'l-1'">
+        <a href="#/theme">主题定制</a>
+      </dd>
+      <dd :class="curName== 'international' ?'l-1 curs':'l-1'">
+        <a href="#/international">国际化</a>
+      </dd>
+      <dd :class="curName=='update' ?'l-1 curs':'l-1'">
+        <a href="https://github.com/jdf2e/nutui/releases" target="_blank">更新日志</a>
+      </dd>
+    </ol>
+    <ol>
+      <dt>组件</dt>
+      <dd
+        class="l-1"
+        @click="selectNav(nameObj.name)"
+        :class="cur.indexOf(nameObj.name)>-1&&'cur'"
+        v-for="(nameObj,index) in sortedPackages"
+        :key="index"
+      >
+        <div class="l-c-i">
+          <span>{{nameObj.name}}</span>
+          <i class="pt"></i>
+        </div>
+        <ul class="l-2" v-if="cur.indexOf(nameObj.name)>-1">
+          <template v-for="cpt in nameObj.ary">
+            <li
+              v-on:click.stop="listCheck(cpt)"
+              :class="curName==cpt.name ?'curs':''"
+              :key="cpt.name"
+              v-if="cpt.showDemo"
+            >
+              <router-link :to="{name:cpt.name}">
+                {{cpt.name}}
+                <span>{{cpt.chnName}}</span>
+              </router-link>
+            </li>
+          </template>
+        </ul>
+      </dd>
+    </ol>
+  </div>
 </template>
 <script>
-import { sorts,packages } from "../../src/config.json";
+import { sorts, packages } from "../../src/config.json";
 export default {
   name: "index",
   data() {
@@ -93,29 +94,29 @@ export default {
           ary: temp[key]
         });
       }
-      let routeName = this.$route.name
+      let routeName = this.$route.name;
       this.sortedPackages = tempAry;
-       tempAry.map(list=>{
+      tempAry.map(list => {
         let showParentNode = false;
-        list.ary.map(ary=>{
-          if(ary.name==routeName){
-            showParentNode=true;
+        list.ary.map(ary => {
+          if (ary.name == routeName) {
+            showParentNode = true;
           }
-        })
-        if(showParentNode){
-          that.cur.push(list.name)
+        });
+        if (showParentNode) {
+          that.cur.push(list.name);
         }
-      })
+      });
     },
     $route: "fetchData"
   },
   methods: {
     fetchData(obj) {
       let that = this;
-      this.curName = obj.name;    
-      let sortedPackages = this.sortedPackages;      
-     
-      this.selectNav( obj.name) 
+      this.curName = obj.name;
+      let sortedPackages = this.sortedPackages;
+
+      this.selectNav(obj.name);
     },
     listCheck(obj) {
       // this.curName = obj.name;
@@ -134,8 +135,8 @@ export default {
   created() {
     let nameRt = this.$route.name;
     let packgs = packages;
-    
-    this.cur = sorts
+
+    this.cur = sorts;
     this.curName = nameRt;
     this.packages = packgs;
     this.sorts = sorts;
@@ -151,25 +152,26 @@ export default {
   opacity: 0;
   height: 0;
 }
-ul,ol {
+ul,
+ol {
   margin: 0;
   list-style: none;
   padding: 0;
 }
 
-dt{
-  font-size:16px;
+dt {
+  font-size: 16px;
   font-weight: 500;
-  text-indent:35px;
-  color:#5b657b;
-  margin:10px 0;
+  text-indent: 35px;
+  color: #5b657b;
+  margin: 10px 0;
 }
 
-dd{
-  margin:0;
-  &>a{
-    display:block;
-    height:100%;
+dd {
+  margin: 0;
+  & > a {
+    display: block;
+    height: 100%;
     cursor: pointer;
   }
 }
@@ -257,19 +259,16 @@ dd{
       }
     }
   }
-  .nav-l-1{
-    dd:hover{   
-    transition: all 0.5;
-    background: rgba(83, 150, 255, 0.14);
-    border-right: 4px solid #5396ff;   
+  .nav-l-1 {
+    dd:hover {
+      transition: all 0.5;
+      background: rgba(83, 150, 255, 0.14);
+      border-right: 4px solid #5396ff;
       a,
       span {
         color: #5396ff;
       }
     }
-  } 
-  
-
-  
+  }
 }
 </style>

sites/doc/router.js

@@ -32,7 +32,7 @@ const routes = [
     
   },
   {    
-    path: '/doc',
+    path: '/intro',
     name:'intr',
     components: {
       demonav: Index,

src/packages/dialog/dialog.scss

@@ -1,8 +1,7 @@
 @import "../../styles/animation/fade";
 @import "../../styles/animation/ease";
 body.dialog-open {
-    position: fixed; //width: 100%;
-    //overflow:hidden;
+    position: fixed;
 }
 
 .nut-dialog-wrapper {

src/packages/slider/demo.vue

@@ -91,10 +91,7 @@ export default {
       val6: 0
     };
   },
-  methods: {},
-  mounted() {
-    this.isMobile = window.isMobile;
-  }
+  methods: {}
 };
 </script>
 

src/packages/swiper/demo.vue

@@ -7,8 +7,8 @@
             ref="demo1"
             
         >
-            <div  v-for="(item,index) in dataItem" :key="index"  class="nut-swiper-slide">
-                <span>page{{item.name}}</span>
+           <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;"/> 
             </div>
 
         </nut-swiper>
@@ -22,8 +22,8 @@
             :paginationVisible="true"
             
         >
-            <div  v-for="(item,index) in dataItem" :key="index"  class="nut-swiper-slide">
-                <span>page{{item.name}}</span>
+             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;" /> 
             </div>
 
         </nut-swiper>
@@ -38,17 +38,8 @@
             :paginationVisible="true"
             
         >
-            <div  class="nut-swiper-slide gray" >
-                <span>page 1</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 2</span>
-            </div>
-            <div  class="nut-swiper-slide gray" >
-                <span>page 3</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 4</span>
+             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;" /> 
             </div>
 
 
@@ -57,33 +48,23 @@
          <h4>纵向自动播放</h4>
           <nut-swiper
             direction="vertical"
-            ref="dem4"
+            ref="demo4"
             :autoPlay="3000"
-            id="dome4"
         >
-            <div  class="nut-swiper-slide gray" >
-                <span>page 1</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 2</span>
-            </div>
-            <div  class="nut-swiper-slide gray" >
-                <span>page 3</span>
-            </div>
-            <div  class="nut-swiper-slide gray_1" >
-                <span>page 4</span>
+             <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
+                <img :src="item.imgSrc"   style="max-width:100%;" /> 
             </div>
         </nut-swiper>
 
         <h4>滑动懒加载图片</h4>
         <nut-swiper
             direction="horizontal"
-            ref="demo4"
+            ref="demo5"
             :lazyLoad="true"
              :paginationVisible="true"
         >
              <div  v-for="(item,index) in dataImgItem" :key="index"  class="nut-swiper-slide ">
-                <img :data-src="item.imgSrc"   style="max-width:100%; max-height:100%" class="nut-img-lazyload"/> 
+                <img :data-src="item.imgSrc"  style="max-width:100%;" class="nut-img-lazyload"/> 
             </div>
 
         </nut-swiper>
@@ -115,21 +96,24 @@
 
                 this.dataImgItem = [
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t19441/80/1577112624/568821/1ee9b683/5ad064f1Nf41a94b4.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/18629/34/3378/144318/5c263f64Ef0e2bff0/0d650e0aa2e852ee.jpg'
                     },
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t16798/338/1617130854/542623/4c197f4d/5ad064f1Nce5f69e2.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/26597/30/4870/174583/5c35c5d2Ed55eedc6/50e27870c25e7a82.png'
                     },
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t22123/348/720079801/233727/23c4c0a4/5b162d64Nc5883413.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/9542/17/12873/201687/5c3c4362Ea9eb757d/60026b40a9d60d85.jpg'
                     },
                     {
-                        imgSrc:'//m.360buyimg.com/mobilecms/s843x843_jfs/t1/27233/9/354/82863/5c090a0eEe2a350d8/aaa6686ce133e364.jpg'
+                        imgSrc:'//m.360buyimg.com/mobilecms/s750x366_jfs/t1/30042/36/427/82951/5c3bfdabE3faf2f66/9adca782661c988c.jpg'
                     }
                 ];
                 
                 this.$refs.demo1.updateEvent(1);
                 this.$refs.demo2.updateEvent();
+                this.$refs.demo3.updateEvent();
+                this.$refs.demo5.updateEvent();
+
 
                 this.$refs.demo4.updateEvent();
 
@@ -146,26 +130,17 @@
             align-items: center;
             display: flex;
         }
-        .nut-swiper-slide:nth-child(1), .nut-swiper-slide:nth-child(3){
-            color:#fff;
-            background:#848689;
-        }   
-        .nut-swiper-slide:nth-child(2), .nut-swiper-slide:nth-child(4){
-            color:#333;
-            background:#ccc;
-        }
-        .gray{
-             color:#fff !important;
-            background:#848689 !important;
-        }
-        .gray_1{
-             color:#333 !important;
-            background:#ccc !important;
-        }
+        // .nut-swiper-slide:nth-child(1), .nut-swiper-slide:nth-child(3){
+        //     color:#fff;
+        //     background:#848689;
+        // }   
+        // .nut-swiper-slide:nth-child(2), .nut-swiper-slide:nth-child(4){
+        //     color:#333;
+        //     background:#ccc;
+        // }
+       
     }
 
-    #dome4{
-        height:100px;
-    }
+    
 
 </style>

src/packages/swiper/swiper.scss

@@ -63,6 +63,9 @@
             margin:0 3px;
         }
     }
+    img{
+        pointer-events: none;
+    }
 
 
 }