@ajaxjs/util 1.0.9 → 1.1.1

package/dist/widget/OpacityBanner.vue

@@ -0,0 +1,125 @@
+<template>
+  <ul class="aj-opacity-banner">
+    <slot></slot>
+  </ul>
+</template>
+
+<script lang="ts">
+/**
+ * 渐显 banner
+ * 注意：定时器保存在 DOM 元素的属性上，是否会内存泄漏呢？
+ */
+export default {
+  props: {
+    delay: { default: 3000 }, // 延时
+    fps: { default: 25 }, // 帧速
+  },
+  data(): any {
+    return {
+      active: 0, // 当前索引
+    };
+  },
+  mounted(): void {
+    this.list = this.$el.querySelectorAll("li"); // 各帧
+    this.list[0].style.opacity = "1";
+    this.run();
+  },
+  methods: {
+    /**
+     * 播放动画
+     *
+     * @param this
+     */
+    run(): void {
+      this.timer = window.setInterval(() => {
+        let active: number = this.active;
+        this.clear();
+        active += 1;
+        this.active = active % this.list.length;
+        this.animate(100);
+      }, this.delay);
+    },
+
+    /**
+     * 下一帧
+     *
+     * @param this
+     */
+    per(): void {
+      let active: number = this.active;
+      this.clear();
+      active -= 1;
+      active = active % this.list.length;
+
+      if (active < 0) active = this.list.length - 1;
+
+      this.active = active;
+      this.animate(100);
+    },
+
+    /**
+     * 内容淡出
+     */
+    clear(): void {
+      this.animate(0);
+    },
+
+    /**
+     *
+     * @param params
+     */
+    animate(params: number): void {
+      var el: HTMLLIElement = this.list[this.active],
+        fps: number = 1000 / this.fps;
+      // @ts-ignore
+      window.clearTimeout(el.timer);
+
+      window.setTimeout(function loop() {
+        var i: number = getOpacity(el);
+        let speed: number = (params - i) / 8;
+        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
+        // console.log("i=" + i + "; speed="+ speed+"; s="+s+"; k="+k);
+        i += speed;
+        el.style.opacity = String(i / 100);
+        // @ts-ignore
+        window.clearTimeout(el.timer);
+        // params.complete && params.complete.call(elem);
+        // @ts-ignore
+        el.timer = window.setTimeout(loop, fps);
+      }, fps);
+    },
+  },
+};
+
+/**
+ * 获取元素的透明度
+ *
+ * @param el
+ */
+function getOpacity(el: Element): number {
+  let v = Number(getComputedStyle(el)["opacity"]);
+  v *= 100;
+
+  return parseFloat(v + "") || 0;
+}
+</script>
+
+<style lang="less" scoped>
+.aj-opacity-banner {
+  position: relative;
+  min-height: 90px;
+
+  li {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    width: 100%;
+  }
+
+  img {
+    // border-top:solid 20px #00416d;
+    width: 100%;
+  }
+}
+</style>

package/dist/widget/ProcessLine.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="aj-process-line">
+    <div class="process-line">
+      <div v-for="(item, index) in items" :key="index" :class="{current: index == current, done: index < current}">
+        <span>{{index + 1}}</span>
+        <p>{{item}}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * 进度条
+ */
+export default {
+  props: {
+    items: {
+      type: Array,
+      default(): string[] {
+        return ["Step 1", "Step 2", "Step 3"];
+      },
+    },
+  },
+  data():any {
+    return {
+      current: 0,
+    };
+  },
+  methods: {
+    /**
+     *
+     * @param i
+     */
+    go(i: number): void {
+      this.current = i;
+    },
+
+    /**
+     *
+     */
+    perv(): void {
+      let perv: number = this.current - 1;
+      if (perv < 0) perv = this.items.length - 1;
+
+      this.go(perv);
+    },
+
+    /**
+     *
+     */
+    next(): void {
+      let next: number = this.current + 1;
+      if (this.items.length == next) next = 0; // 循环
+
+      this.go(next);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.aj-process-line {
+  display: flex;
+  padding: 5%;
+  justify-content: center;
+
+  .process-line {
+    font-size: 18px;
+    color: lightgray;
+    font-weight: bold;
+
+    & > div {
+      float: left;
+      width: 156px;
+      text-align: center;
+      position: relative;
+
+      &.current {
+        color: black;
+
+        span {
+          background-color: gray;
+        }
+      }
+
+      &.done {
+        //				color: lighten(@mainColor, 80%);
+        span {
+          //					background-color: lighten(@mainColor, 50%);
+        }
+
+        &::after {
+          //					background-color: lighten(@mainColor, 50%);
+        }
+      }
+
+      p {
+        font-size: 1rem;
+        letter-spacing: 3px;
+        padding-top: 5%;
+      }
+
+      span {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        border-radius: 50%;
+        color: #fff;
+        line-height: 32px;
+        font-size: 16px;
+        background-color: lightgray;
+        position: relative;
+        z-index: 1;
+      }
+
+      &:last-child::after {
+        display: none;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: 14px;
+        left: 94px;
+        width: 124px;
+        height: 4px;
+        background-color: lightgray;
+      }
+    }
+  }
+}
+</style>

package/dist/widget/Resize.d.ts

@@ -0,0 +1,51 @@
+declare const _default: {
+    data(): {
+        styleWidth: number;
+        styleHeight: number;
+        styleLeft: number;
+        styleTop: number;
+        sideLeft: number;
+        sideRight: number;
+        sideUp: number;
+        sideDown: number;
+        fixLeft: number;
+        fixTop: number;
+        fn: any;
+        LockX: boolean;
+        LockY: boolean;
+        Lock: boolean;
+        scale: {
+            enable: boolean;
+            ratio: number;
+            left: number;
+            top: number;
+        };
+        min: {
+            enable: boolean;
+            height: number;
+            width: number;
+        };
+        max: {
+            enable: boolean;
+            height: number;
+            width: number;
+        };
+    };
+    methods: {
+        /**
+         * 准备拖动
+         */
+        start(e: MouseEvent, fn: Function): void;
+        resize(e: MouseEvent): void;
+        stop(): void;
+        up(e: MouseEvent): void;
+        down(e: MouseEvent): void;
+        right(e: MouseEvent): void;
+        left(e: MouseEvent): void;
+        rightDown(e: MouseEvent): void;
+        rightUp(e: MouseEvent): void;
+        leftDown(e: MouseEvent): void;
+        leftUp(e: MouseEvent): void;
+    };
+};
+export default _default;

package/dist/widget/Resize.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    data() {
+        return {
+            styleWidth: 0,
+            styleHeight: 0,
+            styleLeft: 0,
+            styleTop: 0,
+            sideLeft: 0,
+            sideRight: 0,
+            sideUp: 0,
+            sideDown: 0,
+            fixLeft: 0,
+            fixTop: 0,
+            fn: null,
+            LockX: false,
+            LockY: false,
+            Lock: false,
+            scale: {
+                enable: true,
+                ratio: 0,
+                left: 0,
+                top: 0,
+            },
+            min: {
+                enable: false,
+                height: 100,
+                width: 200,
+            },
+            max: {
+                enable: false,
+                height: 300,
+                width: 500,
+            }
+        };
+    },
+    methods: {
+        /**
+         * 准备拖动
+         */
+        start(e, fn) {
+            this.styleWidth = this.$el.clientWidth;
+            this.styleHeight = this.$el.clientHeight;
+            this.styleLeft = this.$el.offsetLeft; // 记录鼠标相对拖放对象的位置
+            this.styleTop = this.$el.offsetTop;
+            this.sideLeft = e.clientX - this.styleWidth;
+            this.sideRight = e.clientX + this.styleWidth;
+            this.sideUp = e.clientY - this.styleHeight;
+            this.sideDown = e.clientY + this.styleHeight;
+            this.fixLeft = this.styleWidth + this.styleLeft;
+            this.fixTop = this.styleHeight + this.styleTop;
+            this.fn = fn;
+            if (this.scale.enable) {
+                this.scale.ratio = Math.max(this.scale.ratio, 0) || this.styleWidth / this.styleHeight; //设置比例
+                this.scale.left = this.styleLeft + this.styleWidth / 2; // left 和 top 的定位坐标
+                this.scale.top = this.styleTop + this.styleHeight / 2;
+            }
+            document.addEventListener("mousemove", this.resize); // mousemove 时移动 mouseup 时停止
+            document.addEventListener("mouseup", this.stop);
+        },
+        // 缩放
+        resize(e) {
+            window.getSelection().removeAllRanges(); // 清除选择
+            this.fn(e);
+            if (this.min.enable) {
+                if (this.styleHeight <= this.min.height)
+                    return;
+                if (this.styleWidth <= this.min.width)
+                    return;
+            }
+            if (this.max.enable) {
+                if (this.styleHeight >= this.max.height)
+                    return;
+                if (this.styleWidth >= this.max.width)
+                    return;
+            }
+            let s = this.$el.style;
+            s.width = this.styleWidth + "px";
+            s.height = this.styleHeight + "px";
+            s.top = this.styleTop + "px";
+            s.left = this.styleLeft + "px";
+        },
+        // 停止缩放
+        stop() {
+            document.removeEventListener("mousemove", this.resize);
+            document.removeEventListener("mouseup", this.stop);
+        },
+        //缩放程序
+        //上
+        up(e) {
+            this.styleHeight = Math.max(this.sideDown - e.clientY, 0);
+            this.styleTop = this.fixTop - this.styleHeight;
+            this.styleLeft = this.scale.left - this.styleWidth / 2;
+            console.log(this.styleLeft);
+        },
+        //下
+        down(e) {
+            this.styleHeight = Math.max(e.clientY - this.sideUp, 0);
+            this.styleLeft = this.scale.left - this.styleWidth / 2;
+        },
+        //右
+        right(e) {
+            this.styleWidth = Math.max(e.clientX - this.sideLeft, 0);
+        },
+        //左
+        left(e) {
+            this.styleWidth = Math.max(this.sideRight - e.clientX, 0);
+            this.styleLeft = this.fixLeft - this.styleWidth;
+        },
+        //右下
+        rightDown(e) {
+            this.right(e);
+            this.down(e);
+        },
+        //右上
+        rightUp(e) {
+            this.right(e);
+            this.up(e);
+        },
+        //左下
+        leftDown(e) {
+            this.left(e);
+            this.down(e);
+        },
+        //左上
+        leftUp(e) {
+            this.left(e);
+            this.up(e);
+        },
+    },
+};
+//# sourceMappingURL=Resize.js.map

package/dist/widget/Resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Resize.js","sourceRoot":"","sources":["../../src/widget/Resize.ts"],"names":[],"mappings":"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"}

package/dist/widget/Resize.ts

@@ -0,0 +1,152 @@
+export default {
+    data() {
+        return {
+            styleWidth: 0,// 样式参数值
+            styleHeight: 0,
+            styleLeft: 0,
+            styleTop: 0,
+            sideLeft: 0,  // 四条边定位坐标
+            sideRight: 0,
+            sideUp: 0,
+            sideDown: 0,
+            fixLeft: 0,   // top 和 left 定位参数
+            fixTop: 0,
+            fn: null,
+
+            LockX: false,// 是否锁定水平方向拖放
+            LockY: false,// 是否锁定垂直方向拖放
+            Lock: false,// 是否锁定
+
+            scale: {                // 按比例缩放
+                enable: true,      // 是否按比例缩放
+                ratio: 0,           // 设置比例(宽/高)
+                left: 0,
+                top: 0,
+            },
+
+            min: {                  // 最小控制
+                enable: false,
+                height: 100,
+                width: 200,
+            },
+            max: {                  // 最大控制
+                enable: false,
+                height: 300,
+                width: 500,
+            }
+
+        };
+    },
+    methods: {
+        /**
+         * 准备拖动
+         */
+        start(e: MouseEvent, fn: Function): void {
+            this.styleWidth = this.$el.clientWidth;
+            this.styleHeight = this.$el.clientHeight;
+            this.styleLeft = this.$el.offsetLeft;         // 记录鼠标相对拖放对象的位置
+            this.styleTop = this.$el.offsetTop;
+
+            this.sideLeft = e.clientX - this.styleWidth;
+            this.sideRight = e.clientX + this.styleWidth;
+            this.sideUp = e.clientY - this.styleHeight;
+            this.sideDown = e.clientY + this.styleHeight;
+
+            this.fixLeft = this.styleWidth + this.styleLeft;
+            this.fixTop = this.styleHeight + this.styleTop;
+            this.fn = fn;
+
+            if (this.scale.enable) {
+                this.scale.ratio = Math.max(this.scale.ratio, 0) || this.styleWidth / this.styleHeight;        //设置比例
+                this.scale.left = this.styleLeft + this.styleWidth / 2;// left 和 top 的定位坐标
+                this.scale.top = this.styleTop + this.styleHeight / 2;
+            }
+
+            document.addEventListener("mousemove", this.resize);// mousemove 时移动 mouseup 时停止
+            document.addEventListener("mouseup", this.stop);
+        },
+
+        // 缩放
+        resize(e: MouseEvent): void {
+            window.getSelection().removeAllRanges(); // 清除选择
+            this.fn(e);
+
+            if (this.min.enable) {
+                if (this.styleHeight <= this.min.height)
+                    return;
+                if (this.styleWidth <= this.min.width)
+                    return;
+            }
+            if (this.max.enable) {
+                if (this.styleHeight >= this.max.height)
+                    return;
+                if (this.styleWidth >= this.max.width)
+                    return;
+            }
+
+            let s = this.$el.style;
+            s.width = this.styleWidth + "px";
+            s.height = this.styleHeight + "px";
+            s.top = this.styleTop + "px";
+            s.left = this.styleLeft + "px";
+        },
+
+        // 停止缩放
+        stop(): void {
+            document.removeEventListener("mousemove", this.resize);
+            document.removeEventListener("mouseup", this.stop);
+        },
+
+        //缩放程序
+
+        //上
+        up(e: MouseEvent): void {
+            this.styleHeight = Math.max(this.sideDown - e.clientY, 0);
+            this.styleTop = this.fixTop - this.styleHeight;
+            this.styleLeft = this.scale.left - this.styleWidth / 2;
+            console.log(this.styleLeft)
+        },
+
+        //下
+        down(e: MouseEvent): void {
+            this.styleHeight = Math.max(e.clientY - this.sideUp, 0);
+            this.styleLeft = this.scale.left - this.styleWidth / 2;
+
+        },
+
+        //右
+        right(e: MouseEvent): void {
+            this.styleWidth = Math.max(e.clientX - this.sideLeft, 0);
+        },
+
+        //左
+        left(e: MouseEvent): void {
+            this.styleWidth = Math.max(this.sideRight - e.clientX, 0);
+            this.styleLeft = this.fixLeft - this.styleWidth;
+        },
+
+        //右下
+        rightDown(e: MouseEvent): void {
+            this.right(e);
+            this.down(e);
+        },
+
+        //右上
+        rightUp(e: MouseEvent): void {
+            this.right(e);
+            this.up(e);
+        },
+
+        //左下
+        leftDown(e: MouseEvent): void {
+            this.left(e);
+            this.down(e);
+        },
+
+        //左上
+        leftUp(e: MouseEvent): void {
+            this.left(e);
+            this.up(e);
+        },
+    },
+};

package/dist/widget/Resize.vue

@@ -0,0 +1,104 @@
+<template>
+  <!-- 拖拉缩放效果 -->
+  <div class="resize-box">
+    <div class="rRightDown" @mousedown="start($event, rightDown)"> </div>
+    <div class="rLeftDown" @mousedown="start($event, leftDown)"> </div>
+    <div class="rRightUp" @mousedown="start($event, rightUp)"> </div>
+    <div class="rLeftUp" @mousedown="start($event, leftUp)"> </div>
+    <div class="rRight" @mousedown="start($event, right)"> </div>
+    <div class="rLeft" @mousedown="start($event, left)"> </div>
+    <div class="rDown" @mousedown="start($event, down)"></div>
+    <div class="rUp" @mousedown="start($event, up)"> </div>
+  </div>
+</template>
+
+<script lang="ts" src="./Resize.ts"></script>
+
+<style lang="less" scoped>
+.rRightDown,
+.rLeftDown,
+.rLeftUp,
+.rRightUp,
+.rRight,
+.rLeft,
+.rUp,
+.rDown {
+  position: absolute;
+  background: #c00;
+  width: 7px;
+  height: 7px;
+  z-index: 5;
+  font-size: 0;
+}
+
+.rLeftDown, .rRightUp {
+  cursor: ne-resize;
+}
+
+.rRightDown, .rLeftUp {
+  cursor: nw-resize;
+}
+
+.rRight, .rLeft {
+  cursor: e-resize;
+}
+
+.rUp, .rDown {
+  cursor: n-resize;
+}
+
+.rLeftDown {
+  left: -4px;
+  bottom: -4px;
+}
+
+.rRightUp {
+  right: -4px;
+  top: -4px;
+}
+
+.rRightDown {
+  right: -4px;
+  bottom: -4px;
+  background-color: 0f;
+}
+
+.rLeftUp {
+  left: -4px;
+  top: -4px;
+}
+
+.rRight {
+  right: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.rLeft {
+  left: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.rUp {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.rDown {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.resize-box {
+  border: 1px solid gray;
+  width: 100px;
+  height: 60px;
+  top: 150px;
+  left: 550px;
+  background: #fff;
+  position: absolute;
+}
+</style>

package/dist/widget/TreeSelector.vue

@@ -0,0 +1,4 @@
+<!-- 下拉分类 -->
+<template>
+
+</template>