blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(Cell): route props

Browse Source
This commit is contained in:
chenjiahan 2020-07-05 16:46:07 +08:00
parent 919161568a
commit 7ed1747de8
1 changed files with 97 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

193
src-next/cell/index.js
View File

@ -1,6 +1,6 @@
// Utils // Utils
import { createNamespace, isDef } from '../utils'; import { createNamespace, isDef } from '../utils';
import { routeProps } from '../utils/router'; import { route, routeProps } from '../utils/router';
import { cellProps } from './shared'; import { cellProps } from './shared';
// Components // Components
@ -15,102 +15,103 @@ export default createComponent({
}, },
setup(props, { slots, emit }) { setup(props, { slots, emit }) {
const { icon, size, title, label, value, isLink } = props;
const showTitle = slots.title || isDef(title);
function Label() {
const showLabel = slots.label || isDef(label);
if (showLabel) {
return (
<div class={[bem('label'), props.labelClass]}>
{slots.label ? slots.label() : label}
</div>
);
}
}
function Title() {
if (showTitle) {
return (
<div
class={[bem('title'), props.titleClass]}
style={props.titleStyle}
>
{slots.title ? slots.title() : <span>{title}</span>}
{Label()}
</div>
);
}
}
function Value() {
const showValue = slots.default || isDef(value);
if (showValue) {
return (
<div class={[bem('value', { alone: !showTitle }), props.valueClass]}>
{slots.default ? slots.default() : <span>{value}</span>}
</div>
);
}
}
function LeftIcon() {
if (slots.icon) {
return slots.icon();
}
if (icon) {
return (
<Icon
class={bem('left-icon')}
name={icon}
classPrefix={props.iconPrefix}
/>
);
}
}
function RightIcon() {
const rightIconSlot = slots['right-icon'];
if (rightIconSlot) {
return rightIconSlot();
}
if (isLink) {
const { arrowDirection } = props;
return (
<Icon
class={bem('right-icon')}
name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
/>
);
}
}
function onClick(event) {
emit('click', event);
// TODO
// functionalRoute(ctx);
}
const clickable = isLink || props.clickable;
const classes = {
clickable,
center: props.center,
required: props.required,
borderless: !props.border,
};
if (size) {
classes[size] = size;
}
return function () { return function () {
const { icon, size, title, label, value, isLink } = props;
const showTitle = slots.title || isDef(title);
function Label() {
const showLabel = slots.label || isDef(label);
if (showLabel) {
return (
<div class={[bem('label'), props.labelClass]}>
{slots.label ? slots.label() : label}
</div>
);
}
}
function Title() {
if (showTitle) {
return (
<div
class={[bem('title'), props.titleClass]}
style={props.titleStyle}
>
{slots.title ? slots.title() : <span>{title}</span>}
{Label()}
</div>
);
}
}
function Value() {
const showValue = slots.default || isDef(value);
if (showValue) {
return (
<div
class={[bem('value', { alone: !showTitle }), props.valueClass]}
>
{slots.default ? slots.default() : <span>{value}</span>}
</div>
);
}
}
function LeftIcon() {
if (slots.icon) {
return slots.icon();
}
if (icon) {
return (
<Icon
class={bem('left-icon')}
name={icon}
classPrefix={props.iconPrefix}
/>
);
}
}
function RightIcon() {
const rightIconSlot = slots['right-icon'];
if (rightIconSlot) {
return rightIconSlot();
}
if (isLink) {
const { arrowDirection } = props;
return (
<Icon
class={bem('right-icon')}
name={arrowDirection ? `arrow-${arrowDirection}` : 'arrow'}
/>
);
}
}
const onClick = (event) => {
emit('click', event);
route(this.$router, this);
};
const clickable = isLink || props.clickable;
const classes = {
clickable,
center: props.center,
required: props.required,
borderless: !props.border,
};
if (size) {
classes[size] = size;
}
return ( return (
<div <div
class={bem(classes)} class={bem(classes)}