feat(dialog): add props footer-direction

src/packages/__VUE/dialog/demo.vue

@@ -4,8 +4,9 @@
       <nut-cell title="基础弹框" @click="baseClick"></nut-cell>
       <nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
       <nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
+      <nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
     </nut-cell-group>
-    <nut-cell-group title="标签式调用">
+    <nut-cell-group title="标签式使用">
       <nut-cell title="组件调用" @click="componentClick"></nut-cell>
       <nut-dialog
         teleport="#app"
@@ -14,14 +15,20 @@
         v-model:visible="visible"
       >
       </nut-dialog>
+      <nut-cell title="底部按钮 垂直使用" @click="componentvVrticalClick"></nut-cell>
+      <nut-dialog
+        footer-direction="vertical"
+        teleport="#app"
+        title="组件调用"
+        content="如果需要在弹窗内嵌入组件或其他自定义内容，可以使用组件调用的方式。"
+        v-model:visible="visible1"
+      >
+      </nut-dialog>
     </nut-cell-group>
     <nut-cell-group title="teleport 使用，挂载到指定节点">
       <nut-cell title="body 节点下" @click="teleportClick('body')"></nut-cell>
       <nut-cell title="#app 节点下" @click="teleportClick('#app')"></nut-cell>
-      <nut-cell
-        title="demo class 元素节点下"
-        @click="teleportClick('.demo')"
-      ></nut-cell>
+      <nut-cell title="demo class 元素节点下" @click="teleportClick('.demo')"></nut-cell>
     </nut-cell-group>
   </div>
 </template>
@@ -34,6 +41,7 @@ import { Dialog } from '@/packages/nutui.vue';
 export default createDemo({
   setup() {
     const visible = ref(false);
+    const visible1 = ref(false);
 
     const onCancel = () => {
       console.log('event cancel');
@@ -66,10 +74,22 @@ export default createDemo({
         onOk
       });
     };
+    const verticalClick = () => {
+      Dialog({
+        title: '温馨提示',
+        content: '支持底部按钮纵向排列。',
+        footerDirection: 'vertical',
+        onCancel,
+        onOk
+      });
+    };
 
     const componentClick = () => {
       visible.value = true;
     };
+    const componentvVrticalClick = () => {
+      visible1.value = true;
+    };
 
     const teleportClick = (teleport: string) => {
       Dialog({
@@ -83,10 +103,13 @@ export default createDemo({
 
     return {
       visible,
+      visible1,
       baseClick,
       noTitleClick,
       componentClick,
+      componentvVrticalClick,
       tipsClick,
+      verticalClick,
       teleportClick
     };
   }

src/packages/__VUE/dialog/doc.md

@@ -35,6 +35,12 @@ Dialog({
   content: '支持函数调用和组件调用两种方式。',
   noCancelBtn: true,
 });
+
+Dialog({
+  title: '温馨提示',
+  content: '支持底部按钮纵向排列。',
+  footerDirection:"vertical"
+});
 ```
 
 
@@ -73,7 +79,10 @@ setup(){
 ## 标签式组件使用
 
 ```html
-<nut-dialog :title="title" :close-on-click-overlay="false" :content="content" v-model:visible="visible"></nut-dialog>
+<nut-cell title="标签式使用使用" @click="componentClick"></nut-cell>
+<nut-cell title="底部按钮垂直使用" @click="componentvVrticalClick"></nut-cell>
+<nut-dialog title="标签式使用" :close-on-click-overlay="false" content="内容" v-model:visible="visible"></nut-dialog>
+<nut-dialog title="标签式使用" footer-direction="vertical" :close-on-click-overlay="false" content="内容" v-model:visible="visible1"></nut-dialog>
 ```
 
 ``` javascript
@@ -82,10 +91,14 @@ import { Dialog } from '@nutui/nutui';
 export default {
   setup() {
     const visible = ref(true);
-    const title = '标签式使用';
-    const content = '内容';
-  
-    return { visible,title,content };
+    const visible1 = ref(true);
+    const componentClick = () => {
+      visible.value = true;
+    };
+    const componentvVrticalClick = () => {
+      visible1.value = true;
+    };
+    return { visible,visible1,componentClick,componentvVrticalClick };
   },
 };
 ```
@@ -115,23 +128,23 @@ export default {
 
 ## Props
 
-| 字段                   | 说明                                  | 类型    | 默认值   |
-|------------------------|---------------------------------------|---------|----------|
-| title                  | 标题                                  | String  | -        |
-| content                | 内容，支持HTML                        | String  | -        |
-| teleport               | 指定挂载节点                          | String  | "body"   |
-| close-on-click-overlay | 点击蒙层是否关闭对话框                | Boolean | false    |
-| no-footer              | 是否隐藏底部按钮栏                    | Boolean | false    |
-| no-ok-btn              | 是否隐藏确定按钮                      | Boolean | false    |
-| no-cancel-btn          | 是否隐藏取消按钮                      | Boolean | false    |
-| cancel-text            | 取消按钮文案                          | String  | ”取消“   |
-| ok-text                | 确定按钮文案                          | String  | ”确 定“  |
-| ok-btn-disabled        | 禁用确定按钮                          | Boolean | false    |
-| cancel-auto-close      | 取消按钮是否默认关闭弹窗              | Boolean | true     |
-| text-align             | 文字对齐方向，可选值同css的text-align | String  | "center" |
-| close-on-popstate      | 是否在页面回退时自动关闭              | Boolean | false    |
-| lock-scroll            | 背景是否锁定                          | Boolean | false    |
-
+| 字段                   | 说明                                     | 类型    | 默认值     |
+|------------------------|------------------------------------------|---------|------------|
+| title                  | 标题                                     | String  | -          |
+| content                | 内容，支持HTML                           | String  | -          |
+| teleport               | 指定挂载节点                             | String  | "body"     |
+| close-on-click-overlay | 点击蒙层是否关闭对话框                   | Boolean | false      |
+| no-footer              | 是否隐藏底部按钮栏                       | Boolean | false      |
+| no-ok-btn              | 是否隐藏确定按钮                         | Boolean | false      |
+| no-cancel-btn          | 是否隐藏取消按钮                         | Boolean | false      |
+| cancel-text            | 取消按钮文案                             | String  | ”取消“     |
+| ok-text                | 确定按钮文案                             | String  | ”确 定“    |
+| ok-btn-disabled        | 禁用确定按钮                             | Boolean | false      |
+| cancel-auto-close      | 取消按钮是否默认关闭弹窗                 | Boolean | true       |
+| text-align             | 文字对齐方向，可选值同css的text-align    | String  | "center"   |
+| close-on-popstate      | 是否在页面回退时自动关闭                 | Boolean | false      |
+| lock-scroll            | 背景是否锁定                             | Boolean | false      |
+| footer-direction       | 使用横纵方向 可选值 horizontal、vertical | string  | horizontal |
 
 ## Events
 

src/packages/__VUE/dialog/doc.taro.md

@@ -27,6 +27,9 @@ app.use(Dialog);
 <nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
 <nut-dialog no-cancel-btn title="温馨提示" content="这是提示弹框。" v-model:visible="visible3" @cancel="onCancel" @ok="onOk" />
 
+<nut-cell title="底部按钮 垂直调用" @click="verticalClick"></nut-cell>
+<nut-dialog footer-direction="vertical" teleport="#app" title="温馨提示" content="这是提示弹框。" v-model:visible="visible5" />
+
 <nut-cell title="异步关闭" @click="componentClick"></nut-cell>
 <nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
 ```
@@ -39,6 +42,7 @@ export default {
     const visible2 = ref(false);
     const visible3 = ref(false);
     const visible4 = ref(false);
+    const visible5 = ref(false);
     const closeContent = ref('');
     const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
     const countDown = (second: number) => `倒计时 ${second} 秒`;
@@ -82,11 +86,17 @@ export default {
       visible4.value = true;
     };
 
+    const verticalClick = () => {
+      visible5.value = true;
+    };
+
+
     return {
       visible1,
       visible2,
       visible3,
       visible4,
+      visible5,
       onCancel,
       onOk,
       closeContent,
@@ -94,7 +104,8 @@ export default {
       baseClick,
       noTitleClick,
       componentClick,
-      tipsClick
+      tipsClick,
+      verticalClick
     };
   }
 };
@@ -103,22 +114,23 @@ export default {
 
 ## Props
 
-| 字段                   | 说明                                  | 类型    | 默认值   |
-|------------------------|---------------------------------------|---------|----------|
-| title                  | 标题                                  | String  | -        |
-| content                | 内容，支持HTML                        | String  | -        |
-| teleport               | 指定挂载节点                          | String  | "body"   |
-| close-on-click-overlay | 点击蒙层是否关闭对话框                | Boolean | false    |
-| no-footer              | 是否隐藏底部按钮栏                    | Boolean | false    |
-| no-ok-btn              | 是否隐藏确定按钮                      | Boolean | false    |
-| no-cancel-btn          | 是否隐藏取消按钮                      | Boolean | false    |
-| cancel-text            | 取消按钮文案                          | String  | ”取消“   |
-| ok-text                | 确定按钮文案                          | String  | ”确 定“  |
-| ok-btn-disabled        | 禁用确定按钮                          | Boolean | false    |
-| cancel-auto-close      | 取消按钮是否默认关闭弹窗              | Boolean | true     |
-| text-align             | 文字对齐方向，可选值同css的text-align | String  | "center" |
-| close-on-popstate      | 是否在页面回退时自动关闭              | Boolean | false    |
-| lock-scroll            | 背景是否锁定                          | Boolean | false    |
+| 字段                   | 说明                                     | 类型    | 默认值     |
+|------------------------|------------------------------------------|---------|------------|
+| title                  | 标题                                     | String  | -          |
+| content                | 内容，支持HTML                           | String  | -          |
+| teleport               | 指定挂载节点                             | String  | "body"     |
+| close-on-click-overlay | 点击蒙层是否关闭对话框                   | Boolean | false      |
+| no-footer              | 是否隐藏底部按钮栏                       | Boolean | false      |
+| no-ok-btn              | 是否隐藏确定按钮                         | Boolean | false      |
+| no-cancel-btn          | 是否隐藏取消按钮                         | Boolean | false      |
+| cancel-text            | 取消按钮文案                             | String  | ”取消“     |
+| ok-text                | 确定按钮文案                             | String  | ”确 定“    |
+| ok-btn-disabled        | 禁用确定按钮                             | Boolean | false      |
+| cancel-auto-close      | 取消按钮是否默认关闭弹窗                 | Boolean | true       |
+| text-align             | 文字对齐方向，可选值同css的text-align    | String  | "center"   |
+| close-on-popstate      | 是否在页面回退时自动关闭                 | Boolean | false      |
+| lock-scroll            | 背景是否锁定                             | Boolean | false      |
+| footer-direction       | 使用横纵方向 可选值 horizontal、vertical | string  | horizontal |
 
 
 ## Events

src/packages/__VUE/dialog/index.scss

@@ -34,6 +34,23 @@
     width: 100%;
     justify-content: space-around;
 
+    &.horizontal {
+    }
+    &.vertical {
+      flex-direction: column;
+
+      .nut-button {
+        min-width: 100%;
+        margin: 0;
+        &.nut-dialog__footer-cancel {
+          border: 0;
+        }
+        &.nut-dialog__footer-ok {
+          margin-top: 10px;
+        }
+      }
+    }
+
     .nut-button {
       min-width: 100px;
     }

src/packages/__VUE/dialog/index.taro.vue

@@ -19,7 +19,7 @@
         <view v-else v-html="content"></view>
       </view>
 
-      <view class="nut-dialog__footer" v-if="!noFooter">
+      <view class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }" v-if="!noFooter">
         <slot v-if="$slots.footer" name="footer"></slot>
         <template v-else>
           <nut-button
@@ -106,37 +106,16 @@ export default create({
       type: String,
       default: 'center'
     },
-    onOk: {
-      type: Function,
-      default: null
-    },
-    onCancel: {
-      type: Function,
-      default: null
-    },
-    onClose: {
-      type: Function,
-      default: null
-    },
-    onClosed: {
-      type: Function,
-      default: null
-    },
     closeOnPopstate: {
       type: Boolean,
       default: false
+    },
+    footerDirection: {
+      type: String,
+      default: 'horizontal' //vertical
     }
   },
-  emits: [
-    'update',
-    'update:visible',
-    'ok',
-    'cancel',
-    'open',
-    'opened',
-    'close',
-    'closed'
-  ],
+  emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],
   setup(props, { emit }) {
     const showPopup = ref(props.visible);
     onMounted(() => {

src/packages/__VUE/dialog/index.vue

@@ -19,7 +19,7 @@
         <view v-else v-html="content"></view>
       </view>
 
-      <view class="nut-dialog__footer" v-if="!noFooter">
+      <view class="nut-dialog__footer" :class="{ [footerDirection]: footerDirection }" v-if="!noFooter">
         <slot v-if="$slots.footer" name="footer"></slot>
         <template v-else>
           <nut-button
@@ -106,25 +106,13 @@ export default create({
       type: String,
       default: 'center'
     },
-    onOk: {
-      type: Function,
-      default: null
-    },
-    onCancel: {
-      type: Function,
-      default: null
-    },
-    onClose: {
-      type: Function,
-      default: null
-    },
-    onClosed: {
-      type: Function,
-      default: null
-    },
     closeOnPopstate: {
       type: Boolean,
       default: false
+    },
+    footerDirection: {
+      type: String,
+      default: 'horizontal' //vertical
     }
   },
   emits: ['update', 'update:visible', 'ok', 'cancel', 'open', 'opened', 'close', 'closed'],

src/sites/mobile-taro/vue/src/feedback/pages/dialog/index.vue

@@ -1,21 +1,10 @@
 <template>
   <div class="demo">
     <nut-cell title="基础弹框" @click="baseClick"></nut-cell>
-    <nut-dialog
-      title="基础弹框"
-      content="这是基础弹框。"
-      v-model:visible="visible1"
-      @cancel="onCancel"
-      @ok="onOk"
-    />
+    <nut-dialog title="基础弹框" content="这是基础弹框。" v-model:visible="visible1" @cancel="onCancel" @ok="onOk" />
 
     <nut-cell title="无标题弹框" @click="noTitleClick"></nut-cell>
-    <nut-dialog
-      content="这是无标题弹框。"
-      v-model:visible="visible2"
-      @cancel="onCancel"
-      @ok="onOk"
-    />
+    <nut-dialog content="这是无标题弹框。" v-model:visible="visible2" @cancel="onCancel" @ok="onOk" />
 
     <nut-cell title="提示弹框" @click="tipsClick"></nut-cell>
     <nut-dialog
@@ -27,14 +16,17 @@
       @ok="onOk"
     />
 
-    <nut-cell title="异步关闭" @click="componentClick"></nut-cell>
+    <nut-cell title="底部按钮 垂直使用" @click="verticalClick"></nut-cell>
     <nut-dialog
-      title="异步关闭"
-      :content="closeContent"
-      :visible="visible4"
-      @cancel="onCancel"
-      @ok="onOkAsync"
+      footer-direction="vertical"
+      teleport="#app"
+      title="温馨提示"
+      content="这是提示弹框。"
+      v-model:visible="visible5"
     />
+
+    <nut-cell title="异步关闭" @click="componentClick"></nut-cell>
+    <nut-dialog title="异步关闭" :content="closeContent" :visible="visible4" @cancel="onCancel" @ok="onOkAsync" />
   </div>
 </template>
 <script lang="ts">
@@ -45,6 +37,7 @@ export default {
     const visible2 = ref(false);
     const visible3 = ref(false);
     const visible4 = ref(false);
+    const visible5 = ref(false);
     const closeContent = ref('');
     const sleep = () => new Promise((resolve) => setTimeout(resolve, 1000));
     const countDown = (second: number) => `倒计时 ${second} 秒`;
@@ -88,11 +81,16 @@ export default {
       visible4.value = true;
     };
 
+    const verticalClick = () => {
+      visible5.value = true;
+    };
+
     return {
       visible1,
       visible2,
       visible3,
       visible4,
+      visible5,
       onCancel,
       onOk,
       closeContent,
@@ -100,7 +98,8 @@ export default {
       baseClick,
       noTitleClick,
       componentClick,
-      tipsClick
+      tipsClick,
+      verticalClick
     };
   }
 };