feat: footer 组件支持自定义处理链接点击事件 (#45)

Alibaba-mp · Oct 9, 2020 · 97fbf1a · 97fbf1a
1 parent 04cddd4
commit 97fbf1a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 4 deletions.
diff --git a/src/footer/index.axml b/src/footer/index.axml
@@ -6,7 +6,12 @@
   </view>
   <view a:if="{{type === 'link'}}" class="am-footer-extend am-footer-extend__{{type}}">
     <block a:for="{{extend}}">
-      <navigator hover-class="am-footer-link__hover" hover-start-time="0" hover-stay-time="0" class="am-footer-link" url="{{item.link}}">{{item.text}}</navigator>
+      <block a:if="{{isCustomLinkHandler}}">
+        <text class="am-footer-link" data-item="{{item}}" onTap="onLinkTap">{{item.text}}</text>
+      </block>
+      <block a:else>
+        <navigator hover-class="am-footer-link__hover" hover-start-time="0" hover-stay-time="0" class="am-footer-link" url="{{item.link}}">{{item.text}}</navigator>
+      </block>
       <text class="am-footer-link__line" a:if="{{index < extend.length -1}}">|</text>
     </block>
   </view>
@@ -16,13 +21,13 @@
       <view class="am-footer-end__text" a:if="{{showEndIcon}}">
         <am-icon
         a:if="{{!iconURL}}"
-          type="{{iconName?iconName:'selected'}}" 
-          size="{{iconSize?(iconSize > maxSize?maxSize:iconSize):defaultSize}}" 
+          type="{{iconName?iconName:'selected'}}"
+          size="{{iconSize?(iconSize > maxSize?maxSize:iconSize):defaultSize}}"
           color="#999"
         />
         <image
           a:else
-          src="{{iconURL}}" 
+          src="{{iconURL}}"
           style="
             width: {{iconSize?(iconSize > maxSize?maxSize:iconSize):defaultSize}}{{valueUnit}};
             height: {{iconSize?(iconSize > maxSize?maxSize:iconSize):defaultSize}}{{valueUnit}};

diff --git a/src/footer/index.md b/src/footer/index.md
@@ -20,6 +20,7 @@
 | content | String | - | - | 页脚文本内容 | - | - |
 | extend | Array | - | - | 页脚部分的链接、logo 等信息 | - | - |
 | onBrandTap | EventHandle | () => {} | - | 品牌 logo 事件回调 | - | - |
+| onLinkTap | EventHandle | () => {} | - | 链接事件回调 | [1.1.7](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
 | showEndIcon | Boolean | false | - | type="end" 时的 footer 组件是否以 icon 方式展示，为 true 将不会显示 `content` 的文本内容 | [1.0.4](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
 | iconName | String | selected | - | 使用 am-icon，具体的值可参考 am-icon 的 type 值 | [1.0.4](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
 | iconURL | String | - | - | 使用网络图片。当确定使用网络图片后，`iconName` 将失效；且 网络图片目前仅支持宽高相同且小于等于 44rpx； | [1.0.4](https://www.npmjs.com/package/mini-ali-ui?activeTab=versions) | - |
@@ -29,6 +30,7 @@
 
 ## Bug & Tip
 * `onBrandTap` 仅在 `type: brand` 中有效，且是无链接的品牌 logo；
+* `onLinkTap` 仅在 `type: link` 中有效，用于点击链接时进行自定义处理，参数为当前 extend item；
 * 当选择不同的 `type` 时，`extend` 中的值也将会有所不同；
   * `normal`：无 `extend`；
   * `guide`：`extend` 的值为 `[{ link: '', text: '',},]`；

diff --git a/src/footer/index.ts b/src/footer/index.ts
@@ -23,12 +23,15 @@ Component({
     defaultSize: fmtUnit(18),
     maxSize: fmtUnit(22),
     valueUnit: fmtUnit('px'),
+    isCustomLinkHandler: false,
   },
   didMount() {
     this.compatAntui();
+    this.checkCustomLinkHandler();
   },
   didUpdate() {
     this.compatAntui();
+    this.checkCustomLinkHandler();
   },
   methods: {
     compatAntui() {
@@ -53,6 +56,12 @@ Component({
         });
       }
     },
+    checkCustomLinkHandler() {
+      const { onLinkTap } = this.props;
+      this.setData({
+        isCustomLinkHandler: typeof onLinkTap === 'function',
+      });
+    },
     onBrandClick(e) {
       const brandLink = e.currentTarget.dataset.url;
       const { onBrandTap, extend } = this.props;
@@ -65,5 +74,10 @@ Component({
         onBrandTap(extend[e.currentTarget.dataset.index]);
       }
     },
+    onLinkTap(e) {
+      const item = e.currentTarget.dataset.item;
+      const { onLinkTap } = this.props;
+      onLinkTap(item);
+    },
   },
 });