[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-cell-group>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
:label="$t('desc')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('largeSize')">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
size="large"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
size="large"
|
||||
:label="$t('desc')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showIcon')">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
icon="location-o"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('valueOnly')">
|
||||
<van-cell :value="$t('content')" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('showArrow')">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
is-link
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
is-link
|
||||
:value="$t('content')"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
is-link
|
||||
arrow-direction="down"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('router')">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
is-link
|
||||
url="//youzan.github.io/vant/mobile.html"
|
||||
/>
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
is-link
|
||||
to="index"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('groupTitle')">
|
||||
<van-cell-group :title="`${$t('group')} 1`">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
<van-cell-group :title="`${$t('group')} 2`">
|
||||
<van-cell
|
||||
:title="$t('cell')"
|
||||
:value="$t('content')"
|
||||
/>
|
||||
</van-cell-group>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('advancedUsage')">
|
||||
<van-cell
|
||||
:value="$t('content')"
|
||||
is-link
|
||||
>
|
||||
<template #title>
|
||||
<span class="custom-title">{{ $t('cell') }}</span>
|
||||
<van-tag type="danger">{{ $t('tag') }}</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
<van-cell
|
||||
icon="shop-o"
|
||||
:title="$t('cell')"
|
||||
>
|
||||
<template #right-icon>
|
||||
<van-icon
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
</template>
|
||||
</van-cell>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
cell: '单元格',
|
||||
valueOnly: '只设置 value',
|
||||
showIcon: '展示图标',
|
||||
showArrow: '展示箭头',
|
||||
largeSize: '单元格大小',
|
||||
group: '分组',
|
||||
groupTitle: '分组标题',
|
||||
router: '页面跳转'
|
||||
},
|
||||
'en-US': {
|
||||
cell: 'Cell title',
|
||||
valueOnly: 'Value only',
|
||||
showIcon: 'Left Icon',
|
||||
showArrow: 'Link',
|
||||
largeSize: 'Size',
|
||||
group: 'Group',
|
||||
groupTitle: 'Group Title',
|
||||
router: 'Router'
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-cell {
|
||||
.custom-title {
|
||||
margin-right: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,141 @@
|
||||
# Cell
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
|
||||
Vue.use(Cell).use(CellGroup);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" value="Content" />
|
||||
<van-cell title="Cell title" value="Content" label="Description" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Size
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" value="Content" size="large" />
|
||||
<van-cell title="Cell title" value="Content" size="large" label="Description" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Left Icon
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" icon="location-o" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Value only
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell value="Content" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Link
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" is-link />
|
||||
<van-cell title="Cell title" is-link value="Content" />
|
||||
<van-cell title="Cell title" is-link arrow-direction="down" value="Content" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Router
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="Cell title" is-link url="//youzan.github.io/vant/mobile.html" />
|
||||
<van-cell title="Cell title" is-link to="index" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Group Title
|
||||
|
||||
```html
|
||||
<van-cell-group title="Group 1">
|
||||
<van-cell title="Cell title" value="Content" />
|
||||
</van-cell-group>
|
||||
<van-cell-group title="Group 2">
|
||||
<van-cell title="Cell title" value="Content" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### Advanced Usage
|
||||
|
||||
```html
|
||||
<van-cell value="Content" is-link>
|
||||
<template slot="title">
|
||||
<span class="custom-title">Cell title</span>
|
||||
<van-tag type="danger">Tag</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-cell title="Cell title" icon="shop-o">
|
||||
<van-icon
|
||||
slot="right-icon"
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
</van-cell>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### CellGroup Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| title | Group title | `String` | - |
|
||||
| border | Whether to show outer border | `Boolean` | `true` |
|
||||
|
||||
### Cell Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| icon | Left Icon | `String` | - |
|
||||
| title | Title | `String | Number` | - |
|
||||
| value | Right text | `String | Number` | - |
|
||||
| label | Description below the title | `String` | - |
|
||||
| size | Size，can be set to `large` | `String` | - |
|
||||
| border | Whether to show inner border | `Boolean` | `true` |
|
||||
| center | Whether to center content vertically | `Boolean` | `true` |
|
||||
| url | Link URL | `String` | - |
|
||||
| to | Target route of the link, same as to of `vue-router` | `String | Object` | - |
|
||||
| replace | If true, the navigation will not leave a history record | `Boolean` | `false` |
|
||||
| clickable | Whether to show click feedback when clicked | `Boolean` | `false` |
|
||||
| is-link | Whether to show link icon | `Boolean` | `false` |
|
||||
| required | Whether to show required mark | `Boolean` | `false` |
|
||||
| arrow-direction | Can be set to `left` `up` `down` | `String` | - |
|
||||
| title-style | Title style | `any` | - |
|
||||
| title-class | Title className | `any` | - |
|
||||
| value-class | Value className | `any` | - |
|
||||
| label-class | Label className | `any` | - |
|
||||
|
||||
### Cell Events
|
||||
|
||||
| Event | Description | Arguments |
|
||||
|------|------|------|
|
||||
| click | Triggered when click cell | - |
|
||||
|
||||
### Cell Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | Default slot |
|
||||
| icon | Custom icon |
|
||||
| title | Custom title |
|
||||
| label | Custom label |
|
||||
| right-icon | Custom right icon |
|
||||
@@ -0,0 +1,100 @@
|
||||
@import '../style/var';
|
||||
@import "../style/mixins/hairline";
|
||||
|
||||
.van-cell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: @cell-vertical-padding @cell-horizontal-padding;
|
||||
overflow: hidden;
|
||||
color: @cell-text-color;
|
||||
font-size: @cell-font-size;
|
||||
line-height: @cell-line-height;
|
||||
background-color: @cell-background-color;
|
||||
|
||||
&:not(:last-child)::after {
|
||||
.hairline-bottom(@cell-border-color, 15px);
|
||||
}
|
||||
|
||||
&--borderless::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__label {
|
||||
margin-top: @cell-label-margin-top;
|
||||
color: @cell-label-color;
|
||||
font-size: @cell-label-font-size;
|
||||
line-height: @cell-label-line-height;
|
||||
}
|
||||
|
||||
&__title,
|
||||
&__value {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__value {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: @cell-value-color;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
|
||||
&--alone {
|
||||
color: @text-color;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
&__left-icon,
|
||||
&__right-icon {
|
||||
min-width: 1em;
|
||||
height: @cell-line-height;
|
||||
font-size: @cell-icon-size;
|
||||
line-height: @cell-line-height;
|
||||
}
|
||||
|
||||
&__left-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&__right-icon {
|
||||
margin-left: 5px;
|
||||
color: @cell-right-icon-color;
|
||||
}
|
||||
|
||||
&--clickable {
|
||||
&:active {
|
||||
background-color: @cell-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
&--required {
|
||||
overflow: visible;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
color: @cell-required-color;
|
||||
font-size: @cell-font-size;
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
|
||||
&--center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&--large {
|
||||
padding-top: @cell-large-vertical-padding;
|
||||
padding-bottom: @cell-large-vertical-padding;
|
||||
|
||||
.van-cell__title {
|
||||
font-size: @cell-large-title-font-size;
|
||||
}
|
||||
|
||||
.van-cell__label {
|
||||
font-size: @cell-large-label-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,109 @@
|
||||
import { createNamespace, isDef } from '../utils';
|
||||
import { cellProps, SharedCellProps } from './shared';
|
||||
import { emit, inherit } from '../utils/functional';
|
||||
import { routeProps, RouteProps, functionalRoute } from '../utils/router';
|
||||
import Icon from '../icon';
|
||||
|
||||
// Types
|
||||
import { CreateElement, RenderContext } from 'vue/types';
|
||||
import { ScopedSlot, DefaultSlots } from '../utils/types';
|
||||
import { Mods } from '../utils/create/bem';
|
||||
|
||||
export type CellProps = RouteProps &
|
||||
SharedCellProps & {
|
||||
arrowDirection?: string;
|
||||
};
|
||||
|
||||
export type CellSlots = DefaultSlots & {
|
||||
icon?: ScopedSlot;
|
||||
title?: ScopedSlot;
|
||||
label?: ScopedSlot;
|
||||
extra?: ScopedSlot;
|
||||
'right-icon'?: ScopedSlot;
|
||||
};
|
||||
|
||||
export type CellEvents = {
|
||||
onClick?(event: Event): void;
|
||||
};
|
||||
|
||||
const [createComponent, bem] = createNamespace('cell');
|
||||
|
||||
function Cell(
|
||||
h: CreateElement,
|
||||
props: CellProps,
|
||||
slots: CellSlots,
|
||||
ctx: RenderContext<CellProps>
|
||||
) {
|
||||
const { icon, size, title, label, value, isLink, arrowDirection } = props;
|
||||
|
||||
const showTitle = slots.title || isDef(title);
|
||||
const showValue = slots.default || isDef(value);
|
||||
const showLabel = slots.label || isDef(label);
|
||||
|
||||
const Label = showLabel && (
|
||||
<div class={[bem('label'), props.labelClass]}>
|
||||
{slots.label ? slots.label() : label}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Title = showTitle && (
|
||||
<div class={[bem('title'), props.titleClass]} style={props.titleStyle}>
|
||||
{slots.title ? slots.title() : <span>{title}</span>}
|
||||
{Label}
|
||||
</div>
|
||||
);
|
||||
|
||||
const Value = showValue && (
|
||||
<div class={[bem('value', { alone: !slots.title && !title }), props.valueClass]}>
|
||||
{slots.default ? slots.default() : <span>{value}</span>}
|
||||
</div>
|
||||
);
|
||||
|
||||
const LeftIcon = slots.icon
|
||||
? slots.icon()
|
||||
: icon && <Icon class={bem('left-icon')} name={icon} />;
|
||||
|
||||
const rightIconSlot = slots['right-icon'];
|
||||
const RightIcon = rightIconSlot
|
||||
? rightIconSlot()
|
||||
: isLink && (
|
||||
<Icon
|
||||
class={bem('right-icon')}
|
||||
name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
|
||||
/>
|
||||
);
|
||||
|
||||
function onClick(event: Event) {
|
||||
emit(ctx, 'click', event);
|
||||
functionalRoute(ctx);
|
||||
}
|
||||
|
||||
const classes: Mods = {
|
||||
center: props.center,
|
||||
required: props.required,
|
||||
borderless: !props.border,
|
||||
clickable: isLink || props.clickable
|
||||
};
|
||||
|
||||
if (size) {
|
||||
classes[size] = size;
|
||||
}
|
||||
|
||||
return (
|
||||
<div class={bem(classes)} onClick={onClick} {...inherit(ctx)}>
|
||||
{LeftIcon}
|
||||
{Title}
|
||||
{Value}
|
||||
{RightIcon}
|
||||
{slots.extra && slots.extra()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Cell.props = {
|
||||
...cellProps,
|
||||
...routeProps,
|
||||
arrowDirection: String
|
||||
};
|
||||
|
||||
export default createComponent<CellProps, CellEvents, CellSlots>(Cell);
|
||||
@@ -0,0 +1,36 @@
|
||||
export type SharedCellProps = {
|
||||
icon?: string;
|
||||
size?: string;
|
||||
border: boolean;
|
||||
center?: boolean;
|
||||
isLink?: boolean;
|
||||
required?: boolean;
|
||||
clickable?: boolean;
|
||||
titleStyle?: any;
|
||||
titleClass?: any;
|
||||
valueClass?: any;
|
||||
labelClass?: any;
|
||||
title?: string | number;
|
||||
value?: string | number;
|
||||
label?: string | number;
|
||||
}
|
||||
|
||||
export const cellProps = {
|
||||
icon: String,
|
||||
size: String,
|
||||
center: Boolean,
|
||||
isLink: Boolean,
|
||||
required: Boolean,
|
||||
clickable: Boolean,
|
||||
titleStyle: null as any,
|
||||
titleClass: null as any,
|
||||
valueClass: null as any,
|
||||
labelClass: null as any,
|
||||
title: [String, Number],
|
||||
value: [String, Number],
|
||||
label: [String, Number],
|
||||
border: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,102 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span>
|
||||
<div class="van-cell__label">描述信息</div>
|
||||
</div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
<div class="van-cell van-cell--large">
|
||||
<div class="van-cell__title"><span>单元格</span>
|
||||
<div class="van-cell__label">描述信息</div>
|
||||
</div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell"><i class="van-icon van-icon-location-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__value van-cell__value--alone"><span>内容</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow-down van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="van-cell-group__title">分组 1</div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell-group__title">分组 2</div>
|
||||
<div class="van-cell-group van-hairline--top-bottom">
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title"><span>单元格</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="van-cell van-cell--clickable">
|
||||
<div class="van-cell__title"><span class="custom-title">单元格</span> <span class="van-tag" style="background-color: rgb(255, 68, 68);">标签</span></div>
|
||||
<div class="van-cell__value"><span>内容</span></div><i class="van-icon van-icon-arrow van-cell__right-icon">
|
||||
<!----></i>
|
||||
</div>
|
||||
<div class="van-cell"><i class="van-icon van-icon-shop-o van-cell__left-icon">
|
||||
<!----></i>
|
||||
<div class="van-cell__title"><span>单元格</span></div><i class="van-icon van-icon-search" style="line-height: inherit;">
|
||||
<!----></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,17 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`arrow direction 1`] = `
|
||||
<div class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
|
||||
<!----></i></div>
|
||||
`;
|
||||
|
||||
exports[`render slot 1`] = `
|
||||
<div class="van-cell">Custom Icon<div class="van-cell__title">Custom Title<div class="van-cell__label">Custom Label</div>
|
||||
</div>Custom Extra</div>
|
||||
`;
|
||||
|
||||
exports[`title-style prop 1`] = `
|
||||
<div class="van-cell">
|
||||
<div class="van-cell__title" style="color: red;"><span>title</span></div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,58 @@
|
||||
import Cell from '..';
|
||||
import { mount } from '../../../test/utils';
|
||||
|
||||
test('click event', () => {
|
||||
const click = jest.fn();
|
||||
const wrapper = mount(Cell, {
|
||||
context: {
|
||||
on: {
|
||||
click
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
wrapper.trigger('click');
|
||||
expect(click).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
test('arrow direction', () => {
|
||||
const wrapper = mount(Cell, {
|
||||
propsData: {
|
||||
isLink: true,
|
||||
arrowDirection: 'down'
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('render slot', () => {
|
||||
const wrapper = mount({
|
||||
template: `
|
||||
<cell>
|
||||
<template v-slot:icon>Custom Icon</template>
|
||||
<template v-slot:title>Custom Title</template>
|
||||
<template v-slot:label>Custom Label</template>
|
||||
<template v-slot:extra>Custom Extra</template>
|
||||
</cell>
|
||||
`,
|
||||
components: {
|
||||
Cell
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test('title-style prop', () => {
|
||||
const wrapper = mount(Cell, {
|
||||
propsData: {
|
||||
title: 'title',
|
||||
titleStyle: {
|
||||
color: 'red'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
@@ -0,0 +1,147 @@
|
||||
# Cell 单元格
|
||||
|
||||
### 引入
|
||||
``` javascript
|
||||
import { Cell, CellGroup } from 'vant';
|
||||
|
||||
Vue.use(Cell).use(CellGroup);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。
|
||||
|
||||
```html
|
||||
<van-cell-group>
|
||||
<van-cell title="单元格" value="内容" />
|
||||
<van-cell title="单元格" value="内容" label="描述信息" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 单元格大小
|
||||
|
||||
通过`size`属性可以控制单元格的大小
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" value="内容" size="large" />
|
||||
<van-cell title="单元格" value="内容" size="large" label="描述信息" />
|
||||
```
|
||||
|
||||
### 展示图标
|
||||
|
||||
通过`icon`属性在标题左侧展示图标
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" icon="location-o" />
|
||||
```
|
||||
|
||||
### 只设置 value
|
||||
|
||||
只设置`value`时会向左对齐
|
||||
|
||||
```html
|
||||
<van-cell value="内容" />
|
||||
```
|
||||
|
||||
### 展示箭头
|
||||
|
||||
传入`is-link`属性则会在右侧显示箭头，并且可以通过传入`arrow-direction`属性控制箭头方向
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" is-link />
|
||||
<van-cell title="单元格" is-link value="内容" />
|
||||
<van-cell title="单元格" is-link arrow-direction="down" value="内容" />
|
||||
```
|
||||
|
||||
### 页面跳转
|
||||
|
||||
可以通过`url`属性进行页面跳转，或通过`to`属性进行 vue-router 跳转
|
||||
|
||||
```html
|
||||
<van-cell title="单元格" is-link url="//youzan.github.io/vant/mobile.html" />
|
||||
<van-cell title="单元格" is-link to="index" />
|
||||
```
|
||||
|
||||
### 分组标题
|
||||
|
||||
通过`CellGroup`的`title`属性可以指定分组标题
|
||||
|
||||
```html
|
||||
<van-cell-group title="分组1">
|
||||
<van-cell title="单元格" value="内容" />
|
||||
</van-cell-group>
|
||||
<van-cell-group title="分组2">
|
||||
<van-cell title="单元格" value="内容" />
|
||||
</van-cell-group>
|
||||
```
|
||||
|
||||
### 高级用法
|
||||
|
||||
如以上用法不能满足你的需求，可以使用对应的`slot`来自定义显示的内容
|
||||
|
||||
```html
|
||||
<van-cell value="内容" is-link>
|
||||
<template slot="title">
|
||||
<span class="custom-title">单元格</span>
|
||||
<van-tag type="danger">标签</van-tag>
|
||||
</template>
|
||||
</van-cell>
|
||||
|
||||
<van-cell title="单元格" icon="shop-o">
|
||||
<van-icon
|
||||
slot="right-icon"
|
||||
name="search"
|
||||
style="line-height: inherit;"
|
||||
/>
|
||||
</van-cell>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### CellGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| title | 分组标题 | `String` | `-` | 1.6.9 |
|
||||
| border | 是否显示外边框 | `Boolean` | `true` | - |
|
||||
|
||||
### Cell Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `String` | - | - |
|
||||
| title | 左侧标题 | `String | Number` | - | - |
|
||||
| value | 右侧内容 | `String | Number` | - | - |
|
||||
| label | 标题下方的描述信息 | `String` | - | - |
|
||||
| size | 单元格大小，可选值为 `large` | `String` | - | 1.4.4 |
|
||||
| url | 跳转链接 | `String` | - | - |
|
||||
| to | 路由跳转对象，同 `vue-router` 的 to | `String | Object` | - | - |
|
||||
| border | 是否显示内边框 | `Boolean` | `true` | - |
|
||||
| replace | 跳转时是否替换当前页面历史 | `Boolean` | `false` | - |
|
||||
| clickable | 是否开启点击反馈 | `Boolean` | `false` | - |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | `Boolean` | `false` | - |
|
||||
| required | 是否显示表单必填星号 | `Boolean` | `false` | - |
|
||||
| center | 是否使内容垂直居中 | `Boolean` | `false` | 1.0.3 |
|
||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | `String` | - | 1.1.10 |
|
||||
| title-style | 左侧标题额外样式 | `any` | - | 1.6.17 |
|
||||
| title-class | 左侧标题额外类名 | `any` | - | 1.4.8 |
|
||||
| value-class | 右侧内容额外类名 | `any` | - | 1.4.8 |
|
||||
| label-class | 描述信息额外类名 | `any` | - | 1.4.8 |
|
||||
|
||||
### Cell Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击单元格时触发 | - |
|
||||
|
||||
### Cell Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 自定义`value`显示内容 |
|
||||
| title | 自定义标题显示内容 |
|
||||
| label | 自定义标题下方描述显示内容 |
|
||||
| icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧按钮，默认为`arrow` |
|
||||
Reference in New Issue
Block a user