blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

chore(Step): simplify lineStyle

Browse Source
This commit is contained in:
chenjiahan 2021-01-20 20:16:55 +08:00
parent 872af8157e
commit 57ce019d5e
1 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/step/index.js
View File

@ -10,9 +10,10 @@ const [createComponent, bem] = createNamespace('step');
export default createComponent({
setup(props, { slots }) {
const { parent, index } = useParent(STEPS_KEY);
const parentProps = parent.props;
const getStatus = () => {
const active = +parent.props.active;
const active = +parentProps.active;
if (index.value < active) {
return 'finish';
}
@ -23,25 +24,19 @@ export default createComponent({
const isActive = () => getStatus() === 'process';
const lineStyle = computed(() => {
const { activeColor, inactiveColor } = parent.props;
if (getStatus() === 'finish') {
return { background: activeColor };
}
return { background: inactiveColor };
});
const lineStyle = computed(() => ({
background:
getStatus() === 'finish'
? parentProps.activeColor
: parentProps.inactiveColor,
}));
const titleStyle = computed(() => {
const { activeColor, inactiveColor } = parent.props;
if (isActive()) {
return { color: activeColor };
return { color: parentProps.activeColor };
}
if (!getStatus()) {
return { color: inactiveColor };
return { color: parentProps.inactiveColor };
}
});
@ -50,7 +45,7 @@ export default createComponent({
};
const renderCircle = () => {
const { activeIcon, activeColor, inactiveIcon } = parent.props;
const { activeIcon, activeColor, inactiveIcon } = parentProps;
if (isActive()) {
if (slots['active-icon']) {
@ -78,11 +73,12 @@ export default createComponent({
};
return () => {
const { direction } = parent.props;
const status = getStatus();
return (
<div class={[BORDER, bem([direction, { [status]: status }])]}>
<div
class={[BORDER, bem([parentProps.direction, { [status]: status }])]}
>
<div
class={bem('title', { active: isActive() })}
style={titleStyle.value}