Feat: 工具函数等

src/components/ChooserAsync.tsx

@@ -3,7 +3,7 @@
  * @Author: 毛瑞
  * @Date: 2020-01-02 16:13:36
  */
-import { CreateElement, Component as Comp } from 'vue'
+import { CreateElement, Component as Comp, VNode } from 'vue'
 // see: https://github.com/kaorun343/vue-property-decorator
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 
@@ -12,7 +12,8 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 // import STYLE from './index.module.scss'
 import Info from './Info'
 import Loading from './Loading'
-import { VNode } from 'vue/types/umd'
+
+import { isFn } from '@/utils'
 
 /// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///
 // const ModuleOne: any = getAsync(() =>
@@ -96,7 +97,7 @@ export default class extends Vue {
       })
       .catch(err => {
         this.is =
-          (typeof this.error === 'function' ? this.error(err) : this.error) ||
+          (isFn(this.error) ? (this.error as any)(err) : this.error) ||
           status.error
       })
   }

src/components/ChooserAsyncFunctional.tsx

@@ -11,6 +11,8 @@ import Vue, { Component, RenderContext, VNode } from 'vue'
 import Info from './Info'
 import Loading from './Loading'
 
+import { hasOwnProperty, isFn } from '@/utils'
+
 /// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///
 // const ModuleOne: any = getAsync(() =>
 //  import(/* webpackChunkName: "ihOne" */ './ModuleOne')
@@ -111,7 +113,7 @@ function get(state: state) {
     })
     .catch(err => {
       state.i.i =
-        (typeof state.error === 'function' ? state.error(err) : state.error) ||
+        (isFn(state.error) ? (state.error as any)(err) : state.error) ||
         status.error
     })
 }
@@ -251,8 +253,7 @@ export default (context: RenderContext) => {
   const data = context.data
   const state = getState(
     temp,
-    // eslint-disable-next-line no-prototype-builtins
-    data.hasOwnProperty('key') ? data.key : (data.key = '')
+    hasOwnProperty(data, 'key') ? data.key : (data.key = '')
   )
 
   // situations to use VNode cache

src/components/File.tsx

@@ -1,9 +1,10 @@
 /*
  * @Description: 文件下载(链接)
+ *【请确保(所在入口/当前文件)引用了'~element-ui/packages/theme-chalk/src/link'样式】
  * @Author: 毛瑞
  * @Date: 2020-03-02 16:46:53
  */
-import { CreateElement } from 'vue'
+import { CreateElement, VNode } from 'vue'
 // see: https://github.com/kaorun343/vue-property-decorator
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 
@@ -12,6 +13,7 @@ import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 // import STYLE from './index.module.scss'
 import ElLink from 'element-ui/lib/link'
 
+import { isEqual } from '@/utils'
 import { download, free, IFile, save } from '@/utils/downloader'
 
 /// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///
@@ -32,82 +34,112 @@ export default class extends Vue {
   /// [model] (@Model('change') readonly attr!: string) ///
   /// [props] (@Prop() readonly attr!: string) ///
   /** 文件下载地址 */
-  @Prop() readonly url!: string
-  /** 显示文字 */
-  @Prop() readonly text!: string
+  @Prop() readonly href!: string
   /** 查询参数 */
   @Prop() readonly query?: IObject
-  /** 查询参数 */
+  /** 显示文字 */
+  @Prop() readonly text?: string
+  /** 禁用 */
+  @Prop() readonly disabled?: boolean
+  /** 类型 */
   @Prop({ default: 'primary' }) readonly type?: string
+  /** 图表 */
+  @Prop({ default: 'el-icon-document' }) readonly icon?: string
   /// [data] (attr: string = '响应式属性' // 除了 undefined) ///
   private status: status = status.init
+  private isSleep = false // 是否失活/休眠
   /// 非响应式属性 (attr?: string // undefined) ///
   private $_file?: IFile
+  private $_vnode?: VNode
   /// [computed] (get attr() {} set attr(){}) ///
   /// [LifeCycle] (private beforeCreate(){}/.../destroyed(){}) ///
+  private activated() {
+    this.isSleep = false
+  }
+
+  private deactivated() {
+    this.isSleep = true
+  }
+
   private beforeDestroy() {
     this.$_file && free(this.$_file)
   }
 
   /// [watch] (@Watch('attr') onAttrChange(val, oldVal) {}) ///
-  /// [methods] (method(){}) ///
-  @Watch('url')
+  @Watch('href')
   @Watch('query')
+  private reset(value: any, old: any) {
+    // diff
+    if (old && isEqual(value, old)) {
+      return
+    }
+
+    this.status = status.init
+    this.$_file && free(this.$_file)
+  }
+
+  /// [methods] (method(){}) ///
   private load() {
-    this.status = status.loading
-    download(this.url, this.query)
-      .then(res => {
-        this.$_file && free(this.$_file)
-        this.$_file = res
-        this.status = status.success
-        this.save()
-        setTimeout(this.reset.bind(this), ALIVE)
-      })
-      .catch(() => {
-        this.status = status.error
-      })
+    const href = this.href
+    if (href) {
+      this.status = status.loading
+      download(href, this.query)
+        .then(res => {
+          this.$_file && free(this.$_file)
+          this.$_file = res
+          this.status = status.success
+          this.save()
+          setTimeout(this.reset.bind(this), ALIVE)
+        })
+        .catch(() => {
+          this.status = status.error
+        })
+    }
   }
 
   private save() {
     save(this.$_file as IFile)
   }
 
-  private reset() {
-    this.status = status.init
-    this.$_file && free(this.$_file)
-  }
-
   // see: https://github.com/vuejs/jsx#installation
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private render(h: CreateElement) {
+    if (this.isSleep) {
+      return this.$_vnode
+    }
+
     // 依赖收集
     switch (this.status) {
       case status.loading:
-        return (
+        return (this.$_vnode = (
           <ElLink disabled type={this.type} icon="el-icon-loading">
             {this.text}
+            {this.$slots.default}
           </ElLink>
-        )
+        ))
       case status.error:
-        return (
+        return (this.$_vnode = (
           <ElLink
             type="danger"
             icon="el-icon-refresh-right"
             on={{ click: this.load }}
           >
             {this.text}
+            {this.$slots.default}
           </ElLink>
-        )
+        ))
       default:
-        return (
+        return (this.$_vnode = (
           <ElLink
             type={this.type}
-            icon="el-icon-document"
+            icon={this.icon}
+            disabled={this.disabled}
             on={{ click: this.status === status.init ? this.load : this.save }}
           >
             {this.text}
+            {this.$slots.default}
           </ElLink>
-        )
+        ))
     }
   }
 }

src/components/Image.tsx

@@ -3,15 +3,16 @@
  * @Author: 毛瑞
  * @Date: 2020-03-02 13:25:23
  */
-import { CreateElement } from 'vue'
+import { CreateElement, VNode } from 'vue'
 // see: https://github.com/kaorun343/vue-property-decorator
-import { Component, Vue, Prop } from 'vue-property-decorator'
+import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 
 /// [import] vue组件,其他,CSS Module ///
 // import { getAsync } from '@/utils/highOrder'
 // import STYLE from './index.module.scss'
 import Info from './Info'
 
+import { isEqual } from '@/utils'
 import { download, free, IFile } from '@/utils/downloader'
 
 /// 常量(UPPER_CASE),单例/变量(camelCase),函数(无副作用,camelCase) ///
@@ -33,17 +34,24 @@ export default class extends Vue {
   /// [model] (@Model('change') readonly attr!: string) ///
   /// [props] (@Prop() readonly attr!: string) ///
   /** 文件下载地址 */
-  @Prop() readonly url!: string
+  @Prop() readonly src!: string
   /** 查询参数 */
   @Prop() readonly query?: IObject
+  @Prop() readonly alt?: string
   /// [data] (attr: string = '响应式属性' // 除了 undefined) ///
   private status: status = status.init
+  private isSleep = false // 是否失活/休眠
   /// 非响应式属性 (attr?: string // undefined) ///
   private $_file?: IFile
+  private $_vnode?: VNode
   /// [computed] (get attr() {} set attr(){}) ///
   /// [LifeCycle] (private beforeCreate(){}/.../destroyed(){}) ///
-  private created() {
-    this.load()
+  private activated() {
+    this.isSleep = false
+  }
+
+  private deactivated() {
+    this.isSleep = true
   }
 
   private beforeDestroy() {
@@ -52,9 +60,21 @@ export default class extends Vue {
 
   /// [watch] (@Watch('attr') onAttrChange(val, oldVal) {}) ///
   /// [methods] (method(){}) ///
-  private load() {
+  @Watch('src', { immediate: true })
+  @Watch('query')
+  private load(value: any, old: any) {
+    const src = this.src
+    if (!src) {
+      return
+    }
+
+    // diff
+    if (old && isEqual(value, old)) {
+      return
+    }
+
     this.status = status.loading
-    download(this.url, this.query)
+    download(src, this.query)
       .then(res => {
         this.$_file && free(this.$_file)
         this.$_file = res
@@ -68,26 +88,43 @@ export default class extends Vue {
   // see: https://github.com/vuejs/jsx#installation
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   private render(h: CreateElement) {
+    if (this.isSleep) {
+      return this.$_vnode
+    }
+
     // 依赖收集
     switch (this.status) {
       case status.init:
-        return (
+        return (this.$_vnode = (
           <Info
             icon="el-icon-picture"
             type="info"
-            msg=""
+            msg={this.alt}
             retry="加载图片"
             on={{ $: this.load }}
           />
-        )
+        ))
       case status.loading:
-        return (
-          <Info icon="el-icon-picture" type="primary" msg="加载中" retry="" />
-        )
+        return (this.$_vnode = (
+          <Info
+            icon="el-icon-picture"
+            type="primary"
+            msg={this.alt}
+            retry="加载中"
+          />
+        ))
       case status.error:
-        return <Info icon="el-icon-picture-outline" on={{ $: this.load }} />
+        return (this.$_vnode = (
+          <Info
+            icon="el-icon-picture-outline"
+            msg={this.alt}
+            on={{ $: this.load }}
+          />
+        ))
       default:
-        return <img src={(this.$_file as IFile).src} />
+        return (this.$_vnode = (
+          <img src={(this.$_file as IFile).src} alt={this.alt} />
+        ))
     }
   }
 }

src/components/Loading.vue

@@ -9,15 +9,15 @@
       <svg viewBox="25 25 50 50">
         <!-- 背景圈 -->
         <circle
+          r="20"
           cx="50"
           cy="50"
-          r="20"
         />
         <!-- 前景圈（动画） -->
         <circle
+          r="20"
           cx="50"
           cy="50"
-          r="20"
         />
       </svg>
       <!-- 文字 -->
@@ -56,6 +56,8 @@ export default class extends Vue {
 
   svg {
     width: 100px;
+    background: url(~@/assets/logo.png) center no-repeat;
+    animation: hue 2.5s infinite;
   }
 
   circle {
@@ -67,13 +69,24 @@ export default class extends Vue {
     }
 
     &:last-child {
-      animation: dash 2.5s linear infinite;
+      animation: dash 2.5s infinite;
       stroke: $colorTheme;
       stroke-linecap: round;
     }
   }
 }
-// 转圈动画
+// 渐变
+@keyframes hue {
+  0% {
+    filter: hue-rotate(0);
+  }
+
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+// 转圈
 @keyframes dash {
   0% {
     stroke-dasharray: 0, 250%;