blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-01 21:56:35 +08:00
Code Issues Projects Releases Wiki Activity

refactor: improve relation api

Browse Source
This commit is contained in:
chenjiahan 2020-08-23 15:36:16 +08:00
parent ff3a5d66ab
commit 50fc123b3e
4 changed files with 30 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/action-bar-button/index.js
View File

@ -1,7 +1,7 @@
import { ref, computed } from 'vue';
import { createNamespace } from '../utils';
import { route, routeProps } from '../utils/router';
import { useChildren } from '../api/use-relation';
import { useParent } from '../api/use-relation';
import { ACTION_BAR_KEY } from '../action-bar';
import Button from '../button';
@ -19,18 +19,20 @@ export default createComponent({
},
setup(props, { slots }) {
const { children, index } = useChildren(ACTION_BAR_KEY, ref(true));
const { parent, index } = useParent(ACTION_BAR_KEY, ref(true));
const isFirst = computed(() => {
if (children) {
const prev = children.value[index.value - 1];
if (parent) {
const children = parent.children.value;
const prev = children[index.value - 1];
return !(prev && prev.value);
}
});
const isLast = computed(() => {
if (children) {
const next = children.value[index.value + 1];
if (parent) {
const children = parent.children.value;
const next = children[index.value + 1];
return !(next && next.value);
}
});

4
src/action-bar-icon/index.js
View File

@ -1,7 +1,7 @@
import { ref } from 'vue';
import { createNamespace } from '../utils';
import { route, routeProps } from '../utils/router';
import { useChildren } from '../api/use-relation';
import { useParent } from '../api/use-relation';
import { ACTION_BAR_KEY } from '../action-bar';
import Icon from '../icon';
import Badge from '../badge';
@ -20,7 +20,7 @@ export default createComponent({
},
setup(props, { slots }) {
useChildren(ACTION_BAR_KEY, ref());
useParent(ACTION_BAR_KEY, ref());
function genIcon() {
const { dot, badge, icon, color, iconClass } = props;

4
src/action-bar/index.js
View File

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

33
src/api/use-relation.ts
View File

@ -1,30 +1,33 @@
import { ref, Ref, provide, inject, computed } from 'vue';
import { ref, Ref, provide, inject, computed, onUnmounted } from 'vue';
export type Parent = null | {
children: Ref<unknown[]>;
};
export function useParent(key: string) {
export function useChildren(key: string) {
const children = ref<unknown>([]);
provide(key, { children });
return {
children,
};
return children;
}
export function useChildren(key: string, child: unknown) {
export function useParent(key: string, child: unknown) {
const parent = inject<Parent>(key, null);
const children = parent?.children;
const index = computed(() => children?.value.indexOf(child));
if (parent) {
parent.children.value.push(child);
const children = parent.children.value;
const index = computed(() => children.indexOf(child));
children.push(child);
onUnmounted(() => {
children.splice(index.value, 1);
});
return {
index,
parent,
};
}
return {
index,
children,
};
return {};
}