fix(modal): fix modal style and footer slot button

Author: yue.peng

packages/taro-ui-vue-demo/src/pages/action/modal/index.vue

@@ -1,7 +1,6 @@
 <template>
   <view class="page">
     <DocsHeader title="Modal 模态框" />
-
     <view class="doc-body">
       <!-- 基础模态框 -->
       <view class="panel">
@@ -10,7 +9,7 @@
         </view>
         <view class="panel__content">
           <view class="example-item">
-            <AtButton :on-click="handleClickShow(1)">
+            <AtButton :on-click="handleClickShow.bind(this,1)">
               打开基础模态框
             </AtButton>
           </view>
@@ -24,7 +23,7 @@
         </view>
         <view class="panel__content">
           <view class="example-item">
-            <AtButton :on-click="handleClickShow(2)">
+            <AtButton :on-click="handleClickShow.bind(this,2)">
               打开单个按钮模态框
             </AtButton>
           </view>
@@ -38,7 +37,7 @@
         </view>
         <view class="panel__content">
           <view class="example-item">
-            <AtButton :on-click="handleClickShow(3)">
+            <AtButton :on-click="handleClickShow.bind(this,3)">
               打开无标题模态框
             </AtButton>
           </view>
@@ -52,7 +51,7 @@
         </view>
         <view class="panel__content">
           <view class="example-item">
-            <AtButton :on-click="handleClickShow(4)">
+            <AtButton :on-click="handleClickShow.bind(this,4)">
               打开简化使用模态框
             </AtButton>
           </view>
@@ -66,7 +65,7 @@
         </view>
         <view class="panel__content">
           <view class="example-item">
-            <AtButton :on-click="handleClickShow(5)">
+            <AtButton :on-click="handleClickShow.bind(this,5)">
               打开城市索引
             </AtButton>
           </view>
@@ -77,7 +76,7 @@
     <!-- 基础模态框 -->
     <AtModal
       :is-opened="state.isOpened1"
-      :on-close="closeModal(1, 'Modal被关闭了')"
+      :on-close="closeModal.bind(null, 1, 'Modal被关闭了')"
     >
       <AtModalHeader>标题</AtModalHeader>
       <AtModalContent>
@@ -88,17 +87,17 @@
         </view>
       </AtModalContent>
       <AtModalAction>
-        <button :on-click="closeModal(1, '点击了取消')">
+        <button @tap="closeModal(1, '点击了取消')">
           取消
         </button>
-        <button :on-click="closeModal(1, '点击了确定')">
+        <Button @tap="closeModal(1, '点击了确定')">
           确定
-        </button>
+        </Button>
       </AtModalAction>
     </AtModal>
 
     <!-- 单个按钮 -->
-    <!-- <AtModal
+    <AtModal
       :is-opened="state.isOpened2"
       :on-close="closeModal.bind(this, 2, 'Modal被关闭了')"
     >
@@ -109,14 +108,14 @@
         </view>
       </AtModalContent>
       <AtModalAction>
-        <Button :on-click="closeModal.bind(this, 2, '点击了确定')">
+        <button @tap="closeModal(2, '点击了确定')">
           确定
-        </Button>
+        </button>
       </AtModalAction>
-    </AtModal> -->
+    </AtModal>
 
     <!-- 无标题 -->
-    <!-- <AtModal
+    <AtModal
       :key="3"
       :is-opened="state.isOpened3"
       content="这里是正文内容，欢迎加入京东凹凸实验室
@@ -127,10 +126,10 @@
       :on-confirm="closeModalConfirm.bind(this, 3, '点击了确认')"
       cancel-text="取消"
       confirm-text="确认"
-    /> -->
+    />
 
     <!-- 简化使用 -->
-    <!-- <AtModal
+    <AtModal
       :is-opened="state.isOpened4"
       title="标题"
       cancel-text="取消"
@@ -139,9 +138,9 @@
       :on-close="closeModal.bind(this, 4, 'Modal被关闭了')"
       :on-cancel="closeModal.bind(this, 4, '点击了取消')"
       :on-confirm="closeModalConfirm.bind(this, 4, '点击了确认')"
-    /> -->
+    />
 
-    <!-- <AtModal :is-opened="state.isOpened5">
+    <AtModal :is-opened="state.isOpened5">
       <AtModalContent>
         <AtIndexes
           :list="mockData"
@@ -153,7 +152,7 @@
           </view>
         </AtIndexes>
       </AtModalContent>
-    </AtModal> -->
+    </AtModal>
   </view>
 </template>
 

packages/taro-ui-vue/src/style/components/modal.scss

@@ -59,7 +59,7 @@ $at-modal-duration: 200ms;
     .at-modal__action {
       @include display-flex;
 
-      & > button {
+      & > taro-button-core, button {
         @include flex(auto);
         @include line(1);
         @include active;