fix: dialog支持多行按钮和样式修复

src/packages/dialog/demo.vue

@@ -38,6 +38,15 @@
         </span>
       </nut-cell>
     </div>
+    <h4>多行按钮</h4>
+
+    <div>
+       <nut-cell :is-link="true" :show-icon="true" @click.native="showDialog10">
+        <span slot="title">
+          <label>多行按钮</label>
+        </span>
+      </nut-cell>
+    </div>
     <h4>图片弹窗</h4>
     <p
       >type值为“image”时为图片弹窗，需要配置一张图片，可带链接（非必须）。默认展示关闭按钮。点击图片触发onClickImageLink事件，返回false可阻止默认的跳转链接行为。</p
@@ -102,22 +111,32 @@ export default {
   methods: {
     showDialog1: function() {
       const options = {
-        title: '确定删除此订单？',
-        content: '删除后将从你的记录里消失，无法找回'
+        title: '标题',
+        content: '我想用艺术感动人们的内心。我希望他们这样说到：他的感受深刻而温柔。',
+        noCloseBtn: false,
+        noOkBtn: true,
+        cancelBtnTxt:"确认",
+        textAlign:"left",
+        onOkBtn(event) {
+          this.close(); //关闭对话框
+        }
       };
 
       this.$dialog(options);
     },
     showDialog2: function() {
       const options = {
-        title: '确定要加入购物车吗？'
+        title: '确定要加入购物车吗？',
+         onOkBtn(event) {
+          this.close(); //关闭对话框
+        },
       };
 
       this.$dialog(options);
     },
     showDialog3: function() {
       const options = {
-        content: '点击返回将中断注册，确定返回？<br>删除后您可以在回收站还原。',
+        content: '我想用艺术感动人们的内心。我希望他们这样说到：他的感受深刻而温柔。',
         noCloseBtn: false,
         noOkBtn: true,
         cancelBtnTxt: '我知道了'
@@ -166,14 +185,20 @@ export default {
         animation: false, //禁用弹出动效
         title: '注册说明',
         canDestroy: false,
-        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。'
+        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。',
+        onOkBtn(event) {
+          this.close(); //关闭对话框
+        },
       });
     },
     showDialog7: function() {
       this.$dialog({
         maskBgStyle: 'rgba(0,0,0,0)', //设置遮罩层背景透明
         title: '注册说明',
-        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。'
+        content: '原账号为您本人所有，建议直接登录或找回密码。原账号内的订单资产可能丢失，可联系京东客服找回。',
+        onOkBtn(event) {
+          this.close(); //关闭对话框
+        },
       });
     },
     showDialog8: function() {
@@ -195,6 +220,32 @@ export default {
         cancelBtnTxt: '我知道了'
       });
     },
+    showDialog10: function() {
+      this.$dialog({
+        content: '我认为，大多数设计师只是试图从他们已经做过的事情中努力，在讲故事方面并没有什么特别之处，而我的回归，将伴随着一个伟大的演讲',
+        multiButton:true,
+        textAlign:"left",
+        multiButtonText:[{
+          name: '主要操作1(禁止)',
+          value: 0,
+          disabled:true
+        },
+        {
+          name: '主要操作2',
+          value: 1,
+          disabled:false,
+        },{
+          name: '主要操作3',
+          value:2,
+          disabled:false,
+        }],
+        chooseBtn(item,index){
+          console.log(index)
+          alert(`我点击了第${index + 1}个按钮`)
+          this.close()
+        },    
+      });
+    },
     showImageDialog: function() {
       this.$dialog({
         type: 'image',

src/packages/dialog/dialog.scss

@@ -107,20 +107,24 @@ body.dialog-open {
     display: flex;
     flex-direction: column;
     flex: 0 1 auto;
+    border-bottom: 1px solid rgba(230, 230, 230, 1);
 }
 
 .nut-dialog-content {
     flex: 1;
     justify-content: center;
     overflow: auto;
-    font-size: $font-size-base;
+    line-height: 21px;
+    font-family: PingFang-SC-Medium;
+    font-size: 14px;
+    color: rgba(100, 100, 100, 1);
     word-break: break-all;
     padding-bottom: 10px;
     -webkit-overflow-scrolling: touch;
 }
 
 .nut-dialog-footer {
-    height: 50px;
+    min-height: 50px;
     width: 100%;
     line-height: 50px;
     display: flex;
@@ -128,12 +132,41 @@ body.dialog-open {
     border-radius: 0 0 5px 5px;
     overflow: hidden;
     flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.nut-dialog-multi-button {
+    width: 100vw;
+    height: 50px;
+    box-sizing: border-box;
+    line-height: 50px;
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(245, 22, 22, 1);
+    text-align: center;
+    border-bottom: 1px solid rgba(230, 230, 230, 1);
+}
+
+.nut-dialog-multi-disabled {
+    color: rgba(150, 150, 150, 1);
+}
+
+.nut-dialog-multi-cancel {
+    width: 100vw;
+    height: 50px;
+    box-sizing: border-box;
+    line-height: 50px;
+    font-family: PingFangSC-Regular;
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(150, 150, 150, 1);
+    text-align: center;
 }
 
 .nut-dialog-btn {
     display: block;
     width: 100%;
-    height: 100%;
     position: relative;
     flex: 1;
     font-size: $font-size-base;
@@ -142,7 +175,9 @@ body.dialog-open {
     appearance: none;
     outline: none;
     user-select: none;
-    &.disabled {
+    font-size: 16px;
+    font-weight: 00;
+    5 &.disabled {
         background: $btn-disable-bg;
         background-origin: border-box;
         color: $btn-disable-color;
@@ -152,15 +187,20 @@ body.dialog-open {
         background: transparent;
         color: $primary-color;
         border-top: 1px solid $light-color;
+        line-height: 23px;
+        font-family: PingFangSC-Regular;
+        font-size: 16px;
     }
 }
 
 .nut-dialog-ok {
     border-radius: 0 0 5px 0;
-    background: $btn-gradient-bg;
+    background: #fff;
     background-origin: border-box;
     color: $btn-gradient-color;
-    margin-right: -1px;
+    font-family: PingFangSC-Regular;
+    border-left: 1px solid rgba(230, 230, 230, 1);
+    color: rgba(245, 22, 22, 1);
     &:active {
         background: $btn-gradient-active-bg;
     }
@@ -170,6 +210,7 @@ body.dialog-open {
     border-radius: 0 0 0 5px;
     border-top: 1px solid $light-color;
     background: #fff;
+    color: rgba(150, 150, 150, 1);
     background-origin: border-box;
     &:active {
         border-top: 1px solid #ccc;

src/packages/dialog/dialog.vue

@@ -4,6 +4,7 @@
       :overlay='cover'
       :class="customClass"
       v-model="curVisible"
+      :lock-scroll="lockBgScroll"
       :overlayStyle='{backgroundColor:maskBgStyle}'
       class="nut-dialog"
       @click="clickCover"
@@ -25,17 +26,31 @@
               <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 class="nut-dialog-btn nut-dialog-cancel" v-if="!noCancelBtn" @click="cancelBtnClick(cancelAutoClose)">{{
-                cancelBtnTxt || nutTranslate('lang.cancelBtnTxt')
-              }}</button>
-              <button
-                class="nut-dialog-btn nut-dialog-ok"
-                v-if="!noOkBtn"
-                :class="{ disabled: okBtnDisabled }"
-                :disabled="okBtnDisabled"
-                @click="okBtnClick"
-                >{{ okBtnTxt || nutTranslate('lang.okBtnTxt') }}</button
-              >
+              <template v-if="!multiButton">
+                <button class="nut-dialog-btn nut-dialog-cancel" v-if="!noCancelBtn" @click="cancelBtnClick(cancelAutoClose)">{{
+                  cancelBtnTxt || nutTranslate('lang.cancelBtnTxt')
+                }}</button>
+                <button
+                  class="nut-dialog-btn nut-dialog-ok"
+                  v-if="!noOkBtn"
+                  :class="{ disabled: okBtnDisabled }"
+                  :disabled="okBtnDisabled"
+                  @click="okBtnClick"
+                  >{{ okBtnTxt || nutTranslate('lang.okBtnTxt') }}</button
+                >
+              </template>
+              <template v-else>
+                  <div v-for="(item , index ) in multiButtonText" 
+                    class="nut-dialog-multi-button"
+                    :key="index"
+                     :class="{ 'nut-dialog-multi-disabled': item.disabled }"
+                    @click="chooseItem(item, index)">
+                    {{item.name}}
+                  </div>
+                  <div class="nut-dialog-multi-cancel"   @click="cancelBtnClick(cancelAutoClose)">
+                     {{cancelBtnTxt || nutTranslate('lang.cancelBtnTxt')}}
+                  </div>
+              </template>
             </div>
           </template>
         </div>
@@ -53,10 +68,6 @@ export default {
         type:Boolean,
         default:true
     },
-    id: {
-      type: String,
-      default: ''
-    },
     title: {
       type: String,
       default: ''
@@ -85,6 +96,14 @@ export default {
       type: Boolean,
       default: false
     },
+    multiButton:{
+      type:Boolean,
+      default:false
+    },
+    multiButtonText:{
+      type: Array,
+      default: () => []
+    },
     visible: {
       type: Boolean,
       default: false
@@ -133,6 +152,10 @@ export default {
       type: Function,
       default: null
     },
+    chooseBtn:{
+       type: Function,
+      default: null
+    },
     onCloseBtn: {
       type: Function,
       default: null
@@ -177,6 +200,13 @@ export default {
         this.hide();
       }
     },
+    chooseItem(item, index) {
+      if(item.disabled){return;}
+      this.$emit('choose-btn',item,index);
+      if (typeof this.chooseBtn === 'function') {
+        this.chooseBtn.call(this,item,index);
+      }
+    },
     modalClick() {
       if (!this.closeOnClickModal) {
         return;
@@ -237,13 +267,8 @@ export default {
         this.curVisible = val;
       },
       immediate: true
-    },
-    curVisible(val) {
-      if (this.lockBgScroll) {
-        //锁定or解锁页面滚动
-        lockMaskScroll[val ? 'afterOpen' : 'beforeClose']();
-      }
     }
+  
   }
 };
 </script>

src/packages/dialog/doc.md

@@ -7,22 +7,12 @@
 ```javascript
 this.$dialog({
   title: "确定删除此订单？",
-  content: "删除后将从你的记录里消失，无法找回"
-});
-```
-
-## ID
-
-同一个页面中，id相同的Dialog的DOM只会同时存在一个，不指定id时，id的默认值为**nut-dialog-default-id**。
-
-```javascript
-this.$dialog({
-  id:'my-dialog',
-  title: "确定删除此订单？",
-  content: "删除后将从你的记录里消失，无法找回"
+  content: "删除后将从你的记录里消失，无法找回",
+  onOkBtn(event) {
+    this.close(); //关闭对话框
+  }
 });
 ```
-> 如果希望同时弹出多个Dialog，请给不同的Dialog设置不同的id。
 
 ## 事件
 ```javascript
@@ -48,6 +38,34 @@ this.$dialog({
 });
         
 ```
+## 多行按钮
+```javascript
+this.$dialog({
+        content: '我认为，大多数设计师只是试图从他们已经做过的事情中努力，在讲故事方面并没有什么特别之处，而我的回归，将伴随着一个伟大的演讲',
+        multiButton:true,
+        textAlign:"left",
+        multiButtonText:[{
+          name: '主要操作1(禁止)',
+          value: 0,
+          disabled:true
+        },
+        {
+          name: '主要操作2',
+          value: 1,
+          disabled:false,
+        },{
+          name: '主要操作3',
+          value:2,
+          disabled:false,
+        }],
+        chooseBtn(item,index){
+          console.log(index)
+          alert(`我点击了第${index + 1}个按钮`)
+          this.close()
+        },    
+      });
+        
+```
 ## 关闭dialog不销毁实例
 ```javascript
  this.$dialog({
@@ -107,11 +125,10 @@ export default {
 }
 ```
 
-## API
+## prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| id | 标识符，相同者共享一个实例 | String/Number | nut-dialog-default-id
 | title | 标题 | String | -
 | content | 内容，支持HTML | String | -
 | type | 弹窗类型，值为**image**时为图片弹窗 | String | -
@@ -123,15 +140,22 @@ export default {
 | okBtnTxt | 确定按钮文案 | String | ”确 定“
 | okBtnDisabled | 禁用确定按钮 | Boolean | false
 | cancelAutoClose | 取消按钮是否默认关闭弹窗 | Boolean | true
-| textAlign | 文字对齐方向，可选值同css的text-align | String | "center"
-| onOkBtn | 确定按钮回调 | Function | -
-| onCancelBtn | 取消按钮回调 | Function | -
-| onCloseBtn | 关闭按钮回调 | Function | -
-| closeCallback | 关闭回调，任何情况关闭弹窗都会触发 | Function | -
-| onClickImageLink | 图片链接点击回调，仅对图片类型弹窗有效 | Function | -
+| textAlign | 文字对齐方向，可选值同css的text-align | String | "left"-
 | maskBgStyle | 遮罩层样式（颜色、透明度） | String | -
 | customClass | 增加一个自定义class | String | -
 | link | 点击图片跳转的Url，仅对图片类型弹窗有效 | String | -
 | imgSrc | 图片Url，仅对图片类型弹窗有效 | String | -
 | animation | 是否开启默认动效 | Boolean | true
+| multiButton | 是否开启多行按钮 | Boolean | false
+| multiButtonText | 多行按钮内容。内容必须包含name,按钮显示的内容 | Array | -
 | lockBgScroll | 锁定遮罩层滚动，不影响弹窗内部滚动（实验性质）会给body添加posotion:fix属性，注意 | Boolean | false
+
+## event
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| onOkBtn | 确定按钮回调 | Function | -
+| onCancelBtn | 取消按钮回调 | Function | -
+| onCloseBtn | 关闭按钮回调 | Function | -
+| closeCallback | 关闭回调，任何情况关闭弹窗都会触发 | Function | -
+| chooseBtn | 多行按钮内容。回调函数，返回参数为 点击的item和index | Function | -