Merge branches 'v2' and '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)

docs/international.md

@@ -6,7 +6,7 @@ NutUI 2.0 以上版本支持多语言。组件默认使用中文，支持加载
 
 ### 引用整个组件库
 
-```js
+```javascript
 import Vue from 'vue';
 import NutUI from '@nutui/nutui';
 
@@ -22,7 +22,7 @@ Vue.use(NutUI, {
 
 通过 **[@nutui/babel-plugin-seperate-import](https://www.npmjs.com/package/@nutui/babel-plugin-separate-import)** 插件，我们可以根据项目需要引用 NutUI 的组件，最终只打包引用的组件，减少引入代码的体积。国际化功能同样支持按需引用的方式。
 
-```js
+```javascript
 import Vue from 'vue';
 import {locale} from '@nutui/nutui';
 
@@ -47,7 +47,7 @@ locale('en-US', enUS);
 
 ## 兼容 vue-i18n
 
-```js
+```javascript
 import VueI18n from 'vue-i18n';
 import enUS from '@nutui/nutui/dist/locales/lang/en-US';
 
@@ -73,7 +73,7 @@ const app = new Vue({
 
 使用 **vue-i18n** 时，可以通过调用 **$t** 方法来对某个位置做国际化支持的语言切换。我们也可以调用 NutUI 内置的语言切换方法 **nutTranslate** 来实现相同功能，而且还支持非常灵活的模板化传参方式。我们可以通过 **mixin** 将该语言切换方法混入到每个组件的 **methods**，方便直接调用。
 
-```js
+```javascript
 import Vue from 'vue';
 import {i18n} from '@nutui/nutui';
 
@@ -93,7 +93,7 @@ Vue.mixin({
 
 一般来说，要实现全面的国际化，我们还需要将用户自己的语言包与组件库的语言包进行合并。
 
-```js
+```javascript
 import Vue from 'vue';
 import {locale} from '@nutui/nutui';
 import enUS from '@nutui/nutui/dist/locales/lang/en-US';

docs/intro.md

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

docs/theme.md

@@ -35,7 +35,7 @@ $dark-color: #DADADA;
 
 修改 webpack 配置文件中 **sass-loader** 的配置。在 **options** 的 **data** 属性值中，先后 import 你自定义的 SCSS 文件（如 `custom.scss`）和 NutUI 的样式变量配置文件（路径为 **dist/styles/variable.scss**）。
 
-```js
+```javascript
 {
     test: /\.(sa|sc)ss$/,
     use: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.1",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",
@@ -18,6 +18,7 @@
     "dev": "npm run dev:demo",
     "dev:carefree": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress --config build/webpack.demo.dev.conf.js",
     "build:doc": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.doc.build.conf.js",
+    "build:site": "npm run build:demo && npm run build:doc",
     "build:prod": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.conf.js && node scripts/createIndexScss.js",
     "build:prodmin": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.prod.mini.conf.js",
     "build:disp": "cross-env NODE_ENV=production webpack --hide-modules --progress --config build/webpack.disperse.conf.js",
@@ -45,15 +46,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/polyfill": "7.0.0",
-    "@babel/runtime": "7.1.2",
-    "autoprefixer": "9.1.3",
-    "clipboard": "2.0.1",
-    "highlight.js": "^9.13.1",
-    "path": "^0.12.7",
-    "postcss-loader": "3.0.0",
-    "vue": "2.5.17",
-    "vue-i18n": "8.1.0",
-    "vue-router": "3.0.1"
+    "@babel/runtime": "7.1.2"
   },
   "peerDependencies": {
     "vue": "2.5.17"
@@ -66,7 +59,7 @@
     "@babel/preset-env": "7.1.0",
     "@nutui/carefree": "^0.4.0",
     "@tweenjs/tween.js": "17.2.0",
-    "istanbul-instrumenter-loader": "^3.0.1",
+    "istanbul-instrumenter-loader": "3.0.1",
     "@vue/test-utils": "1.0.0-beta.25",
     "autoprefixer": "9.1.3",
     "babel-eslint": "8.2.6",
@@ -95,7 +88,6 @@
     "has": "1.0.3",
     "html-webpack-plugin": "3.2.0",
     "inquirer": "6.2.0",
-    "istanbul-instrumenter-loader": "^3.0.1",
     "jest": "23.5.0",
     "jest-serializer-vue": "2.0.2",
     "jsdom": "13.0.0",
@@ -131,7 +123,6 @@
     "vue-i18n": "8.1.0",
     "vue-jest": "2.6.0",
     "vue-loader": "15.4.0",
-    "vue-router": "3.0.1",
     "vue-style-loader": "4.1.2",
     "vue-template-compiler": "2.5.17",
     "vueg": "1.3.4",
@@ -140,7 +131,10 @@
     "webpack-cli": "3.1.0",
     "webpack-dev-server": "3.1.11",
     "webpack-merge": "4.1.4",
-    "webpack-node-externals": "1.7.2"
+    "webpack-node-externals": "1.7.2",
+    "clipboard": "2.0.1",
+    "highlight.js": "^9.13.1",
+    "path": "^0.12.7"
   },
   "browserslist": [
     "> 3%",

scripts/mdToVue.js

@@ -1,7 +1,7 @@
 const fs = require('fs');
 var path = require('path');
 let marked = require('marked');
-let package =require("../package.json") ;
+let package = require("../package.json");
 if (!marked) {
     console.log('you need npm i marked -D!');
 }
@@ -40,33 +40,35 @@ let jsroot = `<script>export default {
     }
   },
   mounted(){   
-    let that = this;
-    let pre = document.querySelectorAll('pre');     
-    for(let i=0,item;item = pre[i];i++){      
-      item.classList.toggle('prettyprint');   
-      let creatC = document.createElement('i');
-      creatC.setAttribute('copy','copy');    
-      creatC.setAttribute('data-clipboard-action','copy');
-      creatC.setAttribute('data-clipboard-target','code');
-      creatC.setAttribute('class','copy')
-      let creatA = document.createElement('i');
-      creatA.setAttribute('toast','toast');  
-      item.appendChild(creatC);
-      item.appendChild(creatA);      
-    }   
+    //let that = this;
+    //let pre = document.querySelectorAll('pre');     
+    // for(let i=0,item;item = pre[i];i++){      
+    //   item.classList.toggle('prettyprint');   
+    //   let creatC = document.createElement('i');
+    //   creatC.setAttribute('copy','copy');    
+    //   creatC.setAttribute('data-clipboard-action','copy');
+    //   creatC.setAttribute('data-clipboard-target','code');
+    //   creatC.setAttribute('class','copy')
+    //   let creatA = document.createElement('i');
+    //   creatA.setAttribute('toast','toast');  
+    //   item.appendChild(creatC);
+    //   item.appendChild(creatA);      
+    // }
 
-    let copy = this.copy;
-    new copy('.copy',{
-        target:res => {         
-          return res.previousElementSibling
-        }
-    });    
-    let demourl = 'https://nutui.jd.com/demo.html#'+that.$route.path;
+    this.$nextTick(()=>{
+        let copy = this.copy;
+        new copy('.copy',{
+            target:res => {         
+            return res.previousElementSibling
+            }
+        });    
+        let demourl = 'https://nutui.jd.com/demo.html#'+this.$route.path;
 
-    this.demourl = demourl;
-    this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{
-      that.codeurl = url
-    })
+        this.demourl = demourl;
+        this.qrcode.toDataURL(demourl,{width:170},(err,url)=>{
+            this.codeurl = url
+        });
+    });
   }
 }
 </script>`;
@@ -76,7 +78,7 @@ let jsroot = `<script>export default {
  */
 function insert(sorce) {
     var insert = sorce.indexOf('</h1>');
-    
+
     if (insert > -1) {
         return sorce.substring(0, insert) + '<i class="qrcode"><a :href="demourl"><span>请使用手机扫码体验</span><img :src="codeurl" alt=""></a></i>' + sorce.substring(insert, sorce.length);
     } else {
@@ -91,27 +93,26 @@ function insert(sorce) {
  * @param {string} sorce  文件源
  * @param {boole} ishasCode  是否需要二维码 
  */
-function createdFile(output, sorce,ishasCode) {
+function createdFile(output, sorce, ishasCode) {
     var pathSrc = output;
-    sorce = sorce.replace(/@latest/g,'@'+package.version)
-    if(!ishasCode){       
+
+    if (!ishasCode) {
         var res = insert(sorce);
-    }   else{
-       var  res = sorce;
+    } else {
+        var res = sorce;
     }
     fs.open(pathSrc, "w+", (err, fd) => {
         var bufs = `<template><div  @click="dsCode">
         <div v-if="content" class="layer">
-          <span class="close-box" @click="closelayer"></span>
-          <div v-html="content"></div>
+          <pre><span class="close-box" @click="closelayer"></span><div v-html="content"></div></pre>
         </div>`+ res + '</div></template>' + jsroot;
         var buf = new Buffer(bufs);
-        if( typeof fd  == 'number'){
+        if (typeof fd == 'number') {
             fs.writeSync(fd, buf, 0, buf.length, 0);
-         }else{
-             console.log(pathSrc,' typeof fd ！= number 请改正文件')
-         }
-       
+        } else {
+            console.log(pathSrc, ' typeof fd ！= number 请改正文件')
+        }
+
     })
 }
 /**
@@ -120,8 +121,37 @@ function createdFile(output, sorce,ishasCode) {
  * @param {*} outPath 输出路径
  * @param {*} nohead 是否有头文件
  */
-function fileDisplay(filePath,outPath,nohead) {
+function fileDisplay(filePath, outPath, nohead) {
     var rendererMd = new marked.Renderer();
+
+    rendererMd.code = function (code, infostring, escaped) {
+        var lang = (infostring || '').match(/\S*/)[0];
+        if (this.options.highlight) {
+            var out = this.options.highlight(code, lang);
+            if (out != null && out !== code) {
+                escaped = true;
+                code = out;
+            }
+        }
+
+        if (!lang) {
+            return '<pre><code>'
+                + (escaped ? code : escape(code, true))
+                + '</code></pre>';
+        }
+
+        if (lang === 'html') {
+            code = code.replace(/@latest/g, '@' + package.version)
+        }
+
+        return '<pre class="prettyprint"><span class="lang">' + lang + '</span><code class="'
+            + this.options.langPrefix
+            + escape(lang, true)
+            + '">'
+            + (escaped ? code : escape(code, true))
+            + '</code><i class="copy" copy="copy" data-clipboard-action="copy" data-clipboard-target="code" title="复制代码"></i><i toast="toast" title="全屏"></i></pre>\n';
+    };
+
     marked.setOptions({
         renderer: rendererMd,
         highlight: function (code) {
@@ -140,7 +170,7 @@ function fileDisplay(filePath,outPath,nohead) {
                 fs.stat(filedir, (err, stats) => {
                     if (!err) {
                         if (stats.isDirectory()) {
-                            fileDisplay(filedir,outPath,nohead)
+                            fileDisplay(filedir, outPath, nohead)
                         } else {
                             //判断文件类型是否是md文件
                             if (/.md$/.test(filedir)) {
@@ -159,13 +189,13 @@ function fileDisplay(filePath,outPath,nohead) {
                                     }
                                     let newName = fileNames.reverse().join('').split('-');
                                     let resName = '';
-                                    if(newName.indexOf('doc')>-1){
+                                    if (newName.indexOf('doc') > -1) {
                                         resName = newName[newName.length - 2]
-                                    }else{
+                                    } else {
                                         resName = newName[newName.length - 1]
                                     }
-                                    
-                                    createdFile(outPath + '/' + resName + '.vue', html,nohead)
+
+                                    createdFile(outPath + '/' + resName + '.vue', html, nohead)
                                 });
                                 //文件监听
                                 let fsWatcher = fs.watchFile(filedir, {
@@ -177,7 +207,7 @@ function fileDisplay(filePath,outPath,nohead) {
                                         let html = marked(data);
                                         let filedirarry = filedir.split('/');
                                         let fileNames = filedirarry[filedirarry.length - 2];
-                                        createdFile(outPath + '/' + fileNames + '.vue', html,nohead)
+                                        createdFile(outPath + '/' + fileNames + '.vue', html, nohead)
                                     });
                                 });
                             }
@@ -190,9 +220,9 @@ function fileDisplay(filePath,outPath,nohead) {
 }
 //md转 其他格式类型
 function MdToHtml(commomOption) {
-   // commomOption = options;
+    // commomOption = options;
     //获取所有的md 转html的结果
-    fileDisplay(commomOption.entry,commomOption.output,commomOption.nohead);
+    fileDisplay(commomOption.entry, commomOption.output, commomOption.nohead);
 }
 MdToHtml.prototype.apply = function (compiler) {
     //  console.log(compiler,'lls')

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,71 +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;
     }
   }
-}
+};
 </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>

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.vue

@@ -23,7 +23,7 @@
                 <a :href="routerName">
                   <span>请使用手机扫码体验</span>
                   <img
-                    src="https://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png"
+                    src="https://img14.360buyimg.com/uba/jfs/t1/32118/11/559/2782/5c3d81ecEbda0c0f1/5f2b637d11817204.png"
                     alt
                   >
                 </a>

sites/doc/asset/css/common.scss

@@ -136,7 +136,12 @@ pre {
     position: relative;
     max-width: 100%;
     overflow: auto;
-    &>i {
+    .code-wrapper{
+        width:100%;
+        overflow:auto;
+    }
+    [toast="toast"],
+    [copy="copy"] {
         cursor: pointer;
         position: absolute;
         top: 10px;
@@ -173,10 +178,21 @@ pre {
     }
 } // 代码显示
 pre {
+    position: relative;
     background: #F2F4F5;
     border-radius: 4px;
     border: none;
     padding: 20px;
+    &>span {
+        position: absolute;
+        right: 5px;
+        bottom: 5px;
+        font-style: italic;
+        font-size: 12px;
+        color: #999;
+        text-shadow: 1px 1px #FFF;
+        user-select: none;
+    }
 }
 
 .kwd {
@@ -219,15 +235,17 @@ pre {
         color: #fff;
         font-size: 24px;
         position: absolute;
-        top: 25px;
+        top: 10px;
         right: 14px;
         z-index: 30;
-        width: 28px;
-        height: 28px;
+        width: 16px;
+        height: 16px;
         background: url(../css/i/close.png) no-repeat center;
+        background-size: cover;
         cursor: pointer;
         &:hover {
-            background: #D5E5FF url(../css/i/close.png) no-repeat center;
+            background-color: #D5E5FF;
+            background-image: url(../css/i/close.png);
         }
     }
     [toast="toast"] {
@@ -235,12 +253,12 @@ pre {
     }
     pre {
         background: none;
-        padding: 50px 100px 30px 30px;
+        padding: 0 30px;
         max-width: 100%;
         max-height: 800px;
         overflow: auto;
-        [copy="copy"] {
-            right: 47px;
+        &>i,.lang {
+            display: none;
         }
     } // .kwd{
     //     color:#ffb560;;
@@ -270,6 +288,6 @@ pre {
 
 pre.prettyprint {
     code {
-        font: 14px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+        font: 13px/24px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
     }
 }

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

@@ -9,6 +9,7 @@
     }
     p {
         font-size: 14px;
+        line-height: 1.8;
         margin: 10px 0;
     }
     h1+p,
@@ -122,9 +123,10 @@
             background: #F7F7F7;
             border: 1px solid #ECECEC;
             border-radius: 2px;
-            font-size: 12px;
+            font-size: 13px;
+            line-height: 1;
             color: #3F536E;
-            padding: 5px 5px;
+            padding: 3px 5px;
             margin: 0 5px;
         }
     }

sites/doc/index.vue

@@ -43,7 +43,7 @@
                 <a>
                   <span>请使用手机扫码体验</span>
                   <img
-                    src="http://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png"
+                    src="https://img14.360buyimg.com/uba/jfs/t1/32118/11/559/2782/5c3d81ecEbda0c0f1/5f2b637d11817204.png"
                     alt
                   >
                 </a>
@@ -72,7 +72,7 @@
           <a>
             <span>请使用手机扫码体验</span>
             <img
-              src="http://img13.360buyimg.com/uba/jfs/t1/14144/37/3433/5890/5c26d976E7cd98b80/94583409233081cc.png"
+              src="https://img14.360buyimg.com/uba/jfs/t1/32118/11/559/2782/5c3d81ecEbda0c0f1/5f2b637d11817204.png"
               alt
             >
           </a>

src/packages/badge/badge.scss

@@ -4,9 +4,11 @@
     sup {
       position: absolute;
       height: 18px;
+      min-width: 8px;
       line-height: 18px;
       padding: 0 5px;
       background-color: #fff;
+      text-align: center;
       border: 1px solid $primary-color;
       color: $primary-color;
       font-size: 10px;

src/packages/badge/badge.vue

@@ -36,13 +36,18 @@ export default {
     right: {
       type: String,
       default: '0'
+    },
+    zIndex: {
+      type: Number,
+      default: 10
     }
   },
   data() {
     return {
       stl: {
         top: this.top,
-        right: this.right
+        right: this.right,
+        zIndex: this.zIndex
       }
     }
   },

src/packages/badge/demo.vue

@@ -24,7 +24,7 @@
       <h4>小圆点</h4>
       <div class="demo-w">
         <nut-badge :isDot="true" class="item"><div class="demo-svg"></div></nut-badge>
-        <nut-badge :isDot="true" class="item">文字内容</nut-badge>
+        <nut-badge :isDot="true" class="item">购物车</nut-badge>
         <nut-badge :isDot="true" :max="99" class="item"><nut-button>购物车</nut-button></nut-badge>
       </div>
 

src/packages/badge/doc.md

@@ -136,6 +136,7 @@
 |----- | ----- | ----- | ----- 
 | value | 显示的内容 | String | -
 | max | value为数值时，最大值 | Number | 10000
+| zIndex | 徽标的z-index值 | Number | 10
 | isDot | 是否为小点 | Boolean | false
 | hidden | 是否隐藏 | Boolean | false
 | top   | 上下偏移量，支持单位设置，可设置为：5px、5rem等 | String | 0

src/packages/dialog/_dialog.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
+import settings from './dialog.vue';
 
-let DialogConstructor = Vue.extend(require('./dialog.vue').default);
+let DialogConstructor = Vue.extend(settings);
 
 let instances = {};
 

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 {
@@ -115,7 +114,7 @@ body.dialog-open {
     padding: 30px 20px 20px;
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex: 0 1 auto;
 }
 
 .nut-dialog-content {
@@ -142,15 +141,18 @@ body.dialog-open {
 .nut-dialog-btn {
     display: block;
     width: 100%;
-    height:100%;
+    height: 100%;
+    position: relative;
     flex: 1;
     font-size: $font-size-base;
-    border: none;
+    border:none;
     background: transparent;
     appearance: none;
     outline: none;
+    user-select: none;
     &.disabled {
         background: $btn-disable-bg;
+        background-origin: border-box;
         color: $btn-disable-color;
     }
     &:only-child {
@@ -159,20 +161,19 @@ body.dialog-open {
         color: $primary-color;
         border-top: 1px solid $light-color;
     }
-    &:active{
-        opacity: .7;
-    }
 }
 
 .nut-dialog-ok {
     border-radius: 0 0 5px 0;
     background: $btn-gradient-bg;
+    background-origin: border-box;
     color: $btn-gradient-color;
 }
 
 .nut-dialog-cancel {
     border-radius: 0 0 0 5px;
     border-top: 1px solid $light-color;
+    background: #FFF;
 }
 
 // .fade-enter-active {

src/packages/dialog/doc.md

@@ -36,9 +36,21 @@ this.$dialog({
         
 ```
 
+## 页面滚动锁定
+
+**lockBgScroll** 值设为 **true** 时，可在弹窗出现时锁定页面滚动，且不影响窗体内部滚动。
+
+```javascript
+this.$dialog({
+        title: "背景滚动锁定",
+        lockBgScroll:true,
+        content:"弹窗弹出后，页面滚动锁止。在窗体和遮罩层上滑动时，页面不再跟随滚动。"
+});
+```
+
 ## 图片弹窗
 
-**type**值为 **image** 时为图片弹窗，需要配置一张图片，可带链接（非必须）。默认展示关闭按钮。点击图片触发 **onClickImageLink** 事件，返回**false**可阻止默认的跳转链接行为。
+**type** 值为 **image** 时为图片弹窗，需要配置一张图片，可带链接（非必须）。默认展示关闭按钮。点击图片触发 **onClickImageLink** 事件，返回**false**可阻止默认的跳转链接行为。
 
 ```javascript
 this.$dialog({

src/packages/picker/picker-slot.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="nut-picker-list pd-select-item">
+  <div class="nut-picker-list">
     <div class="nut-picker-mask"></div>
     <div class="nut-picker-indicator"></div>
     <div class="nut-picker-content">
@@ -153,7 +153,6 @@ export default {
     mounted() {
         this.$nextTick(() => {
             this.modifyStatus(true);
-            
             // 监听
             this.$el.addEventListener('touchstart', this.touchStart);
             this.$el.addEventListener('touchmove', this.touchMove);

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

@@ -112,7 +112,7 @@
                 this.$refs.demo1.updateEvent(1);
                 this.$refs.demo2.updateEvent();
                 this.$refs.demo3.updateEvent();
-                 this.$refs.demo5.updateEvent();
+                this.$refs.demo5.updateEvent();
 
 
                 this.$refs.demo4.updateEvent();