chore: children use reactive

This commit is contained in:
chenjiahan 2020-08-26 11:34:16 +08:00
parent 326c345c91
commit b0ea4bc1f6
6 changed files with 16 additions and 18 deletions

View File

@ -24,16 +24,14 @@ export default createComponent({
const isFirst = computed(() => { const isFirst = computed(() => {
if (parent) { if (parent) {
const children = parent.children.value; const prev = parent.children[index.value - 1];
const prev = children[index.value - 1];
return !(prev && prev.isButton); return !(prev && prev.isButton);
} }
}); });
const isLast = computed(() => { const isLast = computed(() => {
if (parent) { if (parent) {
const children = parent.children.value; const next = parent.children[index.value + 1];
const next = children[index.value + 1];
return !(next && next.isButton); return !(next && next.isButton);
} }
}); });

View File

@ -1,4 +1,4 @@
import { ref, provide } from 'vue'; import { provide, reactive } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
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 }) {
provide(ACTION_BAR_KEY, { const children = reactive([]);
children: ref([]),
}); provide(ACTION_BAR_KEY, { children });
return () => ( return () => (
<div class={bem({ unfit: !props.safeAreaInsetBottom })}> <div class={bem({ unfit: !props.safeAreaInsetBottom })}>

View File

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

View File

@ -1,4 +1,4 @@
import { ref, provide } from 'vue'; import { provide, reactive } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
import { BORDER_TOP_BOTTOM } from '../utils/constant'; import { BORDER_TOP_BOTTOM } from '../utils/constant';
@ -19,7 +19,7 @@ export default createComponent({
emits: ['change', 'update:modelValue'], emits: ['change', 'update:modelValue'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const children = ref([]); const children = reactive([]);
const toggle = (name, expanded) => { const toggle = (name, expanded) => {
const { accordion, modelValue } = props; const { accordion, modelValue } = props;

View File

@ -1,4 +1,4 @@
import { ref, computed, provide } from 'vue'; import { provide, computed, reactive } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
const [createComponent, bem] = createNamespace('row'); const [createComponent, bem] = createNamespace('row');
@ -21,13 +21,13 @@ export default createComponent({
}, },
setup(props, { slots }) { setup(props, { slots }) {
const children = ref([]); const children = reactive([]);
const groups = computed(() => { const groups = computed(() => {
const groups = [[]]; const groups = [[]];
let totalSpan = 0; let totalSpan = 0;
children.value.forEach((getSpan, index) => { children.forEach((getSpan, index) => {
totalSpan += getSpan(); totalSpan += getSpan();
if (totalSpan > 24) { if (totalSpan > 24) {

View File

@ -1,4 +1,4 @@
import { ref, watch, provide } from 'vue'; import { watch, provide, reactive } from 'vue';
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
const [createComponent, bem] = createNamespace('sidebar'); const [createComponent, bem] = createNamespace('sidebar');
@ -16,7 +16,7 @@ export default createComponent({
emits: ['change', 'update:modelValue'], emits: ['change', 'update:modelValue'],
setup(props, { emit, slots }) { setup(props, { emit, slots }) {
const children = ref([]); const children = reactive([]);
const active = () => +props.modelValue; const active = () => +props.modelValue;
const setActive = (value) => { const setActive = (value) => {
if (value !== active()) { if (value !== active()) {