fast-vue-multi-pages 1.0.25 → 1.0.27

package/component/fast-panel-collapse.vue

@@ -0,0 +1,100 @@
+<script>
+import {defineComponent} from 'vue'
+import {FastVueMultiTool} from "fast-vue-multi-pages";
+
+export default defineComponent({
+  name: "fast-panel-collapse",
+  props: {
+    collapsed: {
+      type: Boolean,
+      default: false
+    },
+    duration: {
+      type: Number,
+      default: 300
+    },
+    showEasing: {
+      type: String,
+      default: 'linear'
+    },
+    closeEasing: {
+      type: String,
+      default: 'linear'
+    }
+  },
+  emits: ["update:collapsed"],
+  watch: {
+    collapsed(newValue) {
+      if (newValue) {
+        this.closePanel();
+      } else {
+        this.showPanel();
+      }
+    }
+  },
+  data() {
+    return {
+      panelCode: "",
+      initSize: {
+        width: 0,
+        height: 0
+      }
+    }
+  },
+  created() {
+    this.panelCode = FastVueMultiTool.UUID.buildOnlyCode("Panel");
+    this.$nextTick(() => {
+      this.initSize = FastVueMultiTool.Element.getRealSize(this.$refs.panel);
+      if (this.collapsed) {
+        this.$refs.panel.style.display = "none";
+      }
+    });
+  },
+  methods: {
+    showPanel() {
+      FastVueMultiTool.Animate.startValueAnimate(this.panelCode, {
+        from: 0,
+        to: this.initSize.height,
+        duration: this.duration,
+        easing: this.showEasing,
+        update: (value) => {
+          this.$refs.panel.style.height = value + "px";
+        },
+        begin: () => {
+          this.$refs.panel.style.display = "block";
+        },
+        complete: () => {
+          this.$refs.panel.style.display = "block";
+          this.$refs.panel.style.height = "auto";
+        },
+      });
+    },
+    closePanel() {
+      FastVueMultiTool.Animate.startValueAnimate(this.panelCode, {
+        from: this.initSize.height,
+        to: 0,
+        duration: this.duration,
+        easing: this.closeEasing,
+        update: (value) => {
+          this.$refs.panel.style.height = value + "px";
+        },
+        complete: () => {
+          this.$refs.panel.style.display = "none";
+        },
+      });
+    },
+  }
+});
+</script>
+
+<template>
+  <div ref="panel" class="fast-panel-collapse">
+    <slot/>
+  </div>
+</template>
+
+<style scoped>
+.fast-panel-collapse {
+  overflow: hidden;
+}
+</style>

package/dist/cjs/other/FastVueMultiAnimate.js

@@ -11,27 +11,28 @@ class FastVueMultiAnimate {
     static startValueAnimate(animateCode, animateConfig) {
         this.clearAnimate(animateCode);
         let params = ValueAnimateConfig.newParam(animateConfig);
+        let animObj = {
+            value: params.from,
+        };
         const anime = require('animejs');
         this.animateMap[animateCode] = anime.default({
-            targets: {
-                value: params.from,
-            },
+            targets: animObj,
             value: params.to,
             easing: params.easing,
             duration: params.duration,
             delay: params.delay,
-            _params: params,
             update: function () {
-                this._params.update(this.targets.value);
+                params.update(animObj.value);
             },
             changeBegin: function (anim) {
-                this._params.changeBegin(anim);
+                params.changeBegin(anim);
             },
             begin: function (anim) {
-                this._params.begin(anim);
+                params.begin(anim);
             },
             complete: function (anim) {
-                this._params.complete(anim);
+                params.complete(anim);
+                FastVueMultiAnimate.clearAnimate(animateCode);
             }
         });
     }

package/dist/esm/other/FastVueMultiAnimate.js

@@ -13,27 +13,28 @@ define(["require", "exports"], function (require, exports) {
         FastVueMultiAnimate.startValueAnimate = function (animateCode, animateConfig) {
             this.clearAnimate(animateCode);
             var params = ValueAnimateConfig.newParam(animateConfig);
+            var animObj = {
+                value: params.from,
+            };
             var anime = require('animejs');
             this.animateMap[animateCode] = anime.default({
-                targets: {
-                    value: params.from,
-                },
+                targets: animObj,
                 value: params.to,
                 easing: params.easing,
                 duration: params.duration,
                 delay: params.delay,
-                _params: params,
                 update: function () {
-                    this._params.update(this.targets.value);
+                    params.update(animObj.value);
                 },
                 changeBegin: function (anim) {
-                    this._params.changeBegin(anim);
+                    params.changeBegin(anim);
                 },
                 begin: function (anim) {
-                    this._params.begin(anim);
+                    params.begin(anim);
                 },
                 complete: function (anim) {
-                    this._params.complete(anim);
+                    params.complete(anim);
+                    FastVueMultiAnimate.clearAnimate(animateCode);
                 }
             });
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fast-vue-multi-pages",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "author": "janesen",
   "description": "快速搭建VUE项目工具类的基本库，主要用于每个功能页面独立生成html",
   "main": "./dist/cjs/index.js",