chore(ActionBar): use relation composition

This commit is contained in:
chenjiahan 2020-09-25 11:38:03 +08:00
parent 278ea6a439
commit 36239090b9
3 changed files with 11 additions and 8 deletions

View File

@ -3,7 +3,8 @@ import { createNamespace } from '../utils';
import { ACTION_BAR_KEY } from '../action-bar';
// Composition
import { useParent } from '../composition/use-parent';
import { useParent } from '../composition/use-relation';
import { useExpose } from '../composition/use-expose';
import { useRoute, routeProps } from '../composition/use-route';
// Components
@ -24,22 +25,24 @@ export default createComponent({
setup(props, { slots }) {
const route = useRoute();
const { parent, index } = useParent(ACTION_BAR_KEY, { isButton: true });
const { parent, index } = useParent(ACTION_BAR_KEY);
const isFirst = computed(() => {
if (parent) {
const prev = parent.children[index.value - 1];
return !(prev && prev.isButton);
return !(prev && 'isButton' in prev);
}
});
const isLast = computed(() => {
if (parent) {
const next = parent.children[index.value + 1];
return !(next && next.isButton);
return !(next && 'isButton' in next);
}
});
useExpose({ isButton: true });
return () => {
const { type, icon, text, color, loading, disabled } = props;

View File

@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
import { ACTION_BAR_KEY } from '../action-bar';
// Composition
import { useParent } from '../composition/use-parent';
import { useParent } from '../composition/use-relation';
import { useRoute, routeProps } from '../composition/use-route';
// Components

View File

@ -1,5 +1,5 @@
import { provide, reactive } from 'vue';
import { createNamespace } from '../utils';
import { useChildren } from '../composition/use-relation';
const [createComponent, bem] = createNamespace('action-bar');
@ -14,9 +14,9 @@ export default createComponent({
},
setup(props, { slots }) {
const children = reactive([]);
const { linkChildren } = useChildren(ACTION_BAR_KEY);
provide(ACTION_BAR_KEY, { children });
linkChildren();
return () => (
<div class={bem({ unfit: !props.safeAreaInsetBottom })}>