feat: v2.6.21

Tencent · Dec 23, 2024 · 3c70323 · 3c70323
1 parent 50a521d
commit 3c70323
Show file tree

Hide file tree

Showing 13 changed files with 137 additions and 49 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,14 @@
+### v2.6.21 (2024-12-23)
+
+#### Features
+* feat: 新增weui-toast__wrp结构用于适配toast宽度动态变化
+
+#### Bugfixes
+* fix: 修复toast组件超长英文溢出问题
+* fix: 修复表单悬浮按钮、半屏弹窗悬浮按钮、验证码按钮、搜索按钮等未适配button组件新规范的问题
+
+
+
 ### v2.6.20 (2024-12-23)
 
 #### Features

diff --git a/dist/example/index.html b/dist/example/index.html
@@ -538,7 +538,7 @@ <h1 class="page__title">Button</h1>
       </label>
       </div>
       <div class="weui-bottom-fixed-opr" id="js_opr">
-        <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn">阅读并同意</a>
+        <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn"><span class="weui-btn__inner">阅读并同意</span></a>
         <a href="javascript:;" role="button" class="weui-btn weui-btn_default">取消</a>
       </div>
     </div>
@@ -1740,7 +1740,7 @@ <h2 class="weui-form__title">底部悬浮表单</h2>
           </span>
         </label>
       </div>
-      <div class="weui-form__opr-area">
+      <div class="weui-form__opr-area weui-bottom-fixed-opr">
         <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
       </div>
     </div>
@@ -2466,46 +2466,56 @@ <h1 class="page__title">Toast</h1>
     <!--BEGIN toast-->
     <div role="alert" id="toast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast">
-            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
-            <p class="weui-toast__content">已完成</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast">
+              <i class="weui-icon-success-no-circle weui-icon_toast"></i>
+              <p class="weui-toast__content">已完成</p>
+          </div>
         </div>
     </div>
 
     <!--BEGIN toast-->
     <div role="alert" id="textMoreToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast weui-toast_text-more">
-            <i class="weui-icon-warn weui-icon_toast"></i>
-            <p class="weui-toast__content">此处为长文案提示详情</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast weui-toast_text-more">
+              <i class="weui-icon-warn weui-icon_toast"></i>
+              <p class="weui-toast__content">长文案提示详情，长文案提示详情，长文案提示详情</p>
+          </div>
         </div>
     </div>
 
     <!--BEGIN toast-->
     <div role="alert" id="warnToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast">
-            <i class="weui-icon-warn weui-icon_toast"></i>
-            <p class="weui-toast__content">获取链接失败</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast">
+              <i class="weui-icon-warn weui-icon_toast"></i>
+              <p class="weui-toast__content">获取链接失败</p>
+          </div>
         </div>
     </div>
 
     <!-- loading toast -->
     <div role="alert" id="loadingToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast">
-            <span class="weui-primary-loading weui-icon_toast">
-              <span class="weui-primary-loading__dot"></span>
-            </span>
-            <p class="weui-toast__content">正在加载</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast">
+              <span class="weui-primary-loading weui-icon_toast">
+                <span class="weui-primary-loading__dot"></span>
+              </span>
+              <p class="weui-toast__content">正在加载</p>
+          </div>
         </div>
     </div>
 
     <!-- text toast -->
     <div role="alert" id="textToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast weui-toast_text">
-            <p class="weui-toast__content">文字提示</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast weui-toast_text">
+              <p class="weui-toast__content">文字提示</p>
+          </div>
         </div>
     </div>
 </div>

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.20",
+    "version": "2.6.21",
     "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/button/button_bottom_fixed.html b/src/example/button/button_bottom_fixed.html
@@ -11,7 +11,7 @@
       </label>
       </div>
       <div class="weui-bottom-fixed-opr" id="js_opr">
-        <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn">阅读并同意</a>
+        <a href="javascript:;" role="button" class="weui-btn weui-btn_primary" id="js_btn"><span class="weui-btn__inner">阅读并同意</span></a>
         <a href="javascript:;" role="button" class="weui-btn weui-btn_default">取消</a>
       </div>
     </div>

diff --git a/src/example/form/form_bottom_fixed.html b/src/example/form/form_bottom_fixed.html
@@ -86,7 +86,7 @@ <h2 class="weui-form__title">底部悬浮表单</h2>
           </span>
         </label>
       </div>
-      <div class="weui-form__opr-area">
+      <div class="weui-form__opr-area weui-bottom-fixed-opr">
         <button class="weui-btn weui-btn_primary" type="button" id="showTooltips">确定</button>
       </div>
     </div>

diff --git a/src/example/toast/toast.html b/src/example/toast/toast.html
@@ -14,46 +14,56 @@ <h1 class="page__title">Toast</h1>
     <!--BEGIN toast-->
     <div role="alert" id="toast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast">
-            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
-            <p class="weui-toast__content">已完成</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast">
+              <i class="weui-icon-success-no-circle weui-icon_toast"></i>
+              <p class="weui-toast__content">已完成</p>
+          </div>
         </div>
     </div>
 
     <!--BEGIN toast-->
     <div role="alert" id="textMoreToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast weui-toast_text-more">
-            <i class="weui-icon-warn weui-icon_toast"></i>
-            <p class="weui-toast__content">此处为长文案提示详情</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast weui-toast_text-more">
+              <i class="weui-icon-warn weui-icon_toast"></i>
+              <p class="weui-toast__content">长文案提示详情，长文案提示详情，长文案提示详情</p>
+          </div>
         </div>
     </div>
 
     <!--BEGIN toast-->
     <div role="alert" id="warnToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast">
-            <i class="weui-icon-warn weui-icon_toast"></i>
-            <p class="weui-toast__content">获取链接失败</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast">
+              <i class="weui-icon-warn weui-icon_toast"></i>
+              <p class="weui-toast__content">获取链接失败</p>
+          </div>
         </div>
     </div>
 
     <!-- loading toast -->
     <div role="alert" id="loadingToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast">
-            <span class="weui-primary-loading weui-icon_toast">
-              <span class="weui-primary-loading__dot"></span>
-            </span>
-            <p class="weui-toast__content">正在加载</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast">
+              <span class="weui-primary-loading weui-icon_toast">
+                <span class="weui-primary-loading__dot"></span>
+              </span>
+              <p class="weui-toast__content">正在加载</p>
+          </div>
         </div>
     </div>
 
     <!-- text toast -->
     <div role="alert" id="textToast" style="display: none;">
         <div class="weui-mask_transparent"></div>
-        <div class="weui-toast weui-toast_text">
-            <p class="weui-toast__content">文字提示</p>
+        <div class="weui-toast__wrp">
+          <div class="weui-toast weui-toast_text">
+              <p class="weui-toast__content">文字提示</p>
+          </div>
         </div>
     </div>
 </div>

diff --git a/src/style/base/mixin/btnWrapLayout.less b/src/style/base/mixin/btnWrapLayout.less
@@ -28,6 +28,7 @@
   .weui-btn:nth-last-child(n+2) + .weui-btn {
     margin: 0 8px;
     width: 136px;
+    min-width: 0;
     &:first-child {
       margin-left: 0;
     }

diff --git a/src/style/widget/weui-button/weui-button.less b/src/style/widget/weui-button/weui-button.less
@@ -38,6 +38,7 @@ input {
   &.weui-btn_inline,
   &.weui-btn_mini {
     width: auto;
+    min-width: 0;
   }
 }
 
@@ -49,7 +50,7 @@ input {
 
 .weui-btn_mini {
   display: inline-block;
-  width: auto;
+  min-width: 0;
   line-height: ~"calc((32 - 12) / 14)";
   padding: 6px 12px;
   font-size: 14px;
@@ -58,7 +59,7 @@ input {
 
 .weui-btn_xmini {
   display: inline-block;
-  width: auto;
+  min-width: 0;
   padding: 4px 12px;
   line-height: ~"calc((28 - 8) / 14)";
   font-size: 14px;

diff --git a/src/style/widget/weui-cell/weui-cells__group.less b/src/style/widget/weui-cell/weui-cells__group.less
@@ -181,7 +181,7 @@ body {
     font-size: 16px;
     padding: 0 12px;
     height: auto;
-    width: auto;
+    min-width: 0;
     line-height: 2;
     border-radius: 6px;
     color: @weuiBtnDefaultFontColor;

diff --git a/src/style/widget/weui-searchbar/weui-searchbar.less b/src/style/widget/weui-searchbar/weui-searchbar.less
@@ -237,7 +237,7 @@ input[type="search"]::-webkit-search-results-decoration {
   .weui-search-bar__search-btn {
     display: flex;
     align-items: center;
-    width: auto;
+    min-width: 0;
     padding: 8px 12px;
     font-size: 15px;
     font-weight: 400;

diff --git a/src/style/widget/weui-tips/weui-toast.less b/src/style/widget/weui-tips/weui-toast.less
@@ -37,8 +37,27 @@
   box-sizing: border-box;
   line-height: 1.4;
 }
+.weui-toast__wrp {
+  z-index: 5500;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .weui-toast {
+    position: static;
+    transform: none;
+    margin-top: -10%;
+  }
+}
 .weui-toast_text {
   padding: 12px 20px;
+  min-width: 0;
+  min-height: 0;
 }
 .weui-icon_toast {
   // 重置weui-icon权重
@@ -49,6 +68,7 @@
 
   display: block;
   margin-bottom: 16px;
+  flex-shrink: 0;
   &.weui-icon-success-no-circle {
     color: rgba(255, 255, 255, 0.9);
   }
@@ -84,6 +104,8 @@
 .weui-toast__content {
   font-size: 14px;
   .hyphens;
+
+  max-width: 100%;
 }
 
 // 多行文本场景