From 1b58e872fd1a2decb692540b295a6eeb738609e0 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Wed, 1 Jul 2020 17:12:50 +0800 Subject: [PATCH] chore: remove mixin extend --- src/mixins/click-outside.js | 31 +++++++++++++++++++ src/mixins/click-outside.ts | 41 ------------------------- src/mixins/{portal.ts => portal.js} | 20 ++++-------- src/mixins/{relation.ts => relation.js} | 25 +++++---------- src/mixins/{slots.ts => slots.js} | 8 ++--- src/mixins/{touch.ts => touch.js} | 27 +++++----------- 6 files changed, 55 insertions(+), 97 deletions(-) create mode 100644 src/mixins/click-outside.js delete mode 100644 src/mixins/click-outside.ts rename src/mixins/{portal.ts => portal.js} (60%) rename src/mixins/{relation.ts => relation.js} (72%) rename src/mixins/{slots.ts => slots.js} (72%) rename src/mixins/{touch.ts => touch.js} (70%) diff --git a/src/mixins/click-outside.js b/src/mixins/click-outside.js new file mode 100644 index 000000000..534d026f9 --- /dev/null +++ b/src/mixins/click-outside.js @@ -0,0 +1,31 @@ +/** + * Listen to click outside event + */ +import { on, off } from '../utils/dom/event'; + +export const ClickOutsideMixin = (config) => ({ + props: { + closeOnClickOutside: { + type: Boolean, + default: true, + }, + }, + + data() { + const clickOutsideHandler = (event) => { + if (this.closeOnClickOutside && !this.$el.contains(event.target)) { + this[config.method](); + } + }; + + return { clickOutsideHandler }; + }, + + mounted() { + on(document, config.event, this.clickOutsideHandler); + }, + + beforeDestroy() { + off(document, config.event, this.clickOutsideHandler); + }, +}); diff --git a/src/mixins/click-outside.ts b/src/mixins/click-outside.ts deleted file mode 100644 index d3be9be04..000000000 --- a/src/mixins/click-outside.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Listen to click outside event - */ -import Vue from 'vue'; -import { on, off } from '../utils/dom/event'; - -export type ClickOutsideMixinConfig = { - event: string; - method: string; -}; - -export const ClickOutsideMixin = (config: ClickOutsideMixinConfig) => - Vue.extend({ - props: { - closeOnClickOutside: { - type: Boolean, - default: true, - }, - }, - - data() { - const clickOutsideHandler = (event: Event) => { - if ( - this.closeOnClickOutside && - !this.$el.contains(event.target as Node) - ) { - (this as any)[config.method](); - } - }; - - return { clickOutsideHandler }; - }, - - mounted() { - on(document, config.event, this.clickOutsideHandler); - }, - - beforeDestroy() { - off(document, config.event, this.clickOutsideHandler); - }, - }); diff --git a/src/mixins/portal.ts b/src/mixins/portal.js similarity index 60% rename from src/mixins/portal.ts rename to src/mixins/portal.js index 6c42faed7..3ed88ef2d 100644 --- a/src/mixins/portal.ts +++ b/src/mixins/portal.js @@ -1,12 +1,4 @@ -import Vue, { PropType } from 'vue'; -import { GetContainer } from './popup/type'; - -type PortalMixinOptions = { - ref?: string; - afterPortal?: () => void; -}; - -function getElement(selector: string | GetContainer): Element | null { +function getElement(selector) { if (typeof selector === 'string') { return document.querySelector(selector); } @@ -14,10 +6,10 @@ function getElement(selector: string | GetContainer): Element | null { return selector(); } -export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) { - return Vue.extend({ +export function PortalMixin({ ref, afterPortal }) { + return { props: { - getContainer: [String, Function] as PropType, + getContainer: [String, Function], }, watch: { @@ -33,7 +25,7 @@ export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) { methods: { portal() { const { getContainer } = this; - const el = ref ? (this.$refs[ref] as HTMLElement) : this.$el; + const el = ref ? this.$refs[ref] : this.$el; let container; if (getContainer) { @@ -51,5 +43,5 @@ export function PortalMixin({ ref, afterPortal }: PortalMixinOptions) { } }, }, - }); + }; } diff --git a/src/mixins/relation.ts b/src/mixins/relation.js similarity index 72% rename from src/mixins/relation.ts rename to src/mixins/relation.js index faac38c92..5246ebfb4 100644 --- a/src/mixins/relation.ts +++ b/src/mixins/relation.js @@ -1,21 +1,10 @@ import Vue from 'vue'; import { sortChildren } from '../utils/vnodes'; -type ChildrenMixinOptions = { - indexKey?: any; -}; - -type ChildrenMixinThis = { - disableBindRelation?: boolean; -}; - -export function ChildrenMixin( - parent: string, - options: ChildrenMixinOptions = {} -) { +export function ChildrenMixin(parent, options = {}) { const indexKey = options.indexKey || 'index'; - return Vue.extend({ + return { inject: { [parent]: { default: null, @@ -24,11 +13,11 @@ export function ChildrenMixin( computed: { parent() { - if ((this as ChildrenMixinThis).disableBindRelation) { + if (this.disableBindRelation) { return null; } - return (this as any)[parent]; + return this[parent]; }, [indexKey]() { @@ -49,7 +38,7 @@ export function ChildrenMixin( beforeDestroy() { if (this.parent) { this.parent.children = this.parent.children.filter( - (item: any) => item !== this + (item) => item !== this ); } }, @@ -67,10 +56,10 @@ export function ChildrenMixin( this.parent.children = children; }, }, - }); + }; } -export function ParentMixin(parent: string) { +export function ParentMixin(parent) { return { provide() { return { diff --git a/src/mixins/slots.ts b/src/mixins/slots.js similarity index 72% rename from src/mixins/slots.ts rename to src/mixins/slots.js index 4850ad6c4..70449074c 100644 --- a/src/mixins/slots.ts +++ b/src/mixins/slots.js @@ -2,11 +2,9 @@ * Use scopedSlots in Vue 2.6+ * downgrade to slots in lower version */ -import Vue from 'vue'; - -export const SlotsMixin = Vue.extend({ +export const SlotsMixin = { methods: { - slots(name = 'default', props: any) { + slots(name = 'default', props) { const { $slots, $scopedSlots } = this; const scopedSlot = $scopedSlots[name]; @@ -17,4 +15,4 @@ export const SlotsMixin = Vue.extend({ return $slots[name]; }, }, -}); +}; diff --git a/src/mixins/touch.ts b/src/mixins/touch.js similarity index 70% rename from src/mixins/touch.ts rename to src/mixins/touch.js index aa4fa5ee9..45f9190da 100644 --- a/src/mixins/touch.ts +++ b/src/mixins/touch.js @@ -1,9 +1,8 @@ -import Vue from 'vue'; import { on } from '../utils/dom/event'; const MIN_DISTANCE = 10; -function getDirection(x: number, y: number) { +function getDirection(x, y) { if (x > y && x > MIN_DISTANCE) { return 'horizontal'; } @@ -15,29 +14,19 @@ function getDirection(x: number, y: number) { return ''; } -type TouchMixinData = { - startX: number; - startY: number; - deltaX: number; - deltaY: number; - offsetX: number; - offsetY: number; - direction: string; -}; - -export const TouchMixin = Vue.extend({ +export const TouchMixin = { data() { - return { direction: '' } as TouchMixinData; + return { direction: '' }; }, methods: { - touchStart(event: TouchEvent) { + touchStart(event) { this.resetTouchStatus(); this.startX = event.touches[0].clientX; this.startY = event.touches[0].clientY; }, - touchMove(event: TouchEvent) { + touchMove(event) { const touch = event.touches[0]; this.deltaX = touch.clientX - this.startX; this.deltaY = touch.clientY - this.startY; @@ -57,8 +46,8 @@ export const TouchMixin = Vue.extend({ // avoid Vue 2.6 event bubble issues by manually binding events // https://github.com/youzan/vant/issues/3015 - bindTouchEvent(el: HTMLElement) { - const { onTouchStart, onTouchMove, onTouchEnd } = this as any; + bindTouchEvent(el) { + const { onTouchStart, onTouchMove, onTouchEnd } = this; on(el, 'touchstart', onTouchStart); on(el, 'touchmove', onTouchMove); @@ -69,4 +58,4 @@ export const TouchMixin = Vue.extend({ } }, }, -}); +};