From 0d64cf1b63d7f89a7f172a5d6ea31cebcdf77291 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Mon, 31 Aug 2020 16:57:49 +0800 Subject: [PATCH] feat: add usePublicApi --- src/area/index.js | 16 +++------------- src/calendar/components/Month.js | 17 +++++++++-------- src/composition/use-public-api.ts | 7 +++++++ src/count-down/index.js | 16 ++++++++++------ src/list/index.js | 15 +++------------ 5 files changed, 32 insertions(+), 39 deletions(-) create mode 100644 src/composition/use-public-api.ts diff --git a/src/area/index.js b/src/area/index.js index 5558f2bff..7a6414c53 100644 --- a/src/area/index.js +++ b/src/area/index.js @@ -1,13 +1,6 @@ -import { - ref, - watch, - computed, - reactive, - nextTick, - onMounted, - getCurrentInstance, -} from 'vue'; +import { ref, watch, computed, reactive, nextTick, onMounted } from 'vue'; import { createNamespace, pick } from '../utils'; +import { usePublicApi } from '../composition/use-public-api'; import { pickerProps } from '../picker/shared'; import Picker from '../picker'; @@ -281,10 +274,7 @@ export default createComponent({ } ); - // @exposed-api - const vm = getCurrentInstance().proxy; - vm.reset = reset; - vm.getArea = getArea; + usePublicApi({ reset, getArea }); return () => { const columns = state.columns.slice(0, +props.columnsNum); diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js index 509121634..b2ecd2eaf 100644 --- a/src/calendar/components/Month.js +++ b/src/calendar/components/Month.js @@ -1,4 +1,4 @@ -import { ref, computed, getCurrentInstance } from 'vue'; +import { ref, computed } from 'vue'; // Utils import { createNamespace, addUnit } from '../../utils'; @@ -18,6 +18,7 @@ import { // Composition import { useHeight } from '../../composition/use-rect'; import { useToggle } from '../../composition/use-toggle'; +import { usePublicApi } from '../composition/use-public-api'; // Components import Day from './Day'; @@ -246,13 +247,13 @@ export default createComponent({ return
; }; - // @exposed-api - const vm = getCurrentInstance().proxy; - vm.height = height; - vm.getDate = getDate; - vm.getTitle = getTitle; - vm.setVisible = setVisible; - vm.scrollIntoView = scrollIntoView; + usePublicApi({ + height, + getDate, + getTitle, + setVisible, + scrollIntoView, + }); return () => (
diff --git a/src/composition/use-public-api.ts b/src/composition/use-public-api.ts new file mode 100644 index 000000000..241c25209 --- /dev/null +++ b/src/composition/use-public-api.ts @@ -0,0 +1,7 @@ +import { getCurrentInstance } from 'vue'; + +// expose public api +export function usePublicApi(apis: Record) { + const vm = (getCurrentInstance() as any).ctx; + Object.assign(vm, apis); +} diff --git a/src/count-down/index.js b/src/count-down/index.js index 2e79f4971..5567ba867 100644 --- a/src/count-down/index.js +++ b/src/count-down/index.js @@ -5,12 +5,16 @@ import { onActivated, onDeactivated, onBeforeUnmount, - getCurrentInstance, } from 'vue'; + +// Utils import { createNamespace } from '../utils'; import { raf, cancelRaf } from '../utils/dom/raf'; import { isSameSecond, parseTimeData, parseFormat } from './utils'; +// Composition +import { usePublicApi } from '../composition/use-public-api'; + const [createComponent, bem] = createNamespace('count-down'); export default createComponent({ @@ -136,11 +140,11 @@ export default createComponent({ onBeforeUnmount(pause); - // @exposed-api - const vm = getCurrentInstance().proxy; - vm.start = start; - vm.reset = reset; - vm.pause = pause; + usePublicApi({ + start, + reset, + pause, + }); return () => (
diff --git a/src/list/index.js b/src/list/index.js index dac06963b..ccfdc896f 100644 --- a/src/list/index.js +++ b/src/list/index.js @@ -1,11 +1,4 @@ -import { - ref, - watch, - nextTick, - onUpdated, - onMounted, - getCurrentInstance, -} from 'vue'; +import { ref, watch, nextTick, onUpdated, onMounted } from 'vue'; // Utils import { createNamespace } from '../utils'; @@ -14,6 +7,7 @@ import { isHidden } from '../utils/dom/style'; // Composition import { useRect } from '../composition/use-rect'; import { useScroller } from '../composition/use-scroller'; +import { usePublicApi } from '../composition/use-public-api'; import { useGlobalEvent } from '../composition/use-global-event'; // Components @@ -147,12 +141,9 @@ export default createComponent({ } }); + usePublicApi({ check }); useGlobalEvent(scroller, 'scroll', check); - // @exposed-api - const vm = getCurrentInstance().proxy; - vm.check = check; - return () => { const Content = slots.default?.(); const Placeholder = (