update

src/nutui.js

@@ -35,10 +35,16 @@ const install = function (Vue, opts = {}) {
     if(opts.locale) {
         Vue.config.lang = opts.locale;
     }
+    
     if(opts.lang) locale(Vue.config.lang, opts.lang);
 
     for (let cptName in methods) {
-        Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
+        if (Array.isArray(methods[cptName])){
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
+            Vue.component(methods[cptName][1].name, methods[cptName][1]);
+        }else{
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
+        }
     }
 
     for (let cptName in components) {

src/packages/dialog/_dialog.js

@@ -16,8 +16,9 @@ let Dialog = function (options) {
         inst = Object.assign(instances[options['id']], options);
     } else {
         inst = new DialogConstructor({
-            data: options
+            propsData: options
         });
+
         if (options['id']) {
             instances[options['id']] = inst;
         }

src/packages/dialog/demo.vue

@@ -75,6 +75,17 @@
         </span>
       </nut-cell>
     </div>
+    <h4>高级用法</h4>
+    <p>如果Dialog内容有复杂交互，建议以组件形式来使用Dialog。</p>
+    <div>
+      <nut-cell :isLink="true" :showIcon="true" @click.native="dialogShow=true">
+        <span slot="title">
+          <label>以组件形式调用Dialog</label>
+        </span>
+      </nut-cell>
+    </div>
+    <!-- 以组件形式调用Dialog -->
+    <nut-dialog title="组件形式调用" :visible="dialogShow" @close="dialogShow=false"><a href="javascript:;"  @click="dialogShow=false" :noCancelBtn="true">点我可以直接关闭对话框</a></nut-dialog>
   </div>
 </template>
 
@@ -84,6 +95,11 @@ import { locale as i18n } from "../../locales";
 
 export default {
   mixins: [locale],
+  data(){
+    return {
+      dialogShow:false
+    };
+  },
   methods: {
     showDialog1: function() {
       const options = {

src/packages/dialog/dialog.vue

@@ -8,11 +8,11 @@
         :class="'nut-dialog-mask'"
         :style="{'background':maskBgStyle}"
         @click="modalClick"
-        v-show="visible"
+        v-show="curVisible"
       ></div>
     </transition>
     <transition :name="animation?'nutEase':''">
-      <div class="nut-dialog-box" v-show="visible" @click="modalClick">
+      <div class="nut-dialog-box" v-show="curVisible" @click="modalClick">
         <div class="nut-dialog" @click.stop>
           <a href="javascript:;" v-if="closeBtn" @click="closeBtnClick" class="nut-dialog-close"></a>
           <template v-if="type==='image'">
@@ -23,7 +23,8 @@
           <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-html="content" v-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
@@ -68,34 +69,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:""
+      }
+  },
   data() {
     return {
-      id: null,
-      title: "",
-      content: "",
-      type: "",
-      link: "",
-      imgSrc:"",
-      animation: true,
-      lockBgScroll: false,
-      visible: false,
-      closeBtn: false,
-      closeOnClickModal: true,
-      noFooter: false,
-      noOkBtn: false,
-      noCancelBtn: false,
-      cancelBtnTxt: "",
-      okBtnTxt: "",
-      okBtnDisabled: false,
-      cancelAutoClose: true,
-      textAlign: "center",
-      onOkBtn: null,
-      onCloseBtn: null,
-      onCancelBtn: null,
-      closeCallback: null,
-      onClickImageLink: null,
-      maskBgStyle: "",
-      customClass: ""
+      curVisible: this.visible
     };
   },
   methods: {
@@ -104,21 +170,25 @@ export default {
       this.close("modal");
     },
     close(target) {
-      if (typeof this.closeCallback === "function") {
-        if (this.closeCallback(target) === false) return;
+      this.$emit('close',target);
+      this.$emit('close-callback',target);
+      if (typeof(this.closeCallback) === "function" && this.closeCallback(target) === false) {
+        return;
       }
-      this.visible = false;
+      this.curVisible = false;
     },
     okBtnClick() {
+      this.$emit('ok-btn-click');
       if (typeof this.onOkBtn === "function") {
         this.onOkBtn.call(this);
       }
     },
     cancelBtnClick(autoClose) {
+      this.$emit('ok-btn-click');
       if (typeof this.onCancelBtn === "function") {
         if (this.onCancelBtn.call(this) === false) return;
       }
-      autoClose && this.close();
+      autoClose && this.close("cancelBtn");
     },
     closeBtnClick() {
       if (typeof this.onCloseBtn === "function") {
@@ -133,9 +203,12 @@ export default {
       if (this.link) location.href = this.link;
     }
   },
+  created(){
+  },
   watch: {
     visible: {
       handler(val) {
+        this.curVisible = val;
         if (this.lockBgScroll) {
           if (val) {
             lockMaskScroll.afterOpen();

src/packages/dialog/index.js

@@ -1,8 +1,10 @@
+import DialogVue from './dialog.vue';
 import Dialog from './_dialog';
 import './dialog.scss';
 
 Dialog.install = function(Vue){
     Vue.prototype['$dialog'] = Dialog;
+    Vue.component(DialogVue.name, DialogVue);
 }
 
-export default Dialog;
+export default [Dialog, DialogVue];