[improvement] mixins typescript (#3690)

2025-04-06 03:57:59 +08:00 · 2019-06-29 11:31:53 +08:00 · 2019-06-29 11:31:53 +08:00 · abe3e59bed
commit abe3e59bed
parent 0a79536a05
17 changed files with 135 additions and 82 deletions
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@ -54,8 +54,8 @@ export default {
  data() {
    return {
      rate: 30,
-      currentRate1: 0,
-      currentRate2: 0
+      currentRate1: 30,
+      currentRate2: 30
    };
  },

--- a/src/circle/test/snapshots/demo.spec.js.snap
+++ b/src/circle/test/snapshots/demo.spec.js.snap
@ -5,15 +5,15 @@ exports[`renders demo correctly 1`] = `
  <div>
    <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 3140px; stroke-width: 41px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 2198px; stroke-width: 41px;"></path>
      </svg>
-      <div class="van-circle__text">0%</div>
+      <div class="van-circle__text">30%</div>
    </div>
    <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: #fff; stroke: #ebedf0; stroke-width: 60px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 3140px; stroke-width: 61px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 4082px; stroke-width: 61px;"></path>
      </svg>
-      <div class="van-circle__text">0%</div>
+      <div class="van-circle__text">30%</div>
    </div>
    <div><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
  </div>
--- a/src/dropdown-menu/test/snapshots/index.spec.js.snap
+++ b/src/dropdown-menu/test/snapshots/index.spec.js.snap
@ -5,7 +5,7 @@ exports[`click option 1`] = `
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2009;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2009;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style=""><span>A</span></div>
      </div>
@ -27,7 +27,7 @@ exports[`close on click outside 1`] = `
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@ -73,7 +73,7 @@ exports[`direction up 1`] = `
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
  <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
-    <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
+    <div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@ -105,7 +105,7 @@ exports[`show dropdown item 1`] = `
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@ -128,7 +128,7 @@ exports[`show dropdown item 2`] = `
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@ -140,7 +140,7 @@ exports[`show dropdown item 2`] = `
    </div>
  </div>
  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@ -160,7 +160,7 @@ exports[`show dropdown item 3`] = `
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@ -172,7 +172,7 @@ exports[`show dropdown item 3`] = `
    </div>
  </div>
  <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
      <div class="van-cell van-cell--clickable">
        <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
        <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
--- a/src/mixins/bind-event.ts
+++ b/src/mixins/bind-event.ts
@ -3,15 +3,19 @@
 */
 import { on, off } from '../utils/dom/event';

-export function BindEventMixin(handler) {
-  function bind() {
+type BindEventMixinThis = {
+  binded: boolean;
+};
+
+export function BindEventMixin(handler: Function) {
+  function bind(this: BindEventMixinThis) {
    if (!this.binded) {
      handler.call(this, on, true);
      this.binded = true;
    }
  }

-  function unbind() {
+  function unbind(this: BindEventMixinThis) {
    if (this.binded) {
      handler.call(this, off, false);
      this.binded = false;
--- a/src/mixins/click-outside.js
+++ b/src/mixins/click-outside.js
@ -1,20 +0,0 @@
-/**
- * Listen to click outside event
- */
-import { on, off } from '../utils/dom/event';
-
-export const ClickOutsideMixin = config => ({
-  mounted() {
-    this.clickOutsideHandler = event => {
-      if (!this.$el.contains(event.target)) {
-        this[config.method]();
-      }
-    };
-
-    on(document, config.event, this.clickOutsideHandler);
-  },
-
-  beforeDestroy() {
-    off(document, config.event, this.clickOutsideHandler);
-  }
-});
--- a/src/mixins/click-outside.ts
+++ b/src/mixins/click-outside.ts
@ -0,0 +1,31 @@
+/**
+ * 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({
+    data() {
+      const clickOutsideHandler = (event: Event) => {
+        if (!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);
+    }
+  });
--- a/src/mixins/popup/type.ts
+++ b/src/mixins/popup/type.ts
@ -1,4 +1,4 @@
-export type GetContainer = (container: HTMLElement) => void;
+export type GetContainer = () => HTMLElement;

 export type PopupMixinProps = {
  value: boolean;
--- a/src/mixins/portal.ts
+++ b/src/mixins/portal.ts
@ -1,4 +1,11 @@
-function getElement(selector) {
+import Vue, { PropType } from 'vue';
+import { GetContainer } from './popup/type';
+
+type PortalMixinOptions = {
+  afterPortal?: () => void;
+};
+
+function getElement(selector: string | GetContainer): Element | null {
  if (typeof selector === 'string') {
    return document.querySelector(selector);
  }
@ -6,10 +13,10 @@ function getElement(selector) {
  return selector();
 }

-export function PortalMixin({ afterPortal }) {
-  return {
+export function PortalMixin({ afterPortal }: PortalMixinOptions) {
+  return Vue.extend({
    props: {
-      getContainer: [String, Function]
+      getContainer: [String, Function] as (PropType<string | GetContainer>)
    },

    watch: {
@ -44,5 +51,5 @@ export function PortalMixin({ afterPortal }) {
        }
      }
    }
-  };
+  });
 }
--- a/src/mixins/relation.ts
+++ b/src/mixins/relation.ts
@ -1,7 +1,13 @@
-export function ChildrenMixin(parent, options = {}) {
+import Vue from 'vue';
+
+type ChildrenMixinOptions = {
+  indexKey?: any;
+};
+
+export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}) {
  const indexKey = options.indexKey || 'index';

-  return {
+  return Vue.extend({
    inject: {
      [parent]: {
        default: null
@ -10,7 +16,7 @@ export function ChildrenMixin(parent, options = {}) {

    computed: {
      parent() {
-        return this[parent];
+        return (this as any)[parent];
      },

      [indexKey]() {
@ -25,7 +31,7 @@ export function ChildrenMixin(parent, options = {}) {

    beforeDestroy() {
      if (this.parent) {
-        this.parent.children = this.parent.children.filter(item => item !== this);
+        this.parent.children = this.parent.children.filter((item: any) => item !== this);
      }
    },

@ -48,10 +54,10 @@ export function ChildrenMixin(parent, options = {}) {
        }
      }
    }
-  };
+  });
 }

-export function ParentMixin(parent) {
+export function ParentMixin(parent: string) {
  return {
    provide() {
      return {
--- a/src/mixins/slots.js
+++ b/src/mixins/slots.js
@ -1,16 +0,0 @@
-/**
- * Use scopedSlots in Vue 2.6+
- * downgrade to slots in lower version
- */
-
-export const SlotsMixin = {
-  methods: {
-    slots(name = 'default', props) {
-      const { $slots, $scopedSlots } = this;
-      if ($scopedSlots[name]) {
-        return $scopedSlots[name](props);
-      }
-      return $slots[name];
-    }
-  }
-};
--- a/src/mixins/slots.ts
+++ b/src/mixins/slots.ts
@ -0,0 +1,20 @@
+/**
+ * Use scopedSlots in Vue 2.6+
+ * downgrade to slots in lower version
+ */
+import Vue from 'vue';
+
+export const SlotsMixin = Vue.extend({
+  methods: {
+    slots(name = 'default', props: any) {
+      const { $slots, $scopedSlots } = this;
+      const scopedSlot = $scopedSlots[name];
+
+      if (scopedSlot) {
+        return scopedSlot(props);
+      }
+
+      return $slots[name];
+    }
+  }
+});
--- a/src/mixins/touch.ts
+++ b/src/mixins/touch.ts
@ -1,29 +1,42 @@
+import Vue from 'vue';
+
 const MIN_DISTANCE = 10;
-function getDirection(x, y) {
+
+function getDirection(x: number, y: number) {
  if (x > y && x > MIN_DISTANCE) {
    return 'horizontal';
  }
+
  if (y > x && y > MIN_DISTANCE) {
    return 'vertical';
  }
+
  return '';
 }

-export const TouchMixin = {
+type TouchMixinData = {
+  startX: number;
+  startY: number;
+  deltaX: number;
+  deltaY: number;
+  offsetX: number;
+  offsetY: number;
+  direction: string;
+};
+
+export const TouchMixin = Vue.extend({
  data() {
-    return {
-      direction: ''
-    };
+    return { direction: '' } as TouchMixinData;
  },

  methods: {
-    touchStart(event) {
+    touchStart(event: TouchEvent) {
      this.resetTouchStatus();
      this.startX = event.touches[0].clientX;
      this.startY = event.touches[0].clientY;
    },

-    touchMove(event) {
+    touchMove(event: TouchEvent) {
      const touch = event.touches[0];
      this.deltaX = touch.clientX - this.startX;
      this.deltaY = touch.clientY - this.startY;
@ -40,4 +53,4 @@ export const TouchMixin = {
      this.offsetY = 0;
    }
  }
-};
+});
--- a/src/utils/create/bem.ts
+++ b/src/utils/create/bem.ts
@ -47,3 +47,5 @@ export function createBEM(name: string) {
    return mods ? [el, prefix(el, mods)] : el;
  };
 }
+
+export type BEM = ReturnType<typeof createBEM>;
--- a/src/utils/create/i18n.ts
+++ b/src/utils/create/i18n.ts
@ -10,3 +10,5 @@ export function createI18N(name: string) {
    return typeof message === 'function' ? message(...args) : message;
  };
 }
+
+export type Translate = ReturnType<typeof createI18N>;
--- a/src/utils/create/index.ts
+++ b/src/utils/create/index.ts
@ -1,11 +1,11 @@
-import { createBEM } from './bem';
+import { createBEM, BEM } from './bem';
 import { createComponent } from './component';
-import { createI18N } from './i18n';
+import { createI18N, Translate } from './i18n';

 type CreateNamespaceReturn = [
  ReturnType<typeof createComponent>,
-  ReturnType<typeof createBEM>,
-  ReturnType<typeof createI18N>
+  BEM,
+  Translate
 ];

 export function createNamespace(name: string): CreateNamespaceReturn {
--- a/src/utils/dom/event.ts
+++ b/src/utils/dom/event.ts
@ -2,7 +2,7 @@
 /* eslint-disable getter-return */
 /* eslint-disable import/no-mutable-exports */
 import { isServer } from '..';
-import { EventHanlder } from '../types';
+import { EventHandler } from '../types';

 export let supportsPassive = false;

@ -20,9 +20,9 @@ if (!isServer) {
 }

 export function on(
-  target: HTMLElement,
+  target: HTMLElement | Document,
  event: string,
-  handler: EventHanlder,
+  handler: EventHandler,
  passive = false
 ) {
  if (!isServer) {
@ -34,7 +34,11 @@ export function on(
  }
 }

-export function off(target: HTMLElement, event: string, handler: EventHanlder) {
+export function off(
+  target: HTMLElement | Document,
+  event: string,
+  handler: EventHandler
+) {
  if (!isServer) {
    target.removeEventListener(event, handler);
  }
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@ -1,7 +1,7 @@
 import { VNode, CreateElement, RenderContext } from 'vue';
 import { InjectOptions, PropsDefinition } from 'vue/types/options';

-export type EventHanlder = (eventName?: Event) => void;
+export type EventHandler = (event: Event) => void;

 export type ObjectIndex = {
  [key: string]: any;