fix: ActionSheet

Author: psaren

src/components/action-sheet/body/index.jsx

@@ -9,7 +9,8 @@ export default {
     },
   },
   render() {
+    console.log('this.$slots.default', this.$slots.default)
     const rootClass = classNames('at-action-sheet__body', this.className)
-    return <view className={rootClass}>{this.$slots.default}</view>
+    return <view class={rootClass}>{this.$slots.default}</view>
   },
 }

src/components/action-sheet/body/item/index.jsx

@@ -21,8 +21,8 @@ export default {
     const rootClass = classNames('at-action-sheet__item', this.className)
 
     return (
-      <view className={rootClass} onTap={this.handleClick}>
-        {this.slots.default}
+      <view class={rootClass} onTap={this.handleClick}>
+        {this.$slots.default}
       </view>
     )
   },

src/components/action-sheet/footer/index.jsx

@@ -21,7 +21,7 @@ export default {
     const rootClass = classNames('at-action-sheet__footer', this.className)
 
     return (
-      <view onTap={this.handleClick} className={rootClass}>
+      <view onTap={this.handleClick} class={rootClass}>
         {this.$slots.default}
       </view>
     )

src/components/action-sheet/header/index.jsx

@@ -11,6 +11,6 @@ export default {
   render() {
     const rootClass = classNames('at-action-sheet__header', this.className)
 
-    return <view className={rootClass}>{this.$slots.default}</view>
+    return <view class={rootClass}>{this.$slots.default}</view>
   },
 }

src/components/action-sheet/index.jsx

@@ -71,9 +71,9 @@ export default {
     )
 
     return (
-      <view className={rootClass} onTouchMove={this.handleTouchMove}>
-        <view onTap={this.close} className="at-action-sheet__overlay" />
-        <view className="at-action-sheet__container">
+      <view class={rootClass} onTouchMove={this.handleTouchMove}>
+        <view onTap={this.close} class="at-action-sheet__overlay" />
+        <view class="at-action-sheet__container">
           {title && <ActionSheetHeader>{title}</ActionSheetHeader>}
           <ActionSheetBody>{this.$slots.default}</ActionSheetBody>
           {cancelText && (

src/pages/index/demo.jsx

@@ -0,0 +1,20 @@
+import ActionSheet from '../../components/action-sheet/index'
+import ActionSheetItem from '../../components/action-sheet/body/item/index'
+export default {
+  name: 'Demo',
+  components: {
+    ActionSheet,
+    ActionSheetItem,
+  },
+  render() {
+    return (
+      <view>
+        index page!
+        <ActionSheet isOpened>
+          <ActionSheetItem>按钮一</ActionSheetItem>
+          <ActionSheetItem>按钮二</ActionSheetItem>
+        </ActionSheet>
+      </view>
+    )
+  },
+}

src/pages/index/index.vue

@@ -2,31 +2,30 @@
   <view 
     class="index"
   >
+    <ActionSheet is-opened>
+      <ActionSheetItem>
+        按钮一
+      </ActionSheetItem>
+      <ActionSheetItem>
+        按钮二
+      </ActionSheetItem>
+    </ActionSheet>
     <Badge dot>
       <Icon
         class-name="at-icon at-icon-settings"
         size="30"
         color="#F00"
       />
     </Badge>
-    <!-- <Button 
+    <Button 
       loading 
       type="primary"
       :on-click="onClick"
     >
       hello
-    </Button> -->
+    </Button>
     <Fab>fab</Fab>
     <Avatar text="111" />
-    <Countdown
-      is-card 
-      is-show-day
-      :format="{ hours: ':', minutes: ':', seconds: '' }"
-      :day="2"
-      :hours="1"
-      :minutes="1"
-      :seconds="10"
-    />
     <Curtain 
       :is-opened="show"
       :on-close="changeShow"
@@ -109,13 +108,15 @@ import Badge from '../../components/badge/index'
 import Icon from '../../components/icon/Icon.vue'
 import Fab from '../../components/fab/Fab.jsx'
 import Avatar from '../../components/avatar/index.jsx'
-import Countdown from '../../components/countdown/index.jsx'
+// import Countdown from '../../components/countdown/index.jsx'
 import Curtain from '../../components/curtain/index.jsx'
 // import LoadMore from '../../components/load-more/index.jsx'
 import Noticebar from '../../components/noticebar/index.jsx'
 import Tag from '../../components/tag/index.jsx'
 import Timeline from '../../components/timeline/index.jsx'
 import Divider from '../../components/divider/index.jsx'
+import ActionSheet from '../../components/action-sheet/index.jsx'
+import ActionSheetItem from '../../components/action-sheet/body/item/index.jsx'
 
 export default {
   name: 'Index',
@@ -125,13 +126,15 @@ export default {
     Fab,
     Avatar,
     Badge,
-    Countdown,
+    // Countdown,
     Curtain,
     // LoadMore,
     Noticebar,
     Tag,
     Timeline,
     Divider,
+    ActionSheet,
+    ActionSheetItem,
   },
   data() {
     return {