update

docs/intro.md

@@ -38,11 +38,11 @@ NutUI是一套京东风格的移动端Vue组件库，开发和服务于移动Web
 
 ## 构建版本
 
-* UMD版 nutui.js
-* UMD压缩版 nutui.min.js
-* CommonJS版 nutui.common.js
+* UMD版 **nutui.js**
+* UMD压缩版 **nutui.min.js**
+* CommonJS版 **nutui.common.js**
 
-> AMD 环境、Webpack 等构建工具环境建议使用 UMD 版，非模块化环境（通过 `<script>` 标签直接引用）建议使用 UMD 压缩版，服务端渲染请使用 CommonJS 版本。
+> AMD 环境、Webpack 等构建工具环境建议使用 UMD 版，非模块化环境（如通过 `<script>` 标签直接引用）建议使用 UMD 压缩版，服务端渲染请使用 CommonJS 版本。
 
 最新稳定版：![npm](https://img.shields.io/npm/v/@nutui/nutui.svg)
 

docs/start.md

@@ -127,6 +127,16 @@ import { Dialog,Picker } from '@nutui/nutui';
 Dialog.install(Vue);
 Picker.install(Vue);
 ```
+如果需要按需加载 scss 文件（如需要自定义主题）时，除了需要把 style 选项值设为为 **scss** 外，还需要修改 webpack 配置文件的 sass-loader 配置，如下所示：
+
+```
+{
+    loader: 'sass-loader',
+    options: {
+        data: `@import "@nutui/nutui/dist/styles/index.scss"; `
+    }
+}
+```
 
 ### 2. 手动引入
 

docs/theme.md

@@ -42,7 +42,7 @@ $dark-color: #DADADA;
         {
             loader: 'sass-loader',
             options: {
-                data: `@import "./asset/css/custom.scss"; @import "@nutui/nutui/styles/variable.scss"; `,
+                data: `@import "./asset/css/custom.scss"; @import "@nutui/nutui/dist/styles/index.scss"; `,
             }
         }
     ]

sites/doc/app.vue

@@ -229,7 +229,7 @@ export default {
   background: #fff;
   min-height: 100vh;
   min-width: 1000px;
-  padding: 115px 0 200px 0;
+  padding: 85px 0 200px 0;
   box-sizing: border-box;
   display: flex;
 }
@@ -444,7 +444,7 @@ export default {
     }
   }
   .fl-right{
-    margin-left: 310px;
+    margin-left: 320px;
   }
 }
 .foot {

src/packages/dialog/_dialog.js

@@ -3,26 +3,24 @@ import settings from './dialog.vue';
 
 let DialogConstructor = Vue.extend(settings);
 
-let instances = {};
-
 let inst;
 
 let Dialog = function (options) {
+    options.id = options.id || 'nut-dialog-default-id';
     if (options.type === 'image' && typeof (options.closeBtn) === 'undefined'){
         options.closeBtn = true;
     }
 
-    if (options['id'] && instances[options['id']]) {
-        inst = Object.assign(instances[options['id']], options);
-    } else {
-        inst = new DialogConstructor({
-            propsData: options
-        });
-
-        if (options['id']) {
-            instances[options['id']] = inst;
-        }
-        inst.vm = inst.$mount();
+    inst = new DialogConstructor({
+        propsData: options
+    });
+
+    inst.vm = inst.$mount();
+
+    let dialogDom = document.querySelector('#'+options.id);
+    if (options.id && dialogDom){
+        dialogDom.parentNode.replaceChild(inst.$el, dialogDom);
+    }else{
         document.body.appendChild(inst.$el);
     }
 

src/packages/dialog/dialog.vue

@@ -23,8 +23,15 @@
           <template v-else>
             <div class="nut-dialog-body">
               <span class="nut-dialog-title" v-html="title" v-if="title"></span>
-              <div class="nut-dialog-content" v-if="$slots.default" :style="{textAlign}"><slot></slot></div>
-              <div class="nut-dialog-content" v-html="content" v-else-if="content" :style="{textAlign}"></div>
+              <div class="nut-dialog-content" v-if="$slots.default" :style="{textAlign}">
+                <slot></slot>
+              </div>
+              <div
+                class="nut-dialog-content"
+                v-html="content"
+                v-else-if="content"
+                :style="{textAlign}"
+              ></div>
             </div>
             <div class="nut-dialog-footer" v-if="!noFooter">
               <button
@@ -53,7 +60,8 @@ const lockMaskScroll = (bodyCls => {
   let scrollTop;
   return {
     afterOpen: function() {
-      scrollTop = document.scrollingElement.scrollTop || document.body.scrollTop;
+      scrollTop =
+        document.scrollingElement.scrollTop || document.body.scrollTop;
       document.body.classList.add(bodyCls);
       document.body.style.top = -scrollTop + "px";
     },
@@ -69,99 +77,99 @@ const lockMaskScroll = (bodyCls => {
 export default {
   name: "nut-dialog",
   mixins: [locale],
-  props:{
-      id: {
-        default:null
-      },
-      title: {
-        default:""
-      },
-      content: {
-        default:""
-      },
-      type: {
-        default:""
-      },
-      link: {
-        default:""
-      },
-      imgSrc:{
-        default:""
-      },
-      animation: {
-        type:Boolean,
-        default:true
-      },
-      lockBgScroll: {
-        type:Boolean,
-        default:false
-      },
-      visible: {
-        type:Boolean,
-        default:false
-      },
-      closeBtn: {
-        type:Boolean,
-        default:false
-      },
-      closeOnClickModal: {
-        type:Boolean,
-        default:true
-      },
-      noFooter: {
-        type:Boolean,
-        default:false
-      },
-      noOkBtn: {
-        type:Boolean,
-        default:false
-      },
-      noCancelBtn: {
-        type:Boolean,
-        default:false
-      },
-      cancelBtnTxt: {
-        default:""
-      },
-      okBtnTxt: {
-        default:""
-      },
-      okBtnDisabled: {
-        type:Boolean,
-        default:false
-      },
-      cancelAutoClose: {
-        type:Boolean,
-        default:true
-      },
-      textAlign: {
-        default:"center"
-      },
-      onOkBtn: {
-        default:null
-      },
-      onCloseBtn: {
-        default:null
-      },
-      onCancelBtn: {
-        default:null
-      },
-      closeCallback: {
-        default:null
-      },
-      onClickImageLink: {
-        default:null
-      },
-      maskBgStyle: {
-        default:""
-      },
-      customClass: {
-        default:""
-      }
+  props: {
+    id: {
+      default: null
+    },
+    title: {
+      default: ""
+    },
+    content: {
+      default: ""
+    },
+    type: {
+      default: ""
+    },
+    link: {
+      default: ""
+    },
+    imgSrc: {
+      default: ""
+    },
+    animation: {
+      type: Boolean,
+      default: true
+    },
+    lockBgScroll: {
+      type: Boolean,
+      default: false
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    closeBtn: {
+      type: Boolean,
+      default: false
+    },
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+    noFooter: {
+      type: Boolean,
+      default: false
+    },
+    noOkBtn: {
+      type: Boolean,
+      default: false
+    },
+    noCancelBtn: {
+      type: Boolean,
+      default: false
+    },
+    cancelBtnTxt: {
+      default: ""
+    },
+    okBtnTxt: {
+      default: ""
+    },
+    okBtnDisabled: {
+      type: Boolean,
+      default: false
+    },
+    cancelAutoClose: {
+      type: Boolean,
+      default: true
+    },
+    textAlign: {
+      default: "center"
+    },
+    onOkBtn: {
+      default: null
+    },
+    onCloseBtn: {
+      default: null
+    },
+    onCancelBtn: {
+      default: null
+    },
+    closeCallback: {
+      default: null
+    },
+    onClickImageLink: {
+      default: null
+    },
+    maskBgStyle: {
+      default: ""
+    },
+    customClass: {
+      default: ""
+    }
   },
   data() {
     return {
-      curVisible: this.visible
+      curVisible: false
     };
   },
   methods: {
@@ -170,21 +178,24 @@ export default {
       this.close("modal");
     },
     close(target) {
-      this.$emit('close',target);
-      this.$emit('close-callback',target);
-      if (typeof(this.closeCallback) === "function" && this.closeCallback(target) === false) {
+      this.$emit("close", target);
+      this.$emit("close-callback", target);
+      if (
+        typeof this.closeCallback === "function" &&
+        this.closeCallback(target) === false
+      ) {
         return;
       }
       this.curVisible = false;
     },
     okBtnClick() {
-      this.$emit('ok-btn-click');
+      this.$emit("ok-btn-click");
       if (typeof this.onOkBtn === "function") {
         this.onOkBtn.call(this);
       }
     },
     cancelBtnClick(autoClose) {
-      this.$emit('ok-btn-click');
+      this.$emit("ok-btn-click");
       if (typeof this.onCancelBtn === "function") {
         if (this.onCancelBtn.call(this) === false) return;
       }
@@ -203,21 +214,20 @@ export default {
       if (this.link) location.href = this.link;
     }
   },
-  created(){
+  created() {
   },
   watch: {
     visible: {
       handler(val) {
         this.curVisible = val;
-        if (this.lockBgScroll) {
-          if (val) {
-            lockMaskScroll.afterOpen();
-          } else {
-            lockMaskScroll.beforeClose();
-          }
-        }
       },
       immediate: true
+    },
+    curVisible(val) {
+        if (this.lockBgScroll) {
+          //锁定or解锁页面滚动
+          lockMaskScroll[val?'afterOpen':'beforeClose']();
+        }
     }
   }
 };

src/packages/dialog/doc.md

@@ -11,6 +11,18 @@ this.$dialog({
 });
 ```
 
+## ID
+
+同一个页面中，id相同的Dialog的DOM只会同时存在一个，如果希望同时弹出多个Dialog，请给不同的Dialog设置不同的id。不指定id时，id的默认值为**nut-dialog-default-id**。
+
+```javascript
+this.$dialog({
+  id:'my-dialog',
+  title: "确定删除此订单？",
+  content: "删除后将从你的记录里消失，无法找回"
+});
+```
+
 ## 事件
 ```javascript
 this.$dialog({
@@ -64,16 +76,24 @@ this.$dialog({
 });
 ```
 
-## 共享实例
+## 标签式写法
 
-如果给Dialog设置**id**(推荐)，则该Dialog再次弹出时依旧使用该实例，不再新建实例。如果多个Dialog的**id**相同，则共享一个实例。
+如果Dialog内容有复杂交互，可使用Dialog的标签式用法。
+
+```html
+<nut-dialog title="标签形式调用" :visible="dialogShow" @close="dialogShow=false">
+    <a href="javascript:;" @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a>
+</nut-dialog>
+```
 
 ```javascript
-this.$dialog({
-  id:"myDialog",
-  title: "我的ID是myDialog",
-  content: "只会新建一个实例"
-});
+export default {
+  data() {
+    return {
+      dialogShow: false
+    };
+  }
+}
 ```
 
 ## API