修改 Dialog 组件按钮点击状态样式

package.json

 {
   "name": "@nutui/nutui",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

sites/demo/view/index.vue

 <template>
   <div class="demo-list-wrapper">
-    <!-- <nut-noticebar
-      :closeMode="true"
-      v-if="cacheHasNewVersion"
-    >本页面有更新，请<a href="javascript:window.location.reload();">刷新页面</a>。</nut-noticebar>-->
     <a href="https://github.com/jdf2e/nutui/" target="_blank" class="github-btn">Github</a>
 
     <h1 class="logo"></h1>
     <div class="version">NutUI 2.0</div>
-    <p>NutUI 是一套京东风格的移动端Vue组件库</p>
+    <p>一套京东风格的移动端Vue组件库</p>
     <div :class="['demo-list-box',{'unfold':foldStatus[item]}]" v-for="item in sorts" :key="item">
       <h4 @click="toggleFold(item)">
         {{oriSorts[item]}}
@@ -70,21 +66,22 @@ export default {
 
 <style lang="scss" scoped>
 .demo-list-wrapper {
-  position:relative;
+  position: relative;
   padding: 8px;
   box-sizing: border-box;
   .github-btn {
-      position:absolute;
-      top:-25px;
-      right:10px;
-      height: 26px;
-      width: 26px;
-      font-size: 0;
-      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 16 16' version='1.1' width='24' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' fill='rgb(150,150,150)' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
-      &:hover,
-      &:active {
-        opacity: 0.7;
-      }
+    position: absolute;
+    top: -25px;
+    right: 10px;
+    height: 26px;
+    width: 26px;
+    font-size: 0;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 16 16' version='1.1' width='24' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' fill='rgb(150,150,150)' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z'%3E%3C/path%3E%3C/svg%3E")
+      no-repeat;
+    &:hover,
+    &:active {
+      opacity: 0.7;
+    }
   }
   .logo {
     background: url(../asset/img/logo.png) no-repeat;
@@ -94,7 +91,6 @@ export default {
     text-align: center;
     margin: 5px auto 15px;
     animation: swing 2.5s;
-
   }
   .version {
     text-align: center;
@@ -112,7 +108,7 @@ export default {
   width: 95%;
   background: #fff;
   border-radius: 5px;
-  overflow:hidden;
+  overflow: hidden;
   h4 {
     position: relative;
     margin: 0;

src/packages/dialog/demo.vue

@@ -174,10 +174,9 @@ export default {
     },
     showDialog9: function() {
       this.$dialog({
-        title: "窗体内部滚动不影响页面滚动",
+        title: "《桃花行》",
         lockBgScroll:true,
-        content:
-          "弹窗弹出后，页面滚动锁止。页面不跟随弹窗内部的滚动而滚动。<br><br><br><br><br><br><br>弹窗弹出后，页面滚动锁止。页面不跟随弹窗内部的滚动而滚动。<br><br><br><br><br><br><br>弹窗弹出后，页面滚动锁止。页面不跟随弹窗内部的滚动而滚动。<br><br><br><br><br><br><br>弹窗弹出后，页面滚动锁止。页面不跟随弹窗内部的滚动而滚动。<br><br><br><br><br><br><br>弹窗弹出后，页面滚动锁止。页面不跟随弹窗内部的滚动而滚动。",
+        content:"桃花帘外东风软，<br>桃花帘内晨妆懒。<br>帘外桃花帘内人，<br>人与桃花隔不远。<br>东风有意揭帘栊，<br>花欲窥人帘不卷。<br>桃花帘外开仍旧，<br>帘中人比桃花瘦。<br>花解怜人花也愁，<br>隔帘消息风吹透。<br>风透帘栊花满庭，<br>庭前春色倍伤情。<br>闲苔院落帘空卷，<br>斜日栏干人自凭。<br>凭栏人向东风泣，<br>茜裙偷傍桃花立。<br>桃花桃叶乱纷纷，<br>花绽新红叶凝碧。<br>树树烟封一万株，<br>烘照楼台红模糊。<br>天机烧破鸳鸯锦，<br>春色欲酣珊瑚枕。<br>侍女金盆进水来，<br>香泉欲蘸胭脂冷。<br>胭脂鲜艳何相类，<br>花之颜色人之泪。<br>若将人泪比桃花，<br>泪自长流花自媚。<br>泪眼看花泪易乾，<br>泪乾春尽花憔悴。<br>憔悴花枝憔悴人，<br>花飞人倦易黄昏。<br>一声杜宇春归尽，<br>寂寞帘栊空月痕。",
         noOkBtn: true,
         cancelBtnTxt: "我知道了"
       });

src/packages/dialog/dialog.scss

@@ -145,7 +145,7 @@ body.dialog-open {
     position: relative;
     flex: 1;
     font-size: $font-size-base;
-    border:none;
+    border: none;
     background: transparent;
     appearance: none;
     outline: none;
@@ -161,9 +161,6 @@ body.dialog-open {
         color: $primary-color;
         border-top: 1px solid $light-color;
     }
-    &:active {
-        background: $btn-gradient-active-bg;
-    }
 }
 
 .nut-dialog-ok {
@@ -171,38 +168,18 @@ body.dialog-open {
     background: $btn-gradient-bg;
     background-origin: border-box;
     color: $btn-gradient-color;
+    &:active {
+        background: $btn-gradient-active-bg;
+    }
 }
 
 .nut-dialog-cancel {
     border-radius: 0 0 0 5px;
     border-top: 1px solid $light-color;
     background: #FFF;
-}
-
-// .fade-enter-active {
-//     animation: zoomIn 0.3s forwards;
-// }
-// @keyframes zoomIn {
-//     0% {
-//         opacity: 0;
-//         transform: scale3d(1.3, 1.3, 1.3);
-//     }
-//     50% {
-//         opacity: 1;
-//     }
-// }
-// @keyframes zoomOut {
-//     0% {
-//         opacity: 1;
-//     }
-//     50% {
-//         opacity: 0;
-//         transform: scale3d(1.3, 1.3, 1.3);
-//     }
-//     100% {
-//         opacity: 0;
-//     }
-// }
-// .fade-leave-active {
-//     animation: zoomOut 0.3s forwards;
-// }
\ No newline at end of file
+    background-origin: border-box;
+    &:active {
+        border-top: 1px solid #CCC;
+        background: #CCC;
+    }
+}
\ No newline at end of file