feat: add usePublicApi

This commit is contained in:
chenjiahan 2020-08-31 16:57:49 +08:00
parent e1ac3f9a58
commit 0d64cf1b63
5 changed files with 32 additions and 39 deletions

View File

@ -1,13 +1,6 @@
import { import { ref, watch, computed, reactive, nextTick, onMounted } from 'vue';
ref,
watch,
computed,
reactive,
nextTick,
onMounted,
getCurrentInstance,
} from 'vue';
import { createNamespace, pick } from '../utils'; import { createNamespace, pick } from '../utils';
import { usePublicApi } from '../composition/use-public-api';
import { pickerProps } from '../picker/shared'; import { pickerProps } from '../picker/shared';
import Picker from '../picker'; import Picker from '../picker';
@ -281,10 +274,7 @@ export default createComponent({
} }
); );
// @exposed-api usePublicApi({ reset, getArea });
const vm = getCurrentInstance().proxy;
vm.reset = reset;
vm.getArea = getArea;
return () => { return () => {
const columns = state.columns.slice(0, +props.columnsNum); const columns = state.columns.slice(0, +props.columnsNum);

View File

@ -1,4 +1,4 @@
import { ref, computed, getCurrentInstance } from 'vue'; import { ref, computed } from 'vue';
// Utils // Utils
import { createNamespace, addUnit } from '../../utils'; import { createNamespace, addUnit } from '../../utils';
@ -18,6 +18,7 @@ import {
// Composition // Composition
import { useHeight } from '../../composition/use-rect'; import { useHeight } from '../../composition/use-rect';
import { useToggle } from '../../composition/use-toggle'; import { useToggle } from '../../composition/use-toggle';
import { usePublicApi } from '../composition/use-public-api';
// Components // Components
import Day from './Day'; import Day from './Day';
@ -246,13 +247,13 @@ export default createComponent({
return <div ref={daysRef} />; return <div ref={daysRef} />;
}; };
// @exposed-api usePublicApi({
const vm = getCurrentInstance().proxy; height,
vm.height = height; getDate,
vm.getDate = getDate; getTitle,
vm.getTitle = getTitle; setVisible,
vm.setVisible = setVisible; scrollIntoView,
vm.scrollIntoView = scrollIntoView; });
return () => ( return () => (
<div class={bem('month')} ref={monthRef} style={monthStyle.value}> <div class={bem('month')} ref={monthRef} style={monthStyle.value}>

View File

@ -0,0 +1,7 @@
import { getCurrentInstance } from 'vue';
// expose public api
export function usePublicApi(apis: Record<string, any>) {
const vm = (getCurrentInstance() as any).ctx;
Object.assign(vm, apis);
}

View File

@ -5,12 +5,16 @@ import {
onActivated, onActivated,
onDeactivated, onDeactivated,
onBeforeUnmount, onBeforeUnmount,
getCurrentInstance,
} from 'vue'; } from 'vue';
// Utils
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
import { raf, cancelRaf } from '../utils/dom/raf'; import { raf, cancelRaf } from '../utils/dom/raf';
import { isSameSecond, parseTimeData, parseFormat } from './utils'; import { isSameSecond, parseTimeData, parseFormat } from './utils';
// Composition
import { usePublicApi } from '../composition/use-public-api';
const [createComponent, bem] = createNamespace('count-down'); const [createComponent, bem] = createNamespace('count-down');
export default createComponent({ export default createComponent({
@ -136,11 +140,11 @@ export default createComponent({
onBeforeUnmount(pause); onBeforeUnmount(pause);
// @exposed-api usePublicApi({
const vm = getCurrentInstance().proxy; start,
vm.start = start; reset,
vm.reset = reset; pause,
vm.pause = pause; });
return () => ( return () => (
<div class={bem()}> <div class={bem()}>

View File

@ -1,11 +1,4 @@
import { import { ref, watch, nextTick, onUpdated, onMounted } from 'vue';
ref,
watch,
nextTick,
onUpdated,
onMounted,
getCurrentInstance,
} from 'vue';
// Utils // Utils
import { createNamespace } from '../utils'; import { createNamespace } from '../utils';
@ -14,6 +7,7 @@ import { isHidden } from '../utils/dom/style';
// Composition // Composition
import { useRect } from '../composition/use-rect'; import { useRect } from '../composition/use-rect';
import { useScroller } from '../composition/use-scroller'; import { useScroller } from '../composition/use-scroller';
import { usePublicApi } from '../composition/use-public-api';
import { useGlobalEvent } from '../composition/use-global-event'; import { useGlobalEvent } from '../composition/use-global-event';
// Components // Components
@ -147,12 +141,9 @@ export default createComponent({
} }
}); });
usePublicApi({ check });
useGlobalEvent(scroller, 'scroll', check); useGlobalEvent(scroller, 'scroll', check);
// @exposed-api
const vm = getCurrentInstance().proxy;
vm.check = check;
return () => { return () => {
const Content = slots.default?.(); const Content = slots.default?.();
const Placeholder = ( const Placeholder = (