fix(Calendar): color prop not work

This commit is contained in:
chenjiahan 2020-09-07 09:54:45 +08:00
parent c655c96026
commit b9dbb1bc8a

View File

@ -17,7 +17,7 @@ export default createComponent({
setup(props, { emit }) { setup(props, { emit }) {
const style = computed(() => { const style = computed(() => {
const { type, index, color, offset, rowHeight } = props; const { item, index, color, offset, rowHeight } = props;
const style = { const style = {
height: rowHeight, height: rowHeight,
}; };
@ -27,7 +27,7 @@ export default createComponent({
} }
if (color) { if (color) {
switch (type) { switch (item.type) {
case 'end': case 'end':
case 'start': case 'start':
case 'start-end': case 'start-end':
@ -45,14 +45,14 @@ export default createComponent({
}); });
const onClick = () => { const onClick = () => {
if (props.type !== 'disabled') { if (props.item.type !== 'disabled') {
emit('click', props.item); emit('click', props.item);
} }
}; };
return () => { const renderContent = () => {
const { item, color, rowHeight } = props; const { item, color, rowHeight } = props;
const { type, topInfo, bottomInfo } = item; const { type, text, topInfo, bottomInfo } = item;
const TopInfo = topInfo && <div class={bem('top-info')}>{topInfo}</div>; const TopInfo = topInfo && <div class={bem('top-info')}>{topInfo}</div>;
@ -60,42 +60,37 @@ export default createComponent({
<div class={bem('bottom-info')}>{bottomInfo}</div> <div class={bem('bottom-info')}>{bottomInfo}</div>
); );
const Nodes = [TopInfo, text, BottomInfo];
if (type === 'selected') { if (type === 'selected') {
return ( return (
<div <div
role="gridcell" class={bem('selected-day')}
style={style.value} style={{
class={[bem('day'), item.className]} width: rowHeight,
tabindex={-1} height: rowHeight,
onClick={onClick} background: color,
}}
> >
<div {Nodes}
class={bem('selected-day')}
style={{
width: rowHeight,
height: rowHeight,
background: color,
}}
>
{TopInfo}
{item.text}
{BottomInfo}
</div>
</div> </div>
); );
} }
return Nodes;
};
return () => {
const { type, className } = props.item;
return ( return (
<div <div
role="gridcell" role="gridcell"
style={style.value} style={style.value}
class={[bem('day', type), item.className]} class={[bem('day', type), className]}
tabindex={type === 'disabled' ? null : -1} tabindex={type === 'disabled' ? null : -1}
onClick={onClick} onClick={onClick}
> >
{TopInfo} {renderContent()}
{item.text}
{BottomInfo}
</div> </div>
); );
}; };