chore: remove mixin extend

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);
+  },
+});

src/mixins/click-outside.ts

@@ -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);
-    },
-  });

src/mixins/portal.js

@@ -1,12 +1,4 @@
-import Vue, { PropType } from 'vue';
+function getElement(selector) {
-import { GetContainer } from './popup/type';
-
-type PortalMixinOptions = {
-  ref?: string;
-  afterPortal?: () => void;
-};
-
-function getElement(selector: string | GetContainer): Element | null {
   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) {
+export function PortalMixin({ ref, afterPortal }) {
-  return Vue.extend({
+  return {
     props: {
-      getContainer: [String, Function] as PropType<string | GetContainer>,
+      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) {
         }
       },
     },
-  });
+  };
 }

src/mixins/relation.js

@@ -1,21 +1,10 @@
 import Vue from 'vue';
 import { sortChildren } from '../utils/vnodes';
 
-type ChildrenMixinOptions = {
+export function ChildrenMixin(parent, options = {}) {
-  indexKey?: any;
-};
-
-type ChildrenMixinThis = {
-  disableBindRelation?: boolean;
-};
-
-export function ChildrenMixin(
-  parent: string,
-  options: ChildrenMixinOptions = {}
-) {
   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 {

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 = {
-
-export const SlotsMixin = Vue.extend({
   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];
     },
   },
-});
+};

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 = {
+export const TouchMixin = {
-  startX: number;
-  startY: number;
-  deltaX: number;
-  deltaY: number;
-  offsetX: number;
-  offsetY: number;
-  direction: string;
-};
-
-export const TouchMixin = Vue.extend({
   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) {
+    bindTouchEvent(el) {
-      const { onTouchStart, onTouchMove, onTouchEnd } = this as any;
+      const { onTouchStart, onTouchMove, onTouchEnd } = this;
 
       on(el, 'touchstart', onTouchStart);
       on(el, 'touchmove', onTouchMove);
@@ -69,4 +58,4 @@ export const TouchMixin = Vue.extend({
       }
     },
   },
-});
+};