更新 modal 的 axml

compiled/alipay/demo/pages/Modal/index.axml

@@ -1,20 +1,20 @@
 <modal
   content="人在天边月上明"
-  visible="{{basicVisible}}"
+  visible="{{ basicVisible }}"
   onClose="handleClose"
   primaryButtonText="我知道了"
   onPrimaryButtonTap="handlePrimaryButtonTap" />
 <modal
   title="带标题的弹窗"
   content="人在天边月上明"
-  visible="{{withTitleVisible}}"
+  visible="{{ withTitleVisible }}"
   onClose="handleClose"
   primaryButtonText="我知道了"
   onPrimaryButtonTap="handlePrimaryButtonTap" />
 <modal
   title="确定删除吗？"
   content="删除后无法恢复"
-  visible="{{basicTwoVisible}}"
+  visible="{{ basicTwoVisible }}"
   onClose="handleClose"
   primaryButtonText="确定"
   secondaryButtonText="取消"
@@ -23,7 +23,7 @@
 <modal
   title="标题"
   content="人在天边月上明"
-  visible="{{basicThreeVisible}}"
+  visible="{{ basicThreeVisible }}"
   onClose="handleClose"
   primaryButtonText="主按钮"
   secondaryButtonText="更多"
@@ -35,15 +35,15 @@
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
-  visible="{{focusOneVisible}}"
+  visible="{{ focusOneVisible }}"
   onClose="handleClose"
   primaryButtonText="我知道了"
   onPrimaryButtonTap="handlePrimaryButtonTap" />
 <modal
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
-  visible="{{focusTwoVisible}}"
+  visible="{{ focusTwoVisible }}"
   onClose="handleClose"
   primaryButtonText="我知道了"
   secondaryButtonText="辅助操作"
@@ -53,7 +53,7 @@
   title="强调模式"
   content="主操作按钮是Button，右上角可有关闭按钮，是用来强调让用户去注意到主操作"
   type="focus"
-  visible="{{focusThreeVisible}}"
+  visible="{{ focusThreeVisible }}"
   onClose="handleClose"
   primaryButtonText="我知道了"
   secondaryButtonText="辅助操作"
@@ -64,15 +64,15 @@
 <modal
   title="确定删除吗？"
   content="删除后无法恢复"
-  visible="{{customVisible}}"
+  visible="{{ customVisible }}"
   onClose="handleClose"
   primaryButtonText="删除"
   primaryButtonStyle="color:red;"
   secondaryButtonText="取消"
   onPrimaryButtonTap="handlePrimaryButtonTap"
   onSecondaryButtonTap="handleSecondaryButtonTap" />
 <modal
-  visible="{{customBodyVisible}}"
+  visible="{{ customBodyVisible }}"
   onClose="handleClose">
   <view class="body">
     <image
@@ -88,7 +88,7 @@
 </modal>
 <container
   title="基础用法"
-  class="list">
+  className="list">
   <button
     data-field="basicVisible"
     onTap="handleOpen">
@@ -112,7 +112,7 @@
 </container>
 <container
   title="强调模式"
-  class="list">
+  className="list">
   <button
     data-field="focusOneVisible"
     onTap="handleOpen">
@@ -131,7 +131,7 @@
 </container>
 <container
   title="自定义"
-  class="list">
+  className="list">
   <button
     data-field="customVisible"
     onTap="handleOpen">

compiled/alipay/demo/pages/Modal/index.js

@@ -1,42 +1,42 @@
 Page({
-  data: {
-    basicVisible: false,
-    withTitleVisible: false,
-    basicTwoVisible: false,
-    basicThreeVisible: false,
-    focusOneVisible: false,
-    focusTwoVisible: false,
-    focusThreeVisible: false,
-    customVisible: false,
-    customBodyVisible: false,
-  },
-  handleOpen(e) {
-    const { field } = e.target.dataset;
-    this.setData({ [field]: true });
-  },
-  handleClose() {
-    this.setData({
-      basicVisible: false,
-      withTitleVisible: false,
-      basicTwoVisible: false,
-      basicThreeVisible: false,
-      focusOneVisible: false,
-      focusTwoVisible: false,
-      focusThreeVisible: false,
-      customVisible: false,
-      customBodyVisible: false,
-    });
-  },
-  handlePrimaryButtonTap() {
-    this.handleClose();
-    my.showToast({ content: '点击主按钮', duration: 1000 });
-  },
-  handleSecondaryButtonTap() {
-    this.handleClose();
-    my.showToast({ content: '点击辅助按钮', duration: 1000 });
-  },
-  handleCancelButtonTap() {
-    this.handleClose();
-    my.showToast({ content: '点击取消按钮', duration: 1000 });
-  },
+    data: {
+        basicVisible: false,
+        withTitleVisible: false,
+        basicTwoVisible: false,
+        basicThreeVisible: false,
+        focusOneVisible: false,
+        focusTwoVisible: false,
+        focusThreeVisible: false,
+        customVisible: false,
+        customBodyVisible: false,
+    },
+    handleOpen(e) {
+        const { field } = e.target.dataset;
+        this.setData({ [field]: true });
+    },
+    handleClose() {
+        this.setData({
+            basicVisible: false,
+            withTitleVisible: false,
+            basicTwoVisible: false,
+            basicThreeVisible: false,
+            focusOneVisible: false,
+            focusTwoVisible: false,
+            focusThreeVisible: false,
+            customVisible: false,
+            customBodyVisible: false,
+        });
+    },
+    handlePrimaryButtonTap() {
+        this.handleClose();
+        my.showToast({ content: '点击主按钮', duration: 1000 });
+    },
+    handleSecondaryButtonTap() {
+        this.handleClose();
+        my.showToast({ content: '点击辅助按钮', duration: 1000 });
+    },
+    handleCancelButtonTap() {
+        this.handleClose();
+        my.showToast({ content: '点击取消按钮', duration: 1000 });
+    },
 });

compiled/alipay/src/Modal/index.axml

@@ -1,119 +1,122 @@
 <import-sjs
   from="./index.sjs"
-  name="{getDirection}" />
-<popup
-  className="ant-modal {{className || ''}}"
-  style="{{style || ''}}"
-  maskClassName="{{maskClassName}}"
-  maskStyle="{{maskStyle}}"
-  visible="{{visible}}"
-  duration="{{duration}}"
+  name="utils" />
+
+<ant-popup
+  className="ant-modal {{ className || '' }}"
+  style="{{ style || '' }}"
+  maskClassName="{{ maskClassName }}"
+  maskStyle="{{ maskStyle }}"
+  visible="{{ visible }}"
+  duration="{{ duration }}"
   position="center"
-  animation="{{animation}}"
-  zIndex="{{zIndex}}"
-  destroyOnClose="{{destroyOnClose}}"
+  animation="{{ animation }}"
+  zIndex="{{ zIndex }}"
+  destroyOnClose="{{ destroyOnClose }}"
   onClose="onMaskClose">
   <slot slot="content">
     <view
-      class="ant-modal-body {{bodyClassName || ''}}"
-      style="{{bodyStyle || ''}}">
-      <slot name="header"></slot>
+      class="ant-modal-body {{ bodyClassName || '' }}"
+      style="{{ bodyStyle || '' }}">
+      <slot name="header" />
       <slot name="title">
         <view
-          class="ant-modal-body-title"
-          a:if="{{ title }}">
-          {{title}}
+          a:if="{{ title }}"
+          class="ant-modal-body-title">
+          {{ title }}
         </view>
       </slot>
+
       <slot name="content">
         <view
-          class="ant-modal-body-content"
-          a:if="{{ content }}">
-          {{content}}
+          a:if="{{ content }}"
+          class="ant-modal-body-content">
+          {{ content }}
         </view>
       </slot>
+
       <slot name="footer">
         <view
           a:if="{{ type === 'focus' }}"
           class="ant-modal-body-footer-focus">
-          <button
+          <ant-button
             type="primary"
-            class="ant-modal-body-footer-focus-primary"
-            style="{{primaryButtonStyle || ''}}"
+            className="ant-modal-body-footer-focus-primary"
+            style="{{ primaryButtonStyle || '' }}"
             onTap="onPrimaryButtonTap">
-            {{primaryButtonText}}
-          </button>
+            {{ primaryButtonText }}
+          </ant-button>
           <view
+            a:if="{{ secondaryButtonText }}"
             class="ant-modal-body-footer-focus-secondary"
-            a:if="{{secondaryButtonText}}"
-            style="{{secondaryButtonStyle || ''}}"
+            style="{{ secondaryButtonStyle || '' }}"
             onTap="onSecondaryButtonTap">
-            {{secondaryButtonText}}
+            {{ secondaryButtonText }}
           </view>
           <view
+            a:if="{{ cancelButtonText }}"
             class="ant-modal-body-footer-focus-cancel"
-            a:if="{{cancelButtonText}}"
-            style="{{cancelButtonStyle || ''}}"
+            style="{{ cancelButtonStyle || '' }}"
             onTap="onCancelButtonTap">
-            {{cancelButtonText}}
+            {{ cancelButtonText }}
           </view>
         </view>
         <view
-          a:elif="{{ getDirection(primaryButtonText,secondaryButtonText,cancelButtonText,type) === 'horizontal' }}"
+          a:elif="{{ utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'horizontal' }}"
           class="ant-modal-body-footer-horizontal">
           <view
+            a:if="{{ cancelButtonText }}"
             class="ant-modal-body-footer-horizontal-cancel"
-            a:if="{{cancelButtonText}}"
-            style="{{cancelButtonStyle || ''}}"
+            style="{{ cancelButtonStyle || '' }}"
             onTap="onCancelButtonTap">
-            {{cancelButtonText}}
+            {{ cancelButtonText }}
           </view>
           <view
+            a:if="{{ secondaryButtonText }}"
             class="ant-modal-body-footer-horizontal-secondary"
-            a:if="{{secondaryButtonText}}"
-            style="{{secondaryButtonStyle || ''}}"
+            style="{{ secondaryButtonStyle || '' }}"
             onTap="onSecondaryButtonTap">
-            {{secondaryButtonText}}
+            {{ secondaryButtonText }}
           </view>
           <view
+            a:if="{{ primaryButtonText }}"
             class="ant-modal-body-footer-horizontal-primary"
-            a:if="{{primaryButtonText}}"
-            style="{{primaryButtonStyle || ''}}"
+            style="{{ primaryButtonStyle || '' }}"
             onTap="onPrimaryButtonTap">
-            {{primaryButtonText}}
+            {{ primaryButtonText }}
           </view>
         </view>
         <view
-          a:elif="{{ getDirection(primaryButtonText,secondaryButtonText,cancelButtonText,type) === 'vertical' }}"
+          a:elif="{{ utils.getDirection(primaryButtonText, secondaryButtonText, cancelButtonText, type) === 'vertical' }}"
           class="ant-modal-body-footer-vertical">
           <view
+            a:if="{{ primaryButtonText }}"
             class="ant-modal-body-footer-vertical-primary"
-            a:if="{{primaryButtonText}}"
-            style="{{primaryButtonStyle || ''}}"
+            style="{{ primaryButtonStyle || '' }}"
             onTap="onPrimaryButtonTap">
-            {{primaryButtonText}}
+            {{ primaryButtonText }}
           </view>
           <view
+            a:if="{{ secondaryButtonText }}"
             class="ant-modal-body-footer-vertical-secondary"
-            a:if="{{secondaryButtonText}}"
-            style="{{secondaryButtonStyle || ''}}"
+            style="{{ secondaryButtonStyle || '' }}"
             onTap="onSecondaryButtonTap">
-            {{secondaryButtonText}}
+            {{ secondaryButtonText }}
           </view>
           <view
+            a:if="{{ cancelButtonText }}"
             class="ant-modal-body-footer-vertical-cancel"
-            a:if="{{cancelButtonText}}"
-            style="{{cancelButtonStyle || ''}}"
+            style="{{ cancelButtonStyle || '' }}"
             onTap="onCancelButtonTap">
-            {{cancelButtonText}}
+            {{ cancelButtonText }}
           </view>
         </view>
       </slot>
     </view>
   </slot>
-  <icon
-    a:if="{{ type==='focus' && closable }}"
+  <ant-icon
+    a:if="{{ type === 'focus' && closable }}"
     type="CloseOutline"
     onTap="onClose"
     className="ant-modal-close" />
-</popup>
+</ant-popup>

compiled/alipay/src/Modal/index.json

@@ -1,8 +1,8 @@
 {
   "component": true,
   "usingComponents": {
-    "button": "../Button/index",
-    "icon": "../Icon/index",
-    "popup": "../Popup/index"
+    "ant-button": "../Button/index",
+    "ant-icon": "../Icon/index",
+    "ant-popup": "../Popup/index"
   }
 }