feat(docs): 增加tag文档

jd-opensource · Aug 7, 2018 · 881bc76 · 881bc76
1 parent a8ab561
commit 881bc76
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 21 deletions.
diff --git a/docs/markdown/tag.md b/docs/markdown/tag.md
@@ -26,16 +26,17 @@ import AtTag from 'taro-ui'
 
 ## Tag 参数
 
-| 微信小程序 | H5 | 参数     | 说明             | 类型    | 可选值        | 默认值 |
-|:-----------|:---|:---------|:-----------------|:--------|:--------------|:-------|
-| √          | √  | size     | 大小尺寸         | String  | normal, small | normal |
-| √          | √  | type     | 样式类型         | String  | primary       | -      |
-| √          | √  | circle   | 标签是否大圆角   | Boolean | -             | false  |
-| √          | √  | active   | 标签是否为选中态 | Boolean | -             | false  |
-| √          | √  | disabled | 标签是否为禁用态 | Boolean | -             | false  |
+| 微信小程序 | H5 | 参数     | 说明         | 类型    | 可选值        | 默认值 |
+|:-----------|:---|:---------|:-------------|:--------|:--------------|:-------|
+| √          | √  | size     | 大小尺寸     | String  | normal, small | normal |
+| √          | √  | type     | 样式类型     | String  | primary       | -      |
+| √          | √  | name     | 标签名字     | String  | -             | -      |
+| √          | √  | circle   | 是否大圆角   | Boolean | -             | false  |
+| √          | √  | active   | 是否为选中态 | Boolean | -             | false  |
+| √          | √  | disabled | 是否为禁用态 | Boolean | -             | false  |
 
 ## Tag 事件
 
-| 微信小程序 | H5 | 事件名称 | 说明           | 返回参数            |
-|:-----------|:---|:---------|:---------------|:--------------------|
-| √          | √  | onClick  | 点击标签时触发 | (event, { active }) |
+| 微信小程序 | H5 | 事件名称 | 说明                               | 返回参数         |
+|:-----------|:---|:---------|:-----------------------------------|:-----------------|
+| √          | √  | onClick  | 点击标签时触发，返回标签名字和状态 | { name, active } |
diff --git a/src/components/tag/index.js b/src/components/tag/index.js
@@ -25,14 +25,13 @@ export default class AtTag extends Taro.Component {
 
   onClick () {
     if (!this.props.disabled) {
-      console.log('===', this.state, this.props)
       const active = !this.state.active
-      console.log(active)
+      console.log('>>>', this.props.name, active)
       this.setState({
         active,
       })
       // debugger
-      this.props.onClick(...arguments, { active })
+      this.props.onClick({ name: this.props.name, active })
     }
   }
 
@@ -64,6 +63,7 @@ export default class AtTag extends Taro.Component {
 AtTag.defaultProps = {
   size: 'normal',
   type: '',
+  name: '',
   circle: false,
   active: false,
   disabled: false,
@@ -72,6 +72,7 @@ AtTag.defaultProps = {
 AtTag.propTypes = {
   size: PropTypes.oneOf(['normal', 'small']),
   type: PropTypes.oneOf(['', 'primary']),
+  name: PropTypes.string,
   circle: PropTypes.bool,
   active: PropTypes.bool,
   disabled: PropTypes.bool,

diff --git a/src/pages/view/tag/index.js b/src/pages/view/tag/index.js
@@ -38,16 +38,16 @@ export default class TagPage extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='subitem'>
-                  <AtTag circle onClick={this.onClick.bind(this)}>标签</AtTag>
+                  <AtTag name='tag-1' circle onClick={this.onClick.bind(this)}>标签</AtTag>
                 </View>
                 <View className='subitem'>
-                  <AtTag>标签</AtTag>
+                  <AtTag name='tag-2'>标签</AtTag>
                 </View>
                 <View className='subitem'>
-                  <AtTag circle active>标签</AtTag>
+                  <AtTag name='tag-3' circle active>标签</AtTag>
                 </View>
                 <View className='subitem'>
-                  <AtTag active>标签</AtTag>
+                  <AtTag name='tag-4' active>标签</AtTag>
                 </View>
               </View>
             </View>
@@ -59,16 +59,16 @@ export default class TagPage extends Taro.Component {
             <View className='panel__content'>
               <View className='example-item'>
                 <View className='subitem'>
-                  <AtTag type='primary' circle>标签</AtTag>
+                  <AtTag name='tag-5' type='primary' circle>标签</AtTag>
                 </View>
                 <View className='subitem'>
-                  <AtTag type='primary'>标签</AtTag>
+                  <AtTag name='tag-6' type='primary'>标签</AtTag>
                 </View>
                 <View className='subitem'>
-                  <AtTag type='primary' circle active>标签</AtTag>
+                  <AtTag name='tag-7' type='primary' circle active>标签</AtTag>
                 </View>
                 <View className='subitem'>
-                  <AtTag type='primary' active>标签</AtTag>
+                  <AtTag name='tag-8' type='primary' active>标签</AtTag>
                 </View>
               </View>
             </View>