Browse Source

style(backTop): v-show instead v-if

feat-css-var
tangjinzhou 3 years ago
parent
commit
7c59c1815f
  1. 12
      components/back-top/__tests__/__snapshots__/demo.test.js.snap
  2. 13
      components/back-top/index.tsx
  3. 0
      components/back-top/style/index.tsx

12
components/back-top/__tests__/__snapshots__/demo.test.js.snap

@ -1,9 +1,17 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `<!----> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.`;
exports[`renders ./components/back-top/demo/basic.vue correctly 1`] = `
<div class="ant-back-top" style="display: none;">
<div class="ant-back-top-content">
<div class="ant-back-top-icon"><span role="img" aria-label="vertical-align-top" class="anticon anticon-vertical-align-top"><svg focusable="false" class="" data-icon="vertical-align-top" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355a8 8 0 00-12.6 0l-112 141.7a7.98 7.98 0 006.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z"></path></svg></span></div>
</div>
</div> Scroll down to see the bottom-right <strong style="color: rgba(64, 64, 64, 0.6);">gray</strong> button.
`;
exports[`renders ./components/back-top/demo/custom.vue correctly 1`] = `
<div id="components-back-top-demo-custom">
<!----> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
<div class="ant-back-top" style="display: none;">
<div class="ant-back-top-inner">UP</div>
</div> Scroll down to see the bottom-right <strong style="color: rgb(16, 136, 233);">blue</strong> button.
</div>
`;

13
components/back-top/index.tsx

@ -133,13 +133,14 @@ const BackTop = defineComponent({
},
};
const backTopBtn = state.visible ? (
<div {...divProps} ref={domRef}>
{slots.default?.() || defaultElement}
</div>
) : null;
const transitionProps = getTransitionProps('fade');
return <Transition {...transitionProps}>{backTopBtn}</Transition>;
return (
<Transition {...transitionProps}>
<div v-show={state.visible} {...divProps} ref={domRef}>
{slots.default?.() || defaultElement}
</div>
</Transition>
);
};
},
});

0
components/back-top/style/index.ts → components/back-top/style/index.tsx

Loading…
Cancel
Save