feat(Col): add click event (#4169)

This commit is contained in:
neverland 2019-08-21 10:14:15 +08:00 committed by GitHub
parent 66f3aac389
commit 6b8fbfb290
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 1 deletions

View File

@ -106,3 +106,9 @@ Setting `type` to `flex` to enable flex layout
| span | number of column the grid spans | `string | number` | - | | span | number of column the grid spans | `string | number` | - |
| offset | number of spacing on the left side of the grid | `string | number` | - | | offset | number of spacing on the left side of the grid | `string | number` | - |
| tag | Custom element tag | `string` | `div` | | tag | Custom element tag | `string` | `div` |
### Col Events
| Event | Description | Arguments |
|------|------|------|
| click | Triggered when click col | event: Event |

View File

@ -109,3 +109,9 @@ Layout 组件提供了`24列栅格`,通过在`Col`上添加`span`属性设置
| span | 列元素宽度 | `string | number` | - | - | | span | 列元素宽度 | `string | number` | - | - |
| offset | 列元素偏移距离 | `string | number` | - | - | | offset | 列元素偏移距离 | `string | number` | - | - |
| tag | 自定义元素标签 | `string` | `div` | - | | tag | 自定义元素标签 | `string` | `div` | - |
### Col Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| click | 点击时触发 | event: Event |

View File

@ -23,10 +23,20 @@ export default createComponent({
} }
}, },
methods: {
onClick(event) {
this.$emit('click', event);
}
},
render() { render() {
const { span, offset } = this; const { span, offset } = this;
return ( return (
<this.tag class={bem({ [span]: span, [`offset-${offset}`]: offset })} style={this.style}> <this.tag
style={this.style}
class={bem({ [span]: span, [`offset-${offset}`]: offset })}
onClick={this.onClick}
>
{this.slots()} {this.slots()}
</this.tag> </this.tag>
); );

View File

@ -0,0 +1,9 @@
import Col from '..';
import { mount } from '../../../test/utils';
test('Col click event', () => {
const wrapper = mount(Col);
wrapper.trigger('click');
expect(wrapper.emitted('click')).toBeTruthy();
});