feat: 新增 upload 组件
This commit is contained in:
lockingreal
parent
5927aa7e69
commit
c3397d972b
344
example/docs/zh-CN/components/upload.md
Normal file
344
example/docs/zh-CN/components/upload.md
Normal file
@ -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
|
||||
::: -->
|
||||
8
src/component/upload/index.ts
Normal file
8
src/component/upload/index.ts
Normal file
@ -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;
|
||||
172
src/component/upload/index.vue
Normal file
172
src/component/upload/index.vue
Normal file
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user