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

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