@ajaxjs/ui 1.1.8 → 1.2.0

package/src/widget/Article.vue

@@ -0,0 +1,59 @@
+<template>
+  <article>
+    <h2>{{title}}</h2>
+
+    <div class="toolbar">
+      <span v-if="author">作者: {{author}}</span> &nbsp;
+      <a :href="source" v-if="source" target="_blank">
+
+        <svg width="16px" height="16px" viewBox="0 0 24 24" style="cursor:pointer;vertical-align: middle;">
+          <g stroke-width="2.1" stroke="#666" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="17 13.5 17 19.5 5 19.5 5 7.5 11 7.5"></polyline>
+            <path d="M14,4.5 L20,4.5 L20,10.5 M20,4.5 L11,13.5"></path>
+          </g>
+        </svg>
+        来源</a>
+      <FontSize style="float:right;clear:both"></FontSize>
+    </div>
+    <slot></slot>
+  </article>
+</template>
+
+<script>
+import FontSize from './AdjustFontSize.vue';
+
+export default { 
+  props: {
+    title: String, author: String, source: String
+  },
+  components: { FontSize }
+}
+</script>
+
+<style lang="less" scoped>
+@import "../style/common-functions.less";
+
+article {
+  & > p {
+    .aj-text-function();
+    text-indent: 2em;
+  }
+  & > img,
+  & > p > img {
+    max-width: 80%;
+    margin: 0 auto;
+    display: block;
+  }
+
+  h2 {
+    .aj-text-title();
+  }
+
+  .toolbar {
+    height: 15px;
+    margin: 30px 0;
+    font-size: 0.8rem;
+    text-align: right;
+  }
+}
+</style>

package/src/widget/EmptyContent.js

@@ -0,0 +1,4 @@
+export default {
+    empty: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiNEQURFRTMiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTUwLjU5OCAxMS4wOTNDMjUuNTU0IDE1Ljc2IDExLjcyOCAyNC41NzMgOS4xMiAzNy41MzUgNS45OSA2OC42NDQgMTI4LjA4IDcwLjIgMTEzLjIxIDEwMi44NjNjLTcuODI2IDEwLjg4Ny0yNS41NjYgMTMuMjItNTMuMjE5IDYuOTk5IiBzdHJva2UtZGFzaGFycmF5PSIzIi8+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZmlsbD0iI0ZGRiIgZD0ibTU1IDY4LjI3IDQyLjE2Mi0xMi4zMjR2NDkuNTc3TDU1IDExNy41Njh6TTU1IDY4LjEwOCAxNi4wODEgNTUuOTQ2djQ5LjU3N0w1NSAxMTcuNTY4eiIvPjxwYXRoIGZpbGw9IiNGRkYiIGQ9Ik0xNi4wMTIgNTYuMDQgNTUgNjguMTA4IDQyLjUgODYuNzU3IDQuNzMgNzMuMDYzek05Ny4xNjIgNTUuOTQ2IDU1IDY4LjEwOGwxMi44MSAxOC42NDkgNDIuMzI1LTE0LjE2NnoiLz48cGF0aCBmaWxsPSIjRjZGN0Y4IiBkPSJtMTYuMDgxIDU1Ljk0NiA0My4zNDctMTIuMTYyIDM3LjczNCAxMi4xNjJMNTUgNjguMTA4eiIvPjwvZz48ZyBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBmaWxsPSIjRkZGIiBkPSJNNzguMDY4IDEwLjMxIDYwLjA0IDguOGwyLjc5LTUuMzF6Ii8+PHBhdGggZmlsbD0iI0Y2RjdGOCIgZD0iTTc4LjA2OCAxMC4zMSA1Ni40NSAxMy44OGwtMy44MzQtNS45MzR6Ii8+PC9nPjwvZz48L3N2Zz4=',
+    emptyDrak: 'data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEyMCIgd2lkdGg9IjEyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMzYTNjNDYiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PHBhdGggZD0iTTUwLjU5OCAxMS4wOTNDMjUuNTU0IDE1Ljc2IDExLjcyOCAyNC41NzMgOS4xMiAzNy41MzUgNS45OSA2OC42NDQgMTI4LjA4IDcwLjIgMTEzLjIxIDEwMi44NjNjLTcuODI2IDEwLjg4Ny0yNS41NjYgMTMuMjItNTMuMjE5IDYuOTk5IiBzdHJva2UtZGFzaGFycmF5PSIzIi8+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PGcgZmlsbD0iIzFhMWIxZSI+PHBhdGggZD0ibTU1IDY4LjI3IDQyLjE2Mi0xMi4zMjR2NDkuNTc3TDU1IDExNy41Njh6TTU1IDY4LjEwOCAxNi4wODEgNTUuOTQ2djQ5LjU3N0w1NSAxMTcuNTY4eiIvPjxwYXRoIGQ9Ik0xNi4wMTIgNTYuMDQgNTUgNjguMTA4IDQyLjUgODYuNzU3IDQuNzMgNzMuMDYzek05Ny4xNjIgNTUuOTQ2IDU1IDY4LjEwOGwxMi44MSAxOC42NDkgNDIuMzI1LTE0LjE2NnoiLz48L2c+PHBhdGggZD0ibTE2LjA4MSA1NS45NDYgNDMuMzQ3LTEyLjE2MiAzNy43MzQgMTIuMTYyTDU1IDY4LjEwOHoiIGZpbGw9IiMxNDE1MTgiLz48L2c+PGcgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTc4LjA2OCAxMC4zMSA2MC4wNCA4LjhsMi43OS01LjMxeiIgZmlsbD0iIzFhMWIxZSIvPjxwYXRoIGQ9Ik03OC4wNjggMTAuMzEgNTYuNDUgMTMuODhsLTMuODM0LTUuOTM0eiIgZmlsbD0iIzE0MTUxOCIvPjwvZz48L2c+PC9zdmc+'
+};

package/src/widget/Expander.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="aj-expander" :style="'height:' + (expended ? openHeight : closeHeight) + 'px;'">
+    <div :class="expended ? 'closeBtn' : 'openBtn'" @click="expended = !expended;"></div>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * 展开闭合器
+ */
+export default {
+  props: {
+    openHeight: { type: Number, default: 200 },
+    closeHeight: { type: Number, default: 50 },
+  },
+  data(): any {
+    return {
+      expended: false,
+    };
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.aj-expander {
+  overflow: hidden;
+  position: relative;
+  clear: both;
+  transition: height 200ms ease 0s;
+
+  .mask-layer {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 23px;
+    width: 100%;
+    background: -webkit-gradient(
+      linear,
+      center top,
+      center bottom,
+      from(transparent),
+      to(white)
+    );
+  }
+
+  .openBtn {
+    background: url("https://ajaxjs.nos-eastchina1.126.net/images/openBtn.png");
+  }
+
+  .closeBtn {
+    background: url("https://ajaxjs.nos-eastchina1.126.net/images/closeBtn.png");
+  }
+
+  .closeBtn,
+  .openBtn {
+    width: 45px;
+    height: 32px;
+    position: absolute;
+    cursor: pointer;
+    top: 0px;
+    right: 0px;
+  }
+}
+</style>

package/src/widget/FileUploader/FileUploader.less

@@ -0,0 +1,68 @@
+.aj-file-uploader {
+    width: 360px;
+
+    &>* {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    label {
+        margin-right: 2%;
+
+        &>div {
+            border: 1px solid lightgray;
+            border-radius: 5px;
+            text-align: center;
+            color: gray;
+            cursor: pointer;
+            font-size: 0.8rem;
+            padding: 10px;
+            padding-bottom: 25px;
+            width: 100px;
+            height: 70px;
+            transition: border-color linear 300ms, color linear 300ms;
+
+            &:hover {
+                border-color: gray;
+                color: black;
+            }
+
+            &>div {
+                font-size: 2rem;
+            }
+        }
+    }
+
+    button {
+        min-width: 110px;
+    }
+
+    input[type="file"] {
+        display: none;
+    }
+
+    .msg {
+        font-size: 0.8rem;
+        color: gray;
+        max-width: 50%;
+        word-break: break-word;
+        text-overflow: ellipsis;
+
+        &>div {
+            font-size: 0.75rem;
+        }
+    }
+
+    .perviewImg {
+        max-width: 260px;
+    }
+
+    .fileName {
+        // display: inline-block;
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+        max-width: 120px;
+        max-height: 20px;
+        overflow: hidden;
+    }
+}

package/src/widget/FileUploader/FileUploader.ts

@@ -0,0 +1,156 @@
+import Empty from '../EmptyContent';
+
+export default {
+    props: {
+        action: { type: String, required: false }, // 上传路径
+        limitSize: { type: Number, default: 20000 }, // 文件大小限制
+        limitFileType: String,
+        isImgUpload: Boolean,
+        isShowBtn: { type: Boolean, default: true },
+        accpectFileType: {
+            type: String, default() {
+                if (this.isImgUpload)
+                    return 'image/*';
+            }
+        }, // 可以上传类型 如 image/*
+        buttonBottom: Boolean, // 上传按钮是否位于下方
+        radomId: {
+            type: Number, default() { // 不重复的 id，用关于关联 label 与 input[type=file]
+                return Math.round(Math.random() * 1000);
+            },
+        },
+    },
+
+    data() {
+        return {
+            model: { children: [] },
+            imgSrc: Empty.empty,
+            open: false,
+            allowAddNode: false,
+            // isFolder : false
+            fileName: '',        // 获取文件名称，只能是名称，不能获取完整的文件目录
+            fileSize: 0,         // 文件大小
+            progress: 0,         // 上传进度百分比
+            errMsg: '',          // 错误信息。约定：只有为空字符串，才表示允许上传。
+            newlyId: '',         // 成功上传之后的文件 id
+            fileObj: null
+        }
+    },
+
+    methods: {
+        /**
+         * 选择文件后触发的事件
+         *
+         * @param ev
+         */
+        onUploadInputChange(ev: Event): void {
+            let fileInput: HTMLInputElement = <HTMLInputElement>ev.target;
+            if (!fileInput.files || !fileInput.files[0]) return;
+
+            // this.errStatus = [false, false, false];
+            this.onFileGet(fileInput.files);
+
+            let file: File = fileInput.files[0];
+            this.fileObj = file;
+
+            if (this.isImgUpload) {
+                let reader: FileReader = new FileReader();
+                reader.onload = (e) => {
+                    let imgBase64: string = <string>e.target.result; // 得到了图片的 base64 编码
+                    // alert(imgBase64Str);
+                    this.imgSrc = imgBase64;
+                }
+
+                reader.readAsDataURL(file);
+            }
+        },
+
+        /**
+         * 返回 File 对象，在表单混合上传时候有用
+         * @returns 
+         */
+        getFileObj(): File {
+            return this.fileObj;
+        },
+
+        onDrop(ev: DragEvent): void {
+            ev.preventDefault(); // 阻止进行拖拽时浏览器的默认行为，即自动打开图片
+
+            if (ev.dataTransfer?.files) this.onFileGet(ev.dataTransfer.files);
+        },
+
+        onFileGet(files: FileList): void {
+            let file: File = files[0],
+                fileType: string = file.type;
+
+            this.$fileObj = file;
+            this.fileName = file.name;
+            this.fileSize = file.size;
+        },
+        /**
+         * 执行上传
+         *
+         * @param this
+         */
+        doUpload(): void {
+            // this.$uploadOk_callback({ isOk: true, msg: "ok!", imgUrl: "fdfdf" });
+            // return;
+
+            let fd: FormData = new FormData();
+
+            if (this.$blob) fd.append("file", this.$blob, this.fileName);
+            else if (this.$fileObj) fd.append("file", this.$fileObj);
+
+            let xhr: XMLHttpRequest = new XMLHttpRequest();
+            //@ts-ignore
+            xhr.onreadystatechange = aj.xhr.requestHandler.delegate(
+                null,
+                this.$uploadOk_callback,
+                "json"
+            );
+            xhr.open("POST", this.action, true);
+            xhr.onprogress = (ev: ProgressEvent) => {
+                let progress: number = 0,
+                    p: number = ~~((ev.loaded * 1000) / ev.total);
+                p = p / 10;
+
+                if (progress !== p) progress = p;
+
+                this.progress = progress;
+            };
+
+            xhr.send(fd);
+        },
+
+        changeByte: changeByte
+    }
+}
+
+/**
+ * 字节 Byte 转化成 KB，MB，GB
+ *
+ * @param limit
+ */
+function changeByte(limit: number): string {
+    let size: string = "";
+
+    if (limit < 0.1 * 1024)
+        // 小于 0.1KB，则转化成 B
+        size = limit.toFixed(2) + "B";
+    else if (limit < 0.1 * 1024 * 1024)
+        // 小于 0.1MB，则转化成 KB
+        size = (limit / 1024).toFixed(2) + "KB";
+    else if (limit < 0.1 * 1024 * 1024 * 1024)
+        // 小于 0.1GB，则转化成 MB
+        size = (limit / (1024 * 1024)).toFixed(2) + "MB";
+    // 其他转化成 GB
+    else size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB";
+
+    let index = size.indexOf("."); // 获取小数点处的索引
+
+    if (size.substr(index + 1, 2) == "00")
+        // 获取小数点后两位的值，判断后两位是否为 00，如果是则删除 00
+        return size.substring(0, index) + size.substr(index + 3, 2);
+
+    return size;
+}

package/src/widget/FileUploader/FileUploader.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="aj-file-uploader">
+    <div v-if="isImgUpload">
+      <img class="perviewImg" :src='imgSrc' />
+      <br />
+    </div>
+
+    <table>
+      <tr>
+        <td>
+          <input type="file" :id="'uploadInput_' + radomId" @change="onUploadInputChange" :accept="accpectFileType" />
+
+          <label class="pseudoFilePicker" :for="'uploadInput_' + radomId">
+            <div @drop="onDrop" ondragover="event.preventDefault();">
+              <div>+</div>点击选择文件<br />或拖放到此
+            </div>
+          </label>
+
+        </td>
+        <td>
+          <div class="msg" v-if="errMsg != ''">
+            允许类型：{{limitFileType || '无限制'}}
+            <br />
+            允许大小：{{limitSize ? changeByte(limitSize * 1024) : '无限制'}}
+            <span class="slot"></span>
+          </div>
+
+          <div class="msg" v-if="errMsg == ''">
+            <div class="fileName" :title="'本地文件名: ' + fileName">{{fileName}}</div>
+            <div v-if="fileSize">{{changeByte(fileSize)}}</div>
+            <button @click.prevent="doUpload" v-if="isShowBtn">{{progress && progress !== 100 ? '上传中 ' + progress + '%': '上传'}}</button>
+          </div>
+        </td>
+      </tr>
+
+    </table>
+
+  </div>
+</template>
+
+<script lang="ts" src="./FileUploader.ts"></script>
+
+<style lang="less" src="./FileUploader.less"></style>