[Improvement] Cell: support number type title & value (#1073)

This commit is contained in:
neverland 2018-05-15 18:41:45 +08:00 committed by GitHub
parent e8aad7246c
commit 1da5e3637c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 7 deletions

View File

@ -71,8 +71,8 @@ Vue.use(Cell).use(CellGroup);
| Attribute | Description | Type | Default | | Attribute | Description | Type | Default |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| icon | Left Icon | `String` | - | | icon | Left Icon | `String` | - |
| title | Title | `String` | - | | title | Title | `String | Number` | - |
| value | Right text | `String` | - | | value | Right text | `String | Number` | - |
| label | Description below the title | `String` | - | | label | Description below the title | `String` | - |
| border | Whether to show inner border | `Boolean` | `true` | | border | Whether to show inner border | `Boolean` | `true` |
| center | Whether to center content vertically | `Boolean` | `true` | | center | Whether to center content vertically | `Boolean` | `true` |

View File

@ -13,14 +13,14 @@
<slot name="icon"> <slot name="icon">
<icon v-if="icon" :class="b('left-icon')" :name="icon" /> <icon v-if="icon" :class="b('left-icon')" :name="icon" />
</slot> </slot>
<div v-if="title || $slots.title" :class="b('title')"> <div v-if="isDef(title) || $slots.title" :class="b('title')">
<slot name="title"> <slot name="title">
<span v-text="title" /> <span v-text="title" />
<div v-if="label" v-text="label" :class="b('label')" /> <div v-if="label" v-text="label" :class="b('label')" />
</slot> </slot>
</div> </div>
<div <div
v-if="value || $slots.default" v-if="isDef(value) || $slots.default"
:class="b('value', { alone: !$slots.title && !title })" :class="b('value', { alone: !$slots.title && !title })"
> >
<slot> <slot>
@ -36,6 +36,7 @@
<script> <script>
import Icon from '../icon'; import Icon from '../icon';
import { isDef } from '../utils';
import RouterLink from '../mixins/router-link'; import RouterLink from '../mixins/router-link';
import create from '../utils/create-basic'; import create from '../utils/create-basic';
@ -50,12 +51,12 @@ export default create({
props: { props: {
icon: String, icon: String,
title: String,
label: String, label: String,
center: Boolean, center: Boolean,
isLink: Boolean, isLink: Boolean,
required: Boolean, required: Boolean,
clickable: Boolean, clickable: Boolean,
title: [String, Number],
value: [String, Number], value: [String, Number],
border: { border: {
type: Boolean, type: Boolean,
@ -64,6 +65,8 @@ export default create({
}, },
methods: { methods: {
isDef,
onClick() { onClick() {
this.$emit('click'); this.$emit('click');
this.routerLink(); this.routerLink();

View File

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

View File

@ -78,8 +78,8 @@ Vue.use(Cell).use(CellGroup);
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------| |-----------|-----------|-----------|-------------|
| icon | 左侧图标,可选值见 Icon 组件 | `String` | - | | icon | 左侧图标,可选值见 Icon 组件 | `String` | - |
| title | 左侧标题 | `String` | - | | title | 左侧标题 | `String | Number` | - |
| value | 右侧内容 | `String` | - | | value | 右侧内容 | `String | Number` | - |
| label | 标题下方的描述信息 | `String` | - | | label | 标题下方的描述信息 | `String` | - |
| border | 是否显示内边框 | `Boolean` | `true` | | border | 是否显示内边框 | `Boolean` | `true` |
| center | 是否使内容垂直居中 | `Boolean` | `false` | | center | 是否使内容垂直居中 | `Boolean` | `false` |