feat: tooltip 支持 slot (#1034)

* feat: tooltip 支持 slot * fix: 修复 tooltip slot 插入和使用方式 fix: 修复 build 失败 fix: 提交编译后的文件
ant-design · Jan 22, 2024 · 29fb40b · 29fb40b
1 parent 0e27268
commit 29fb40b
Show file tree

Hide file tree

Showing 57 changed files with 325 additions and 7 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/FormCascaderPicker/index.axml b/compiled/alipay/src/Form/FormCascaderPicker/index.axml
@@ -52,6 +52,12 @@
     </cascader-picker>
   </view>
 
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
+
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormCheckboxGroup/index.axml b/compiled/alipay/src/Form/FormCheckboxGroup/index.axml
@@ -26,6 +26,11 @@
         index="{{ props.index }}" />
     </checkbox-group>
   </view>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormDatePicker/index.axml b/compiled/alipay/src/Form/FormDatePicker/index.axml
@@ -54,6 +54,11 @@
         slot="suffix" />
     </date-picker>
   </view>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormImageUpload/index.axml b/compiled/alipay/src/Form/FormImageUpload/index.axml
@@ -21,6 +21,11 @@
     onPreview="onPreview"
     onBeforeUpload="{{ handleBeforeUpload ? handleBeforeUpload : 'handleBeforeUpload' }}"
     onChooseImageError="onChooseImageError" />
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormInput/index.axml b/compiled/alipay/src/Form/FormInput/index.axml
@@ -41,6 +41,11 @@
       slot="suffix"
       name="suffix" />
   </ant-input>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormItem/index.axml b/compiled/alipay/src/Form/FormItem/index.axml
@@ -20,6 +20,9 @@
           </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/alipay/src/Form/FormPicker/index.axml b/compiled/alipay/src/Form/FormPicker/index.axml
@@ -50,6 +50,11 @@
         slot="suffix" />
     </picker>
   </view>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormRadioGroup/index.axml b/compiled/alipay/src/Form/FormRadioGroup/index.axml
@@ -27,6 +27,12 @@
     </radio-group>
   </view>
 
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
+
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormRangePicker/index.axml b/compiled/alipay/src/Form/FormRangePicker/index.axml
@@ -57,6 +57,11 @@
         slot="suffix" />
     </range-picker>
   </view>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormRate/index.axml b/compiled/alipay/src/Form/FormRate/index.axml
@@ -29,6 +29,11 @@
       </slot>
     </view>
   </rate>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormSelector/index.axml b/compiled/alipay/src/Form/FormSelector/index.axml
@@ -24,6 +24,11 @@
       onSelectMin="onSelectMin"
       onChange="onChange" />
   </view>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormSlider/index.axml b/compiled/alipay/src/Form/FormSlider/index.axml
@@ -31,6 +31,11 @@
       onChange="onChange"
       onAfterChange="onAfterChange" />
   </view>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormStepper/index.axml b/compiled/alipay/src/Form/FormStepper/index.axml
@@ -29,6 +29,11 @@
       onConfirm="onConfirm"
       onFocus="onFocus" />
   </view>
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormSwitch/index.axml b/compiled/alipay/src/Form/FormSwitch/index.axml
@@ -23,6 +23,12 @@
       onChange="onChange" />
   </view>
 
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
+
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/FormTextarea/index.axml b/compiled/alipay/src/Form/FormTextarea/index.axml
@@ -25,6 +25,11 @@
     onBlur="onBlur"
     onFocus="onFocus"
     onConfirm="onConfirm" />
+  <view
+    a:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/alipay/src/Form/index.md b/compiled/alipay/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 |

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/FormCascaderPicker/index.wxml b/compiled/wechat/src/Form/FormCascaderPicker/index.wxml
@@ -52,6 +52,12 @@
     </cascader-picker>
   </view>
 
+  <view
+    wx:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
+
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/wechat/src/Form/FormCheckboxGroup/index.wxml b/compiled/wechat/src/Form/FormCheckboxGroup/index.wxml
@@ -26,6 +26,11 @@
         index="{{ props.index }}" />
     </checkbox-group>
   </view>
+  <view
+    wx:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">
     <slot name="extra">{{ extra }}</slot>
   </view>

diff --git a/compiled/wechat/src/Form/FormDatePicker/index.wxml b/compiled/wechat/src/Form/FormDatePicker/index.wxml
@@ -54,6 +54,11 @@
         slot="suffix" />
     </date-picker>
   </view>
+  <view
+    wx:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">{{ extra }}</view>
   <view
     slot="header"

diff --git a/compiled/wechat/src/Form/FormImageUpload/index.wxml b/compiled/wechat/src/Form/FormImageUpload/index.wxml
@@ -21,6 +21,11 @@
     onPreview="onPreview"
     onBeforeUpload="{{ handleBeforeUpload ? handleBeforeUpload : 'handleBeforeUpload' }}"
     onChooseImageError="onChooseImageError" />
+  <view
+    wx:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">{{ extra }}</view>
   <view
     slot="header"

diff --git a/compiled/wechat/src/Form/FormInput/index.wxml b/compiled/wechat/src/Form/FormInput/index.wxml
@@ -41,6 +41,11 @@
       slot="suffix"
       name="suffix" />
   </ant-input>
+  <view
+    wx:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">{{ extra }}</view>
   <view
     slot="header"

diff --git a/compiled/wechat/src/Form/FormItem/index.wxml b/compiled/wechat/src/Form/FormItem/index.wxml
@@ -20,6 +20,9 @@
           </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/compiled/wechat/src/Form/FormPicker/index.wxml b/compiled/wechat/src/Form/FormPicker/index.wxml
@@ -50,6 +50,11 @@
         slot="suffix" />
     </picker>
   </view>
+  <view
+    wx:if="{{ !tooltip }}"
+    slot="tooltip">
+    <slot name="tooltip" />
+  </view>
   <view slot="extra">{{ extra }}</view>
   <view
     slot="header"