feat: v2.6.16

Tencent · Aug 12, 2024 · 2ee3d08 · 2ee3d08
1 parent 2b41191
commit 2ee3d08
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 40 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,13 @@
+### v2.6.16 (2024-08-12)
+
+#### Features
+* feat: weui-dialog组件UI升级
+
+#### Bugfixes
+* fix: 去掉系统自带的点击效果
+
+
+
 ### v2.6.15 (2024-07-23)
 
 #### Bugfixes

diff --git a/dist/example/index.html b/dist/example/index.html
@@ -2570,12 +2570,12 @@ <h1 class="page__title">Dialog</h1>
         <p class="page__desc">对话框</p>
     </div>
     <div class="page__bd page__bd_spacing">
-        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
-        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
+        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog1">样式一</a>
+        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog2">样式二</a>
+        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog5">样式三</a>
     </div>
 
     <div id="dialogs">
-        <!--BEGIN dialog1-->
         <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title1" id="iosDialog1" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog">
@@ -2587,19 +2587,30 @@ <h1 class="page__title">Dialog</h1>
                 </div>
             </div>
         </div>
-        <!--END dialog1-->
-        <!--BEGIN dialog2-->
-        <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title2" id="iosDialog2" style="display: none;">
+        <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" id="iosDialog2" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog">
                 <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                 <div class="weui-dialog__ft">
-                    <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
+                    <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_warn">负向操作</a>
                 </div>
             </div>
         </div>
-        <!--END dialog2-->
-        <!--BEGIN dialog3-->
+        <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title5" id="iosDialog5" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog weui-dialog_btn-wrap">
+                <div class="weui-dialog__hd"><strong class="weui-dialog__title" id="js_title5">弹窗标题</strong></div>
+                <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
+                <div class="weui-dialog__ft">
+                  <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                  <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                </div>
+            </div>
+        </div>
+
+
+
         <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title3" id="androidDialog1" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog weui-skin_android">
@@ -2613,8 +2624,6 @@ <h1 class="page__title">Dialog</h1>
                 </div>
             </div>
         </div>
-        <!--END dialog3-->
-        <!--BEGIN dialog4-->
         <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title4" id="androidDialog2" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog weui-skin_android">
@@ -2627,13 +2636,13 @@ <h1 class="page__title">Dialog</h1>
                 </div>
             </div>
         </div>
-        <!--END dialog4-->
     </div>
 </div>
 <script type="text/javascript">
     $(function(){
         var $iosDialog1 = $('#iosDialog1'),
             $iosDialog2 = $('#iosDialog2'),
+            $iosDialog5 = $('#iosDialog5'),
             $androidDialog1 = $('#androidDialog1'),
             $androidDialog2 = $('#androidDialog2');
 
@@ -2655,6 +2664,12 @@ <h1 class="page__title">Dialog</h1>
             $iosDialog2.attr('tabindex','0');
             $iosDialog2.trigger('focus');
         });
+        $('#showIOSDialog5').on('click', function(){
+            $iosDialog5.fadeIn(200);
+            $iosDialog5.attr('aria-hidden','false');
+            $iosDialog5.attr('tabindex','0');
+            $iosDialog5.trigger('focus');
+        });
         $('#showAndroidDialog1').on('click', function(){
             $androidDialog1.fadeIn(200);
             $androidDialog1.attr('aria-hidden','false');

diff --git a/dist/style/weui.css b/dist/style/weui.css
diff --git a/dist/style/weui.min.css b/dist/style/weui.min.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "weui",
-    "version": "2.6.15",
+    "version": "2.6.16",
     "description": "A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.",
     "keywords": [
         "weui",

diff --git a/src/example/dialog/dialog.html b/src/example/dialog/dialog.html
@@ -4,12 +4,12 @@ <h1 class="page__title">Dialog</h1>
         <p class="page__desc">对话框</p>
     </div>
     <div class="page__bd page__bd_spacing">
-        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog1">iOS Dialog样式一</a>
-        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog2">iOS Dialog样式二</a>
+        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog1">样式一</a>
+        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog2">样式二</a>
+        <a href="javascript:" role="button" class="weui-btn weui-btn_default" id="showIOSDialog5">样式三</a>
     </div>
 
     <div id="dialogs">
-        <!--BEGIN dialog1-->
         <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title1" id="iosDialog1" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog">
@@ -21,19 +21,30 @@ <h1 class="page__title">Dialog</h1>
                 </div>
             </div>
         </div>
-        <!--END dialog1-->
-        <!--BEGIN dialog2-->
-        <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title2" id="iosDialog2" style="display: none;">
+        <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" id="iosDialog2" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog">
                 <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
                 <div class="weui-dialog__ft">
-                    <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
+                    <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                    <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_warn">负向操作</a>
                 </div>
             </div>
         </div>
-        <!--END dialog2-->
-        <!--BEGIN dialog3-->
+        <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title5" id="iosDialog5" style="display: none;">
+            <div class="weui-mask"></div>
+            <div class="weui-dialog weui-dialog_btn-wrap">
+                <div class="weui-dialog__hd"><strong class="weui-dialog__title" id="js_title5">弹窗标题</strong></div>
+                <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
+                <div class="weui-dialog__ft">
+                  <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_primary">主操作</a>
+                  <a role="button" href="javascript:" class="weui-dialog__btn weui-dialog__btn_default">辅助操作</a>
+                </div>
+            </div>
+        </div>
+
+
+
         <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title3" id="androidDialog1" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog weui-skin_android">
@@ -47,8 +58,6 @@ <h1 class="page__title">Dialog</h1>
                 </div>
             </div>
         </div>
-        <!--END dialog3-->
-        <!--BEGIN dialog4-->
         <div class="js_dialog" role="dialog"  aria-hidden="true" aria-modal="true" aria-labelledby="js_title4" id="androidDialog2" style="display: none;">
             <div class="weui-mask"></div>
             <div class="weui-dialog weui-skin_android">
@@ -61,13 +70,13 @@ <h1 class="page__title">Dialog</h1>
                 </div>
             </div>
         </div>
-        <!--END dialog4-->
     </div>
 </div>
 <script type="text/javascript">
     $(function(){
         var $iosDialog1 = $('#iosDialog1'),
             $iosDialog2 = $('#iosDialog2'),
+            $iosDialog5 = $('#iosDialog5'),
             $androidDialog1 = $('#androidDialog1'),
             $androidDialog2 = $('#androidDialog2');
 
@@ -89,6 +98,12 @@ <h1 class="page__title">Dialog</h1>
             $iosDialog2.attr('tabindex','0');
             $iosDialog2.trigger('focus');
         });
+        $('#showIOSDialog5').on('click', function(){
+            $iosDialog5.fadeIn(200);
+            $iosDialog5.attr('aria-hidden','false');
+            $iosDialog5.attr('tabindex','0');
+            $iosDialog5.trigger('focus');
+        });
         $('#showAndroidDialog1').on('click', function(){
             $androidDialog1.fadeIn(200);
             $androidDialog1.attr('aria-hidden','false');

diff --git a/src/style/base/reset.less b/src/style/base/reset.less
@@ -30,6 +30,7 @@ body {
   margin: 0;
   padding: 0;
   outline: 0;
+  .setTapColor;
 }
 
 a img {
@@ -38,8 +39,6 @@ a img {
 
 a {
   text-decoration: none;
-  .setTapColor();
-
   cursor: default;
 }
 input,

diff --git a/src/style/widget/weui-tips/weui-dialog.less b/src/style/widget/weui-tips/weui-dialog.less
@@ -34,6 +34,7 @@
   flex-direction: column;
   max-height: 90%;
   outline: 0;
+  .hyphens;
 }
 .weui-dialog__hd {
   padding: 32px @weuiDialogGapWidth 16px;
@@ -51,8 +52,6 @@
   margin-bottom: 32px;
   font-size: 17px;
   line-height: 1.4;
-  .hyphens;
-
   color: @weuiTextColorDesc;
   &:first-child {
     min-height: 40px;
@@ -72,6 +71,7 @@
 .weui-dialog__ft {
   position: relative;
   display: flex;
+  align-items: center;
   &::after {
     content: " ";
     .setTopLine(@weuiDialogLineColor);
@@ -80,8 +80,8 @@
 .weui-dialog__btn {
   flex: 1;
   display: block;
-  line-height: (56-32)/17;
-  padding: 16px 0;
+  line-height: (64-40)/17;
+  padding: 20px 8px;
   font-size: 17px;
   color: @weuiDialogLinkColor;
   font-weight: 500;
@@ -108,6 +108,34 @@
 .weui-dialog__btn_default {
   color: var(--weui-FG-HALF);
 }
+.weui-dialog__btn_warn {
+  color: var(--weui-RED);
+}
+.weui-dialog__btn_disabled {
+  color: var(--weui-FG-2);
+}
+.weui-dialog_btn-wrap {
+  .weui-dialog__ft {
+    flex-direction: column;
+    align-items: initial;
+  }
+  .weui-dialog__btn {
+    &::after {
+      width: auto;
+      bottom: auto;
+      right: 0;
+      height: 1px;
+      transform: scaleY(0.5);
+      border-top: 1px solid var(--weui-DIALOG-LINE-COLOR);
+      border-left: 0;
+    }
+    &:first-child {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
 
 .weui-skin_android {
   .weui-dialog {