blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-24 18:36:51 +08:00
Code Issues Projects Releases Wiki Activity

feat: add usePlaceholder

Browse Source
This commit is contained in:
chenjiahan 2020-09-04 15:46:32 +08:00
parent 3c415c42d0
commit c1e9323f95
3 changed files with 20 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/composition/use-placeholder.js Normal file
View File

@ -0,0 +1,14 @@
import { useHeight } from './use-rect';
export function usePlaceholder(contentRef, bem) {
const height = useHeight(contentRef);
return (renderContent) => (
<div
class={bem('placeholder')}
style={{ height: height.value ? `${height.value}px` : null }}
>
{renderContent()}
</div>
);
}

13
src/nav-bar/index.js
View File

@ -5,7 +5,7 @@ import { createNamespace } from '../utils';
import { BORDER_BOTTOM } from '../utils/constant'; import { BORDER_BOTTOM } from '../utils/constant';
// Composition // Composition
import { useHeight } from '../composition/use-rect'; import { usePlaceholder } from '../composition/use-placeholder';
// Components // Components
import Icon from '../icon'; import Icon from '../icon';
@ -31,7 +31,7 @@ export default createComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const navBarRef = ref(); const navBarRef = ref();
const height = useHeight(navBarRef); const renderPlaceholder = usePlaceholder(navBarRef, bem);
const onClickLeft = (event) => { const onClickLeft = (event) => {
emit('click-left', event); emit('click-left', event);
@ -85,14 +85,7 @@ export default createComponent({
return () => { return () => {
if (props.fixed && props.placeholder) { if (props.fixed && props.placeholder) {
return ( return renderPlaceholder(renderNavBar);
<div
class={bem('placeholder')}
style={{ height: height.value && `${height.value}px` }}
>
{renderNavBar()}
</div>
);
} }
return renderNavBar(); return renderNavBar();
}; };

14
src/tabbar/index.js
View File

@ -2,7 +2,7 @@ import { ref, reactive, provide } from 'vue';
import { createNamespace, isDef } from '../utils'; import { createNamespace, isDef } from '../utils';
import { BORDER_TOP_BOTTOM } from '../utils/constant'; import { BORDER_TOP_BOTTOM } from '../utils/constant';
import { callInterceptor } from '../utils/interceptor'; import { callInterceptor } from '../utils/interceptor';
import { useHeight } from '../composition/use-rect'; import { usePlaceholder } from '../composition/use-placeholder';
const [createComponent, bem] = createNamespace('tabbar'); const [createComponent, bem] = createNamespace('tabbar');
@ -38,8 +38,8 @@ export default createComponent({
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const tabbarRef = ref(); const tabbarRef = ref();
const height = useHeight(tabbarRef);
const children = reactive([]); const children = reactive([]);
const renderPlaceholder = usePlaceholder(tabbarRef, bem);
const isUnfit = () => { const isUnfit = () => {
if (isDef(props.safeAreaInsetBottom)) { if (isDef(props.safeAreaInsetBottom)) {
@ -84,16 +84,8 @@ export default createComponent({
return () => { return () => {
if (props.fixed && props.placeholder) { if (props.fixed && props.placeholder) {
return ( return renderPlaceholder(renderTabbar);
<div
class={bem('placeholder')}
style={{ height: height.value ? `${height.value}px` : null }}
>
{renderTabbar()}
</div>
);
} }
return renderTabbar(); return renderTabbar();
}; };
}, },