fix(accordion): 增加默认开启状态

jd-opensource · Oct 9, 2018 · b1cddfb · b1cddfb
1 parent b925a17
commit b1cddfb
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/@types/accordion.d.ts b/@types/accordion.d.ts
@@ -12,6 +12,8 @@ export interface Icon {
 }
 
 export interface AtAccordionProps extends AtComponent {
+  open?: boolean
+
   title?: string
 
   icon?: Icon

diff --git a/docs/markdown/accordion.md b/docs/markdown/accordion.md
@@ -84,6 +84,7 @@ import { AtAccordion } from 'taro-ui'
 
 | 参数       | 说明                                   | 类型    | 可选值                                                              | 默认值   |
 | ---------- | -------------------------------------- | ------- | ------------------------------------------------------------------- | -------- |
+| open | 是否默认开启 | Boolean  | - | false |
 | title | 标题 | String  | - | - |
 | icon | 图标，仅支持 AtIcon 支持的类型，object 属性有 value color size  | object  | - | - |
 

diff --git a/src/components/accordion/index.js b/src/components/accordion/index.js
@@ -10,6 +10,7 @@ import './index.scss'
 export default class AtAccordion extends AtComponent {
   static defaultProps = {
     isTest: false,
+    open: false,
     customStyle: '',
     className: '',
     title: '',
@@ -33,15 +34,17 @@ export default class AtAccordion extends AtComponent {
   constructor () {
     super(...arguments)
     // body 元素id
-    this.elemId = `at-accordion_body_${Math.ceil(Math.random() * 10e5).toString(36)}`
+    const randomId = `${(new Date()).getTime()}${Math.ceil(Math.random() * 10e5).toString(36)}`
+    this.elemId = `at-accordion_body_${randomId}`
     // body 高度
     this.bodyHeight = 0
     // 组件是否展开
-    this.isOpen = false
+    this.isOpen = this.props.open
     this.state = {
       bodyHeight: '',
     }
   }
+
   handleClick (e) {
     this.switch()
     this.props.onClick(e)
@@ -53,16 +56,19 @@ export default class AtAccordion extends AtComponent {
     if (env === Taro.ENV_TYPE.WEB) {
       setTimeout(() => {
         this.bodyHeight = document.getElementsByClassName(`${this.elemId}`)[0].scrollHeight
+        this.setState({
+          bodyHeight: this.isOpen ? this.bodyHeight : 0
+        })
       })
     } else if (env === Taro.ENV_TYPE.WEAPP) {
       const query = Taro.createSelectorQuery().in(this.$scope)
       query.select(`.${this.elemId}`).boundingClientRect(res => {
         this.bodyHeight = res.height
+        this.setState({
+          bodyHeight: this.isOpen ? this.bodyHeight : 0
+        })
       }).exec()
     }
-    this.setState({
-      bodyHeight: this.isOpen ? this.bodyHeight : 0
-    })
   }
 
   switch () {
@@ -85,6 +91,7 @@ export default class AtAccordion extends AtComponent {
       bodyHeight,
     } = this.state
 
+    console.log(bodyHeight)
     const contentStyle = {
       height: `${bodyHeight}px`
     }

diff --git a/src/pages/layout/accordion/index.js b/src/pages/layout/accordion/index.js
@@ -52,7 +52,7 @@ export default class CardPage extends Taro.Component {
                     />
                   </AtList>
                 </AtAccordion>
-                <AtAccordion title='标题二'>
+                <AtAccordion open title='默认开启'>
                   <AtList hasBorder={false}>
                     <AtListItem
                       title='标题文字'