feat(Modal): 优化样式，完善 DEMO 页

jd-opensource · Aug 10, 2018 · c258eff · c258eff
1 parent 52cb4a2
commit c258eff
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 25 deletions.
diff --git a/src/components/modal/action/index.scss b/src/components/modal/action/index.scss
@@ -9,14 +9,16 @@
 
     & > button {
       @include flex(auto);
+      @include line(1);
 
-      border: 0;
-      outline: 0;
+      min-width: 160px;
       height: 88px;
-      font-size: 28px;
-      background-color: white;
-      border-radius: 0;
+      font-size: $font-size-base;
       line-height: 86px;
+      outline: 0;
+      border: 0;
+      border-radius: 0;
+      background-color: white;
 
       &::after {
         border: 0;

diff --git a/src/components/modal/content/index.scss b/src/components/modal/content/index.scss
@@ -1,6 +1,8 @@
+@import "../../../style/theme/default";
+
 .at-modal-content {
   min-height: 180px;
+  color: $color-text-base;
+  font-size: $font-size-base;
   box-sizing: border-box;
-  font-size: 28px;
-  color: #333;
 }
diff --git a/src/components/modal/header/index.scss b/src/components/modal/header/index.scss
@@ -3,9 +3,10 @@
 
 .at-modal-header {
   @include border-thin-bottom($color-grey-4);
+  @include line(1);
 
-  color: #333;
-  font-size: 32px;
-  padding: 20px;
+  color: $color-text-base;
+  font-size: $font-size-lg;
+  padding: $spacing-v-md $spacing-h-lg;
   text-align: center;
 }
diff --git a/src/components/modal/index.scss b/src/components/modal/index.scss
@@ -1,6 +1,8 @@
 @import "../../style/mixins/index.scss";
 @import "../../style/theme/default.scss";
 
+$modal-width: 540px;
+
 .at-modal {
   position: fixed;
   width: 100%;
@@ -23,9 +25,9 @@
   &__container {
     @include absolute-center();
 
-    width: 540px;
+    width: $modal-width;
     overflow: hidden;
-    border-radius: 12px;
+    border-radius: $border-radius-lg;
     background-color: $color-white;
   }
 }

diff --git a/src/pages/action/action-sheet/index.js b/src/pages/action/action-sheet/index.js
@@ -25,13 +25,9 @@ export default class ActionSheetPage extends Taro.Component {
   handleClick = e => {
     const { type } = e.currentTarget.dataset
 
-    if (type === '1') {
-      this.setState({ isOpened1: true })
-    } else if (type === '2') {
-      this.setState({ isOpened2: true })
-    } else if (type === '3') {
-      this.setState({ isOpened3: true })
-    }
+    this.setState({
+      [`isOpened${type}`]: true
+    })
   }
 
   showToast = name => {

diff --git a/src/pages/action/modal/index.js b/src/pages/action/modal/index.js
@@ -31,10 +31,15 @@ export default class ModalPage extends Taro.Component {
     })
   }
 
-  closeModal = name => {
+  closeModal = (name, msg) => {
     this.setState({
       [`isOpened${name}`]: false
     })
+
+    Taro.showToast({
+      icon: 'none',
+      title: msg
+    })
   }
 
   render () {
@@ -44,23 +49,25 @@ export default class ModalPage extends Taro.Component {
         <DocsHeader title='Modal 模态框' />
 
         <View className='doc-body'>
+          {/* 单个按钮 */}
           <View className='panel'>
             <View className='panel__title'>单个按钮</View>
             <View className='panel__content'>
               <View className='example-item'>
                 <AtButton onClick={this.handleClick.bind(this, 'Single')}>
-                  打开单按钮Modal
+                  打开单按钮 Modal
                 </AtButton>
               </View>
             </View>
           </View>
 
+          {/* 多个按钮 */}
           <View className='panel'>
             <View className='panel__title'>多个按钮</View>
             <View className='panel__content'>
               <View className='example-item'>
                 <AtButton onClick={this.handleClick.bind(this, 'Multi')}>
-                  打开多按钮Modal
+                  打开多按钮 Modal
                 </AtButton>
               </View>
             </View>
@@ -77,10 +84,10 @@ export default class ModalPage extends Taro.Component {
             </View>
           </AtModalContent>
           <AtModalAction>
-            <Button onClick={this.closeModal.bind(this, 'Multi')}>取消</Button>
+            <Button onClick={this.closeModal.bind(this, 'Multi', '点击了取消')}>取消</Button>
             <Button
               className='serious-button'
-              onClick={this.closeModal.bind(this, 'Multi')}
+              onClick={this.closeModal.bind(this, 'Multi', '点击了确定')}
             >
               确定
             </Button>
@@ -97,7 +104,7 @@ export default class ModalPage extends Taro.Component {
             </View>
           </AtModalContent>
           <AtModalAction>
-            <Button onClick={this.closeModal.bind(this, 'Single')}>取消</Button>
+            <Button onClick={this.closeModal.bind(this, 'Single', '点击了取消')}>取消</Button>
           </AtModalAction>
         </AtModal>
       </View>