chore: update dialog demo

examples/dialog/demos/async.vue

@@ -8,13 +8,11 @@
       :confirmBtn="{
         content: '保存中...',
         theme: 'primary',
-        loading: true
+        loading: true,
       }"
       :onConfirm="onConfirm"
       :onClose="close"
-    >
-    </t-dialog>
-
+    />
   </div>
 </template>
 <script>
@@ -33,6 +31,5 @@ export default {
       this.visible = false;
     },
   },
-
 };
 </script>

examples/dialog/demos/attach.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="dialog-attach-wrap">
     <!-- attach挂载 -->
-    <t-button theme="primary" @click="visibleBody = true">挂载在body</t-button>
-    <t-button theme="primary" @click="visibleIdAttach = true">挂载特定元素</t-button>
-    <t-button theme="primary" @click="visibleFunctionAttach = true">挂载函数返回节点</t-button>
-    <t-button theme="primary" @click="visibleShowInAttachedElement = true">展示在挂载元素区域</t-button>
-
+    <t-space break-line>
+      <t-button theme="primary" @click="visibleBody = true">挂载在body</t-button>
+      <t-button theme="primary" @click="visibleIdAttach = true">挂载特定元素</t-button>
+      <t-button theme="primary" @click="visibleFunctionAttach = true">挂载函数返回节点</t-button>
+      <t-button theme="primary" @click="visibleShowInAttachedElement = true">展示在挂载元素区域</t-button>
+    </t-space>
     <t-dialog
       :visible.sync="visibleBody"
       attach="body"
@@ -79,9 +80,6 @@ export default Vue.extend({
 });
 </script>
 <style scoped>
-.t-button {
-  margin-right: 20px;
-}
 .dialog-attach-wrap {
   position: relative;
   height: 300px;

examples/dialog/demos/base.vue

@@ -20,7 +20,7 @@
     >
       <t-button theme="primary" @click="visible1 = true">弹窗二</t-button>
     </t-dialog>
-    <t-dialog header="对话框标题二" body="对话框内容二" :visible.sync="visible1"> </t-dialog>
+    <t-dialog header="对话框标题二" body="对话框内容二" :visible.sync="visible1" />
   </div>
 </template>
 <script>

examples/dialog/demos/custom.vue

@@ -3,10 +3,11 @@
     <p>弹窗内容自定义</p>
     <br />
     <div>
-      <t-button theme="primary" @click="bodyVisible1 = true">隐藏标题</t-button>
-      <t-button theme="primary" @click="bodyVisible2 = true">渲染函数定义内容</t-button>
-      <t-button theme="primary" @click="bodyVisible3 = true">插槽方式定义内容</t-button>
-
+      <t-space break-line>
+        <t-button theme="primary" @click="bodyVisible1 = true">隐藏标题</t-button>
+        <t-button theme="primary" @click="bodyVisible2 = true">渲染函数定义内容</t-button>
+        <t-button theme="primary" @click="bodyVisible3 = true">插槽方式定义内容</t-button>
+      </t-space>
       <!-- :onClose="onClose" 和 @close="onClose" 等效 -->
       <!-- :onConfirm="onConfirm" 和 @confirm="onConfirm" 等效 -->
       <t-dialog
@@ -15,7 +16,7 @@
         :visible="bodyVisible1"
         :onClose="bodyClose1"
         :onConfirm="bodyClose1"
-      ></t-dialog>
+      />
 
       <t-dialog
         :visible="bodyVisible2"
@@ -42,11 +43,12 @@
       来自定义控制
     </p>
     <br />
-    <t-button theme="primary" @click="visible1 = true">按钮文字</t-button>
-    <t-button theme="primary" @click="visible2 = true">按钮属性</t-button>
-    <t-button theme="primary" @click="visible3 = true">渲染函数按钮</t-button>
-    <t-button theme="primary" @click="visible4 = true">隐藏底部</t-button>
-
+    <t-space break-line>
+      <t-button theme="primary" @click="visible1 = true">按钮文字</t-button>
+      <t-button theme="primary" @click="visible2 = true">按钮属性</t-button>
+      <t-button theme="primary" @click="visible3 = true">渲染函数按钮</t-button>
+      <t-button theme="primary" @click="visible4 = true">隐藏底部</t-button>
+    </t-space>
     <t-dialog
       :visible.sync="visible1"
       header="提示"
@@ -55,8 +57,7 @@
       cancelBtn="关闭"
       :onConfirm="onConfirm"
       :onClose="close1"
-    >
-    </t-dialog>
+    />
 
     <!-- 透传 ButtonProps，以自定义按钮样式 -->
     <t-dialog
@@ -73,7 +74,7 @@
         variant: 'outline',
       }"
       :onClose="close2"
-    ></t-dialog>
+    />
 
     <!-- cancelBtn 和 confirmBtn 值为 null 时，隐藏按钮 -->
     <!-- confirmBtn 可以作为渲染函数输出按钮 -->
@@ -84,7 +85,7 @@
       :confirmBtn="getConfirmBtn"
       :cancelBtn="null"
       :onClose="close3"
-    ></t-dialog>
+    />
 
     <t-dialog
       :visible="visible4"
@@ -93,7 +94,7 @@
       :footer="false"
       :onClose="close4"
       :onConfirm="close4"
-    ></t-dialog>
+    />
   </div>
 </template>
 <script lang="jsx">
@@ -164,8 +165,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

examples/dialog/demos/custom/body.vue

@@ -1,11 +1,12 @@
 <template>
   <div>
-    <t-button theme="primary" @click="visible1 = true">隐藏标题</t-button>
-    <t-button theme="primary" @click="visible2 = true">隐藏底部</t-button>
-    <t-button theme="primary" @click="visible3 = true">渲染函数定义内容</t-button>
-    <t-button theme="primary" @click="visible4 = true">插槽方式定义内容</t-button>
-
-    <t-dialog :header="false" body="对话框内容" :visible="visible1" :onClose="close1" :onConfirm="close1" >
+    <t-space break-line>
+      <t-button theme="primary" @click="visible1 = true">隐藏标题</t-button>
+      <t-button theme="primary" @click="visible2 = true">隐藏底部</t-button>
+      <t-button theme="primary" @click="visible3 = true">渲染函数定义内容</t-button>
+      <t-button theme="primary" @click="visible4 = true">插槽方式定义内容</t-button>
+    </t-space>
+    <t-dialog :header="false" body="对话框内容" :visible="visible1" :onClose="close1" :onConfirm="close1">
       <div slot="body">
         <div>不需要标题的内容</div>
         <div>我是内容</div>
@@ -15,13 +16,7 @@
       </div>
     </t-dialog>
 
-    <t-dialog
-      :visible="visible2"
-      header="提示"
-      body="对话框内容"
-      :footer="false"
-      :onClose="close2" :onConfirm="close2"
-    >
+    <t-dialog :visible="visible2" header="提示" body="对话框内容" :footer="false" :onClose="close2" :onConfirm="close2">
       <div slot="body">
         <div>不需要底部按钮的内容</div>
         <div>我是内容</div>
@@ -31,16 +26,11 @@
       </div>
     </t-dialog>
 
-    <t-dialog
-      :visible="visible3"
-      header="对话框标题"
-      :body="renderDialog3Body"
-      :onClose="close3" :onConfirm="close3"
-    >
+    <t-dialog :visible="visible3" header="对话框标题" :body="renderDialog3Body" :onClose="close3" :onConfirm="close3">
       <div slot="body">被渲染函数覆盖的插槽内容</div>
     </t-dialog>
 
-    <t-dialog header="对话框标题" :visible="visible4" :onClose="close4" :onConfirm="close4" >
+    <t-dialog header="对话框标题" :visible="visible4" :onClose="close4" :onConfirm="close4">
       <div slot="body">
         <div>我是内容</div>
         <div>我是内容</div>
@@ -84,8 +74,3 @@ export default Vue.extend({
   },
 });
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

examples/dialog/demos/custom/bottom.vue

@@ -2,19 +2,18 @@
   <div>
     <p>底部按钮有两个控制属性：confirmBtn 和 cancelBtn。属性类型有多种：string/function/object/boolean。</p>
     <br />
-    <t-button theme="primary" @click="visible1 = true">自定义底部按钮（文字）</t-button>
-    <t-button theme="primary" @click="visible2 = true">自定义底部按钮（任何按钮属性）</t-button>
-    <t-button theme="primary" @click="visible3 = true">自定义底部按钮（自定义组件）</t-button>
-
+    <t-space break-line>
+      <t-button theme="primary" @click="visible1 = true">自定义底部按钮（文字）</t-button>
+      <t-button theme="primary" @click="visible2 = true">自定义底部按钮（任何按钮属性）</t-button>
+      <t-button theme="primary" @click="visible3 = true">自定义底部按钮（自定义组件）</t-button>
+    </t-space>
     <t-dialog
       :visible="visible1"
       header="提示"
       body="自定义底部按钮，直接传入文字"
       confirmBtn="前往支付"
       cancelBtn="关闭"
-    >
-    </t-dialog>
-
+    />
     <t-dialog
       :visible="visible2"
       header="提示"
@@ -28,17 +27,14 @@
         content: '我知道了',
         variant: 'outline',
       }"
-    >
-    </t-dialog>
-
+    />
     <t-dialog
       :visible="visible3"
       header="提示"
       body="自定义底部按钮，传入自定义组件"
       :confirmBtn="getConfirmBtn"
       :cancelBtn="false"
-    >
-    </t-dialog>
+    />
   </div>
 </template>
 <script>
@@ -61,8 +57,3 @@ export default {
   },
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

examples/dialog/demos/drag.vue

@@ -1,16 +1,18 @@
 <template>
   <div>
-    <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框-可拖拽</t-button>
-    <t-button theme="primary" @click="visibleModeless = true">非模态对话框-不可拖拽</t-button>
-    <t-button theme="primary" @click="visibleModal = true">模态对话框-不支持拖拽</t-button>
-    <br>
+    <t-space break-line>
+      <t-button theme="primary" @click="visibleModelessDrag = true">非模态对话框-可拖拽</t-button>
+      <t-button theme="primary" @click="visibleModeless = true">非模态对话框-不可拖拽</t-button>
+      <t-button theme="primary" @click="visibleModal = true">模态对话框-不支持拖拽</t-button>
+    </t-space>
+    <br />
 
     <t-dialog
       header="模态对话框"
       :visible.sync="visibleModal"
       mode="modal"
       draggable
-      :onConfirm="()=>this.visibleModal = false"
+      :onConfirm="() => (this.visibleModal = false)"
     >
       <div slot="body">
         <div>默认点击蒙层或按ESC可关闭</div>
@@ -23,7 +25,7 @@
       :visible.sync="visibleModelessDrag"
       mode="modeless"
       draggable
-      :onConfirm="()=>this.visibleModelessDrag = false"
+      :onConfirm="() => (this.visibleModelessDrag = false)"
     >
       <div slot="body">
         <div>对话框内容</div>
@@ -34,13 +36,12 @@
       header="非模态对话框-不可拖拽"
       :visible.sync="visibleModeless"
       mode="modeless"
-      :onConfirm="()=>this.visibleModeless = false"
+      :onConfirm="() => (this.visibleModeless = false)"
     >
       <div slot="body">
         <div>对话框内容</div>
       </div>
     </t-dialog>
-
   </div>
 </template>
 <script>
@@ -58,12 +59,6 @@ export default Vue.extend({
     getAttach() {
       return this.$root.$el;
     },
-
   },
 });
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>

examples/dialog/demos/icon.vue

@@ -8,7 +8,7 @@
       theme="info"
       :onConfirm="close1"
     />
-    <br>
+    <br />
     <t-dialog
       :visible.sync="visible2"
       header="温馨提示"
@@ -17,7 +17,7 @@
       theme="warning"
       :onConfirm="close2"
     />
-    <br>
+    <br />
     <t-dialog
       :visible.sync="visible3"
       header="推送失败"
@@ -26,7 +26,7 @@
       theme="danger"
       :onConfirm="close3"
     />
-    <br>
+    <br />
     <t-dialog
       :visible.sync="visible4"
       header="操作成功"
@@ -35,7 +35,8 @@
       theme="success"
       :onConfirm="close4"
     />
-    <br>
+    <br />
+
     <t-button v-if="!visible1" theme="primary" @click="visible1 = true">theme: info</t-button>
     <t-button v-if="!visible2" theme="primary" @click="visible2 = true">theme: warning</t-button>
     <t-button v-if="!visible3" theme="primary" @click="visible3 = true">theme: danger</t-button>
@@ -46,7 +47,7 @@
 export default {
   data() {
     return {
-      visible1: true,
+      visible1: false,
       visible2: true,
       visible3: true,
       visible4: true,
@@ -65,12 +66,6 @@ export default {
     close4() {
       this.visible4 = false;
     },
-
   },
 };
 </script>
-<style scoped>
-.t-button {
-  margin-right: 20px;
-}
-</style>