mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-24 02:16:12 +08:00
chore(ActionBar): use relation composition
This commit is contained in:
parent
278ea6a439
commit
36239090b9
@ -3,7 +3,8 @@ import { createNamespace } from '../utils';
|
|||||||
import { ACTION_BAR_KEY } from '../action-bar';
|
import { ACTION_BAR_KEY } from '../action-bar';
|
||||||
|
|
||||||
// Composition
|
// 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';
|
import { useRoute, routeProps } from '../composition/use-route';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
@ -24,22 +25,24 @@ export default createComponent({
|
|||||||
|
|
||||||
setup(props, { slots }) {
|
setup(props, { slots }) {
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { parent, index } = useParent(ACTION_BAR_KEY, { isButton: true });
|
const { parent, index } = useParent(ACTION_BAR_KEY);
|
||||||
|
|
||||||
const isFirst = computed(() => {
|
const isFirst = computed(() => {
|
||||||
if (parent) {
|
if (parent) {
|
||||||
const prev = parent.children[index.value - 1];
|
const prev = parent.children[index.value - 1];
|
||||||
return !(prev && prev.isButton);
|
return !(prev && 'isButton' in prev);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const isLast = computed(() => {
|
const isLast = computed(() => {
|
||||||
if (parent) {
|
if (parent) {
|
||||||
const next = parent.children[index.value + 1];
|
const next = parent.children[index.value + 1];
|
||||||
return !(next && next.isButton);
|
return !(next && 'isButton' in next);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
useExpose({ isButton: true });
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
const { type, icon, text, color, loading, disabled } = props;
|
const { type, icon, text, color, loading, disabled } = props;
|
||||||
|
|
||||||
|
@ -2,7 +2,7 @@ import { createNamespace } from '../utils';
|
|||||||
import { ACTION_BAR_KEY } from '../action-bar';
|
import { ACTION_BAR_KEY } from '../action-bar';
|
||||||
|
|
||||||
// Composition
|
// Composition
|
||||||
import { useParent } from '../composition/use-parent';
|
import { useParent } from '../composition/use-relation';
|
||||||
import { useRoute, routeProps } from '../composition/use-route';
|
import { useRoute, routeProps } from '../composition/use-route';
|
||||||
|
|
||||||
// Components
|
// Components
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { provide, reactive } from 'vue';
|
|
||||||
import { createNamespace } from '../utils';
|
import { createNamespace } from '../utils';
|
||||||
|
import { useChildren } from '../composition/use-relation';
|
||||||
|
|
||||||
const [createComponent, bem] = createNamespace('action-bar');
|
const [createComponent, bem] = createNamespace('action-bar');
|
||||||
|
|
||||||
@ -14,9 +14,9 @@ export default createComponent({
|
|||||||
},
|
},
|
||||||
|
|
||||||
setup(props, { slots }) {
|
setup(props, { slots }) {
|
||||||
const children = reactive([]);
|
const { linkChildren } = useChildren(ACTION_BAR_KEY);
|
||||||
|
|
||||||
provide(ACTION_BAR_KEY, { children });
|
linkChildren();
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<div class={bem({ unfit: !props.safeAreaInsetBottom })}>
|
<div class={bem({ unfit: !props.safeAreaInsetBottom })}>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user