feat: 新增 upload 组件

example/docs/zh-CN/components/upload.md

@@ -0,0 +1,344 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 按钮用于开始一个即时操作。
+:::
+
+::: title 基础使用
+:::
+
+::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
+
+<template>
+  <lay-upload></lay-upload>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 简约按钮
+:::
+
+::: demo 使用 `lay-upload` 标签, 使用 `drag属性` 创建一个可拖拽的上传文件域
+
+<template>
+  <lay-upload :drag="true"></lay-upload>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+<!-- ::: title 按钮尺寸
+:::
+
+::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
+
+<template>
+  <lay-button type="primary" size="lg">原始按钮</lay-button>
+  <lay-button type="default" size="lg">默认按钮</lay-button>
+  <lay-button type="normal" size="lg">百搭按钮</lay-button>
+  <lay-button type="warm" size="lg">暖色按钮</lay-button>
+  <lay-button type="danger" size="lg">警告按钮</lay-button>
+  <lay-button type="disabled" size="lg">禁用按钮</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 流式按钮
+:::
+
+::: demo 使用 `fluid` 属性, 创建最大化按钮
+
+<template>
+  <lay-button type="primary" fluid>最大化按钮</lay-button>
+  <br/>
+  <br/>
+  <lay-button type="default" fluid>最大化按钮</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 圆角按钮
+:::
+
+::: demo 使用 `radius` 属性，创建圆角按钮
+
+<template>
+  <lay-button type="primary" radius>原始按钮</lay-button>
+  <lay-button type="default" radius>默认按钮</lay-button>
+  <lay-button type="normal" radius>百搭按钮</lay-button>
+  <lay-button type="warm" radius>暖色按钮</lay-button>
+  <lay-button type="danger" radius>警告按钮</lay-button>
+  <lay-button disabled radius>禁用按钮</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 按钮分组
+:::
+
+::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
+
+<template>
+  <div>
+    <lay-button-group>
+      <lay-button type="default">默认按钮</lay-button>
+      <lay-button type="default">默认按钮</lay-button>
+      <lay-button type="default">默认按钮</lay-button>
+    </lay-button-group>
+    <lay-button-group>
+      <lay-button type="primary">默认按钮</lay-button>
+      <lay-button type="primary">默认按钮</lay-button>
+      <lay-button type="primary">默认按钮</lay-button>
+    </lay-button-group>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 图标按钮
+:::
+
+::: demo 结合 `lay-icon` 组件, 创建图标按钮
+
+<template>
+  <lay-button-container>
+      <lay-button type="primary"><lay-icon type="layui-icon-left"></lay-icon></lay-button>
+      <lay-button type="primary"><lay-icon type="layui-icon-right"></lay-icon></lay-button>
+  </lay-button-container>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 按钮容器
+:::
+
+::: demo 尽管按钮在同节点并排时会自动拉开间距，但在按钮太多的情况，效果并不是很美好。因为你需要用到按钮容器
+
+<template>
+  <lay-button-container>
+      <lay-button type="default">新增</lay-button>
+      <lay-button type="default">删除</lay-button>
+      <lay-button type="default">修改</lay-button>
+  </lay-button-container>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 加载按钮
+:::
+
+::: demo 使用 `loading` 属性, 控制按钮的加载状态
+
+<template>
+  <lay-button-container>
+      <lay-button type="default" :loading="loadState">加载</lay-button>
+      <lay-switch v-model="loadState"></lay-switch>
+  </lay-button-container>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    const loadState = ref(true)
+
+    return {
+      loadState
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 事件处理
+:::
+
+::: demo 使用 `@click` 设置单击回调
+
+<template>
+  <lay-button type="default" @click="clickHandle">单击事件</lay-button>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    
+    const clickHandle = () => {
+      console.log('点击事件')
+    }
+
+    return {
+      clickHandle
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Button 变量
+:::
+
+```
+
+```
+
+::: title Button 属性
+:::
+
+::: table
+
+| 属性        | 描述     | 类型    | 默认值    | 可选值                             |
+| ----------- | -------- | ------- | --------- | ---------------------------------- |
+| type        | 主题     | string  | `primary` | `primary` `normal` `warm` `danger` |
+| size        | 尺寸     | string  | --        | `lg` `sm` `xs`                     |
+| fluid       | 最大化   | boolean | `false`   | `true` `false`                     |
+| radius      | 圆角     | boolean | `false`   | `true` `false`                     |
+| border      | 边框     | string  | `green`   | `green` `blue` `orange` `red`      |
+| disabled    | 禁用     | boolean | `false`   | `true` `false`                     |
+| loading     | 加载     | boolean | `false`   | `true` `false`                     |
+| native-type | 原生类型 | string  | `button`  | `button` `submit` `reset`          |
+
+:::
+
+::: title Button 插槽
+:::
+
+::: table
+
+| 名称    | 描述     | 参数 |
+| ------- | -------- | ---- |
+| default | 默认内容 | --   |
+
+:::
+
+::: title Button Group 属性
+:::
+
+::: table
+
+| 属性 | 描述 | 类型 | 默认值 | 可选值 |
+| ---- | ---- | ---- | ------ | ------ |
+| -    | -    | -    | -      |
+
+:::
+
+::: title Button Group 插槽
+:::
+
+::: table
+
+| 事件    | 描述     | 参数 |
+| ------- | -------- | ---- |
+| default | 默认内容 | --   |
+
+:::
+
+::: comment
+:::
+
+::: previousNext button
+::: -->

src/component/upload/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

src/component/upload/index.vue

@@ -0,0 +1,172 @@
+<script lang="ts">
+export default {
+  name: "LayUpload",
+};
+</script>
+<script lang="ts" setup>
+import "./index.less";
+import { Recordable } from "../../types";
+import { ref, watch, useSlots, withDefaults, onMounted } from "vue";
+//https://www.layuiweb.com/doc/modules/upload.html#options
+export interface LayUploadProps {
+  elem?: string | HTMLElement;
+  url?: string;
+  data?: Recordable;
+  headers?: Recordable;
+  accept?: "images" | "file" | "video" | "audio";
+  acceptMime?: "images" | "file" | "video" | "audio";
+  exts?: "jpg" | "png" | "gif" | "bmp" | "jpeg";
+  auto?: boolean;
+  bindAction?: string | HTMLElement;
+  field?: string;
+  size?: number;
+  multiple?: boolean;
+  number: number;
+  drag?: boolean;
+}
+const props = withDefaults(defineProps<LayUploadProps>(), {
+  accept: "images",
+  acceptMime: "images",
+  auto: true,
+  field: "file",
+  size: 0,
+  multiple: false,
+  number: 0,
+  drag: false,
+});
+
+const emit = defineEmits(["choose", "before", "done", "error"]);
+
+const slot = useSlots();
+const slots = slot.default && slot.default();
+const isDragEnter = ref(false);
+
+interface localUploadOption{
+    url:string,
+    file?:unknown,
+    otherRequestData?:any
+}
+
+const localUpload = (option:any) => {
+    let file, formData, xhr: XMLHttpRequest, loadedevt, total, per: number, url, uploading;
+    formData = new FormData();
+    xhr = new XMLHttpRequest();
+    url = option.url;
+    file = option.file;
+    formData.append("files", file);
+    //append 其他数据
+    if (option.otherRequestData instanceof Object) {
+      var _requestDate = option.otherRequestData;
+      for (var key in _requestDate) {
+        formData.append(key, _requestDate[key]);
+      }
+    }
+    //事件回调
+    // event callbacks
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4) {
+        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304) {
+          option.successF instanceof Function &&
+            option.successF(xhr.responseText);
+        } else {
+          option.errorF instanceof Function && option.errorF(xhr.responseText);
+        }
+      } else {
+        option.errorF instanceof Function && option.errorF();
+      }
+    };
+    //侦查当前附件上传情况
+    /**
+     * 附件的上传进度条方法在xhr.upload.onprogeress上，
+     * 还有一个xhr.onprogress,是下载时候的进度条,***
+     * */
+    xhr.upload.onprogress = function (event) {
+      // event.total是需要传输的总字节，event.loaded是已经传输的字节。如果event.lengthComputable不为真，则event.total等于0
+      if (event.lengthComputable) {
+        loadedevt = event.loaded;
+        total = event.total;
+        per = Math.floor((100 * loadedevt) / total);
+      }
+      //执行回调
+      option.uploadProgress instanceof Function && option.uploadProgress(per);
+    };
+    xhr.open("post", url, true); //不能是GET, get请求数据发送只能拼接在URL后面
+    xhr.setRequestHeader("Accept", "application/json, text/javascript");
+    xhr.send(formData);
+};
+
+const getUploadChange = (e: any) => {
+  // console.log(e.srcElement);
+  const file = e.target.files[0];
+  console.log(file);
+  if (props.url) {
+    // 表单提交
+    localUpload({
+        url:props.url,
+        file:file
+    });
+  } else {
+    //
+    
+  }
+};
+const uploadDragOver = (e: any) => {
+  //console.log("uploadDrag9ikme",e);
+};
+const uploadDragDrop = (e: any) => {
+  console.log("uploadDragDrop", e);
+  isDragEnter.value = false;
+};
+const uploadDragStop = (e: any) => {
+  console.log("uploadDragStop", e);
+};
+const uploadDragEnter = (e: any) => {
+  console.log("", e);
+  isDragEnter.value = true;
+};
+const uploadDragLeave = (e: any) => {
+  isDragEnter.value = false;
+};
+</script>
+<template>
+  <div class="layui-upload" v-if="!drag">
+    <div class="layui-upload-btn-box">
+      <button type="button" class="layui-btn">上传图片</button>
+      <input
+        class="layui-upload-file"
+        :multiple="multiple"
+        type="file"
+        :accept="accept"
+        :name="field"
+        @change="getUploadChange"
+      />
+    </div>
+    <div class="layui-upload-list">
+      <img class="layui-upload-img" id="demo1" />
+      <p id="demoText"></p>
+    </div>
+  </div>
+  <div
+    v-else
+    class="layui-upload-drag"
+    :class="isDragEnter ? 'layui-upload-drag-draging' : ''"
+    @dragleave.stop="uploadDragLeave"
+    @dragenter.stop="uploadDragEnter"
+    @dragover.stop="uploadDragOver"
+    @drop="uploadDragDrop"
+  >
+    <i class="layui-icon"></i>
+    <p>点击上传，或将文件拖拽到此处</p>
+    <div class="layui-hide" id="uploadDemoView">
+      <hr />
+      <img src="" alt="上传成功后渲染" style="max-width: 196px" />
+    </div>
+    <input
+      class="layui-upload-file"
+      type="file"
+      :accept="accept"
+      :name="field"
+      @change="getUploadChange"
+    />l
+  </div>
+</template>