PullRefresh 组件使用优化建议

[0x30]

我觉得没必要暴露 vmodel，就直接，暴露一个方法就好了。

export const PullRefresh = defineComponent({
  props: {
    onRefresh: Function as PropType<() => Promise<any>>,
  },
  setup: (props, { slots, expose }) => {
    const isLoading = ref(false);
    const startRefresh = async () => {
      try {
        await props.onRefresh?.();
      } catch {}
      isLoading.value = false;
    };

    expose({
      startRefresh: async () => {
        if (isLoading.value === true) return;
        isLoading.value = true;
        startRefresh();
      },
    });

    return () => (
      <VantPullRefresh
        v-model={isLoading.value}
        onRefresh={startRefresh}
      >
        {slots.default?.()}
      </VantPullRefresh>
    );
  },
});

使用的时候

<PullRefresh ref={pullRefreshRef} onRefresh={async () => {
await // more
}}>
// more
</PullRefresh>

// 手动调用 -> vue expose typescript 体验真的很差...
pullRefreshRef.value?.startRefresh();