fix: 修复 tooltip slot 插入和使用方式

ant-design · Jan 21, 2024 · 569c562 · 569c562
1 parent 7f17487
commit 569c562
Show file tree

Hide file tree

Showing 13 changed files with 127 additions and 38 deletions.
diff --git a/compiled/alipay/demo/pages/Form/index.axml b/compiled/alipay/demo/pages/Form/index.axml
@@ -5,6 +5,18 @@
   tooltip="用户名说明"
   allowClear
   ref="handleRef" />
+<form-input
+  label="密码"
+  name="password"
+  placeholder="请输入密码"
+  allowClear
+  ref="handleRef">
+  <view slot="tooltip">
+    <icon
+      onTap="showToast"
+      type="QuestionCircleOutline" />
+  </view>
+</form-input>
 <form-input
   label="地址"
   name="address"
@@ -88,3 +100,8 @@
   </ant-button>
   <ant-button onTap="reset">重置</ant-button>
 </view>
+
+<toast
+  content="密码的自定义 tooltip"
+  visible="{{toastShow}}"
+  onClose="handleCloseToast" />
diff --git a/compiled/alipay/demo/pages/Form/index.js b/compiled/alipay/demo/pages/Form/index.js
@@ -18,6 +18,7 @@ Page({
             { value: 'football', text: '⚽️' },
             { value: 'badminton', text: '🏸️' },
         ],
+        toastShow: false,
     },
     onLoad() {
         this.form = new Form();
@@ -44,4 +45,14 @@ Page({
             }, 2000);
         });
     },
+    showToast() {
+        this.setData({
+            toastShow: true,
+        });
+    },
+    handleCloseToast() {
+        this.setData({
+            toastShow: false,
+        });
+    },
 });
diff --git a/compiled/alipay/demo/pages/Form/index.json b/compiled/alipay/demo/pages/Form/index.json
@@ -15,6 +15,8 @@
     "form-upload-image": "../../../src/Form/FormImageUpload/index",
     "form-rate": "../../../src/Form/FormRate/index",
     "form-textarea": "../../../src/Form/FormTextarea/index",
-    "ant-button": "../../../src/Button/index"
+    "ant-button": "../../../src/Button/index",
+    "icon": "../../../src/Icon/index",
+    "toast": "../../../src/Toast/index"
   }
 }
diff --git a/compiled/alipay/src/Form/FormItem/index.axml b/compiled/alipay/src/Form/FormItem/index.axml
@@ -12,16 +12,17 @@
         style="{{ labelWidth ? 'width: ' + labelWidth : '' }}"
         class="ant-form-item-label {{ disabled ? 'ant-form-item-label-disabled' : '' }} ant-form-item-label-{{ position }} {{ required ? 'ant-form-item-label-required' : '' }}">
         <view class="ant-form-item-label-text">{{ label }}</view>
-        <slot name="tooltip">
-          <popover a:if="{{ tooltip }}">
-            <view
-              slot="content"
-              class="ant-form-item-label-help-content">
-              {{ tooltip }}
-            </view>
-            <ant-icon type="QuestionCircleOutline" />
-          </popover>
-        </slot>
+        <popover a:if="{{ tooltip }}">
+          <view
+            slot="content"
+            class="ant-form-item-label-help-content">
+            {{ tooltip }}
+          </view>
+          <ant-icon type="QuestionCircleOutline" />
+        </popover>
+        <slot
+          a:else
+          name="tooltip" />
       </view>
       <view class="ant-form-item-field ant-form-item-field-{{ position }}">
         <slot />

diff --git a/compiled/wechat/demo/pages/Form/index.js b/compiled/wechat/demo/pages/Form/index.js
@@ -62,6 +62,7 @@ Page({
             { value: 'football', text: '⚽️' },
             { value: 'badminton', text: '🏸️' },
         ],
+        toastShow: false,
     },
     onLoad: function () {
         var _this = this;
@@ -95,4 +96,14 @@ Page({
             });
         });
     },
+    showToast: function () {
+        this.setData({
+            toastShow: true,
+        });
+    },
+    handleCloseToast: function () {
+        this.setData({
+            toastShow: false,
+        });
+    },
 });
diff --git a/compiled/wechat/demo/pages/Form/index.json b/compiled/wechat/demo/pages/Form/index.json
@@ -15,6 +15,8 @@
     "form-upload-image": "../../../src/Form/FormImageUpload/index",
     "form-rate": "../../../src/Form/FormRate/index",
     "form-textarea": "../../../src/Form/FormTextarea/index",
-    "ant-button": "../../../src/Button/index"
+    "ant-button": "../../../src/Button/index",
+    "icon": "../../../src/Icon/index",
+    "toast": "../../../src/Toast/index"
   }
 }
diff --git a/compiled/wechat/demo/pages/Form/index.wxml b/compiled/wechat/demo/pages/Form/index.wxml
@@ -5,6 +5,18 @@
   tooltip="用户名说明"
   allowClear
   bind:ref="handleRef" />
+<form-input
+  label="密码"
+  name="password"
+  placeholder="请输入密码"
+  allowClear
+  bind:ref="handleRef">
+  <view slot="tooltip">
+    <icon
+      bind:tap="showToast"
+      type="QuestionCircleOutline" />
+  </view>
+</form-input>
 <form-input
   label="地址"
   name="address"
@@ -88,3 +100,8 @@
   </ant-button>
   <ant-button bind:tap="reset">重置</ant-button>
 </view>
+
+<toast
+  content="密码的自定义 tooltip"
+  visible="{{toastShow}}"
+  onClose="handleCloseToast" />
diff --git a/compiled/wechat/src/Form/FormItem/index.wxml b/compiled/wechat/src/Form/FormItem/index.wxml
@@ -12,16 +12,17 @@
         style="{{ labelWidth ? 'width: ' + labelWidth : '' }}"
         class="ant-form-item-label {{ disabled ? 'ant-form-item-label-disabled' : '' }} ant-form-item-label-{{ position }} {{ required ? 'ant-form-item-label-required' : '' }}">
         <view class="ant-form-item-label-text">{{ label }}</view>
-        <slot name="tooltip">
-          <popover wx:if="{{ tooltip }}">
-            <view
-              slot="content"
-              class="ant-form-item-label-help-content">
-              {{ tooltip }}
-            </view>
-            <ant-icon type="QuestionCircleOutline" />
-          </popover>
-        </slot>
+        <popover wx:if="{{ tooltip }}">
+          <view
+            slot="content"
+            class="ant-form-item-label-help-content">
+            {{ tooltip }}
+          </view>
+          <ant-icon type="QuestionCircleOutline" />
+        </popover>
+        <slot
+          wx:else
+          name="tooltip" />
       </view>
       <view class="ant-form-item-field ant-form-item-field-{{ position }}">
         <slot />

diff --git a/demo/pages/Form/index.axml.tsx b/demo/pages/Form/index.axml.tsx
@@ -14,6 +14,7 @@ import FormUploadImage from '../../../src/Form/FormImageUpload/index.axml';
 import FormRate from '../../../src/Form/FormRate/index.axml';
 import FormTextarea from '../../../src/Form/FormTextarea/index.axml';
 import AntButton from '../../../src/Button/index.axml';
+import Icon from '../../../src/Icon/index.axml';
 
 export default ({
   fruitList,
@@ -32,6 +33,17 @@ export default ({
       allowClear
       ref="handleRef"
     />
+    <FormInput
+      label="密码"
+      name="password"
+      placeholder="请输入密码"
+      allowClear
+      ref="handleRef"
+    >
+      <View slot="tooltip">
+        <Icon onTap="showToast" type="QuestionCircleOutline" />
+      </View>
+    </FormInput>
     <FormInput
       label="地址"
       name="address"
@@ -99,5 +111,11 @@ export default ({
       </AntButton>
       <AntButton onTap="reset">重置</AntButton>
     </View>
+
+    <toast
+      content="密码的自定义 tooltip"
+      visible="{{toastShow}}"
+      onClose="handleCloseToast"
+    />
   </Page>
 );
diff --git a/demo/pages/Form/index.json5 b/demo/pages/Form/index.json5
@@ -22,6 +22,8 @@
     "form-upload-image": "../../../src/Form/FormImageUpload/index",
     "form-rate": "../../../src/Form/FormRate/index",
     "form-textarea": "../../../src/Form/FormTextarea/index",
-    "ant-button": "../../../src/Button/index"
+    "ant-button": "../../../src/Button/index",
+    "icon": "../../../src/Icon/index",
+    "toast": "../../../src/Toast/index"
   }
 }
diff --git a/demo/pages/Form/index.ts b/demo/pages/Form/index.ts
@@ -31,6 +31,7 @@ Page({
       { value: 'football', text: '⚽️' },
       { value: 'badminton', text: '🏸️' },
     ],
+    toastShow: false,
   },
   onLoad() {
     this.form = new Form();
@@ -78,5 +79,14 @@ Page({
       }, 2000);
     });
   },
-  /// #endif
+  showToast() {
+    this.setData({
+      toastShow: true,
+    });
+  },
+  handleCloseToast() {
+    this.setData({
+      toastShow: false,
+    });
+  },
 });
diff --git a/src/Form/FormItem/index.axml.tsx b/src/Form/FormItem/index.axml.tsx
@@ -43,19 +43,16 @@ export default (
               }`}
             >
               <View class="ant-form-item-label-text">{label}</View>
-              <Slot name="tooltip">
-                {tooltip && (
-                  <Popover>
-                    <View
-                      slot="content"
-                      class="ant-form-item-label-help-content"
-                    >
-                      {tooltip}
-                    </View>
-                    <AntIcon type="QuestionCircleOutline" />
-                  </Popover>
-                )}
-              </Slot>
+              {tooltip ? (
+                <Popover>
+                  <View slot="content" class="ant-form-item-label-help-content">
+                    {tooltip}
+                  </View>
+                  <AntIcon type="QuestionCircleOutline" />
+                </Popover>
+              ) : (
+                <Slot name="tooltip" />
+              )}
             </View>
           )}
           <View class={`ant-form-item-field ant-form-item-field-${position}`}>

diff --git a/src/Form/index.md b/src/Form/index.md
@@ -98,7 +98,7 @@ Form 表单。包含数据录入、校验以及对应样式。Form 组件需要
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选 `default` `success` `error` `validating` | string | - |
 | help | 提示信息，如不设置，则会根据校验规则自动生成 | string | - |
 | header | 顶部 slot，接收 errors、status | slot | - |
-| tooltip | 表单项提示信息 | string | - |
+| tooltip | 表单项提示信息 | string\|slot | - |
 | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false |
 | message | 校验错误信息。如不设置，则会根据校验规则自动生成 | string | false |
 | requiredMark | 必填选填的标记样式，可选 `asterisk` `text-required` `text-optional` | string | asterisk |