Merge branch 'dev'

docs/faq.md

@@ -0,0 +1,21 @@
+## 在 TypeScript 中指定组件的类型
+
+```html
+<template>
+  <v-img ref="vImg" :src="url" />
+</template>
+<script lang="ts">
+// 需要引入这个
+// import { VImgType } from '@femessage/v-img'
+export default {
+  data() {
+    return {
+      url: ''
+    }
+  },
+  mounted() {
+    (this.$refs.vImg as VImgType).src = 'src'
+  },
+}
+</script>
+```

package.json

@@ -23,6 +23,7 @@
   "browser": {
     "./sfc": "src/v-img.vue"
   },
+  "types": "src/v-img.d.ts",
   "scripts": {
     "dev": "vue-styleguidist server",
     "test": "jest --verbose",

src/provider-config.js

@@ -73,7 +73,7 @@ export const providerConfig = {
       const resizeQuery = actions.join(',')
 
       vm.$src = resizeQuery + $src
-      vm.$config.resizeQuery = resizeQuery
+      vm.$resizeQuery = resizeQuery
 
       return vm
     },
@@ -143,13 +143,12 @@ export const providerConfig = {
 
 export default vm => {
   vm.$src = ''
-  vm.$config = {}
   const providerPipe = providerConfig[vm.provider]
   const output = pipe([
     providerPipe[srcProcess.CONVERT_WEBP],
     providerPipe[srcProcess.CROP_IMAGE],
     providerPipe[srcProcess.APPEND_QUERY]
   ])(vm)
-  vm.$uncroppedSrc = vm.$src.replace(vm.$config.resizeQuery, '')
+  vm.$uncroppedSrc = vm.$src.replace(vm.$resizeQuery, '')
   return output
 }

src/v-img.d.ts

@@ -0,0 +1,96 @@
+import Vue from 'vue'
+
+declare module '@femessage/v-img' {
+  class FemessageComponent extends Vue {
+    static install(vue: typeof Vue): void
+  }
+
+  type CombinedVueInstance<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = Data & Methods & Computed & Props & Instance
+
+  type ExtendedVue<
+    Instance extends Vue,
+    Data,
+    Methods,
+    Computed,
+    Props
+  > = VueConstructor<
+    CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue
+  >
+
+  type Combined<Data, Methods, Computed, Props> = Data &
+    Methods &
+    Computed &
+    Props
+
+  type VImgData = {
+    isSupportWebp: boolean | null
+    status: number
+    transparentImg: string
+  }
+
+  type VImgMethods = {
+    checkLayout: () => void
+
+    checkSupportWebp: () => Promise<void>
+
+    forceUpdateSrc: () => void
+
+    onLoad: () => void
+
+    onError: () => void
+
+    onClick: () => void
+  }
+
+  type VImgComputed = {
+    classname: string
+
+    style: {[key: string]: any}
+
+    imageSrc: any
+
+    loadingImage: string
+
+    reloadImage: string
+  }
+
+  type VImgProps = {
+    src: string
+
+    width: string | number
+
+    height: string | number
+
+    hasLoading: boolean
+
+    provider: string
+
+    extraQuery: string
+
+    placeholder: string
+
+    error: string
+
+    autocrop: string
+  }
+
+  type VImg = Combined<VImgData, VImgMethods, VImgComputed, VImgProps>
+
+  export interface VImgType extends FemessageComponent, VImg {}
+
+  const VImgConstruction: ExtendedVue<
+    Vue,
+    VImgData,
+    VImgMethods,
+    VImgComputed,
+    VImgProps
+  >
+
+  export default VImgConstruction
+}