theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: 重构upload组件

Browse Source
This commit is contained in:
lockingreal
2022-03-27 17:54:37 +08:00
parent 0495d20af0
commit 7d2fc5f1ce
6 changed files with 254 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
example/docs/zh-CN/components/upload.md
View File

@@ -13,7 +13,7 @@
::: demo 使用 `lay-upload` 标签, 创建一个按钮上传单文件
<template>
  <lay-upload></lay-upload>
  <lay-upload @done="getUploadFile"/>
</template>
<script>
@@ -21,7 +21,32 @@ import { ref } from 'vue'
export default {
  setup() {
const getUploadFile = (file)=>{
console.log(file);
};
    return {
getUploadFile
    }
  }
}
</script>
:::
::: title 多文件上传
:::
::: demo 使用 `lay-upload` 标签, 并使用 `multiple` 创建一个可上传多个文件的上传组件
<template>
  <lay-upload :multiple="true"></lay-upload>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    return {
    }
  }
@@ -30,7 +55,7 @@ export default {
:::
::: title 简约按钮
::: title 拖拽上传
:::
::: demo 使用 `lay-upload` 标签, 使用 `drag属性` 创建一个可拖拽的上传文件域
@@ -53,292 +78,87 @@ export default {
:::
<!-- ::: title 按钮尺寸
::: title 自定义预览
:::
::: demo 使用 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
<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>
  <lay-upload @done="getUploadFile">
<template #preview>
<div class="easy-wrap">
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
</div>
</template>
</lay-upload>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
return {
}
}
  setup() {
const getUploadFile = (file)=>{
console.log(file);
};
    return {
getUploadFile
    }
  }
}
</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 属性
::: title Upload 属性
:::
::: 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` |
| url | 服务端上传接口，返回的数据规范请详见下文 | string | -- | -- |
| data | 请求上传接口的额外参数 | object | -- | -- |
| headers | 接口的请求头 | object | -- | -- |
| acceptMime | 文件选择框时的可选文件类型 | string | `images` | `images` |
| field | 设定文件域的字段名 | string | `file` | -- |
| size | 设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 | number | `0(不限制)` | -- |
| multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean | false | -- |
| number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number | `0(不限制)` | -- |
| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean | true | -- |
:::
::: title Button 插槽
::: title Upload 插槽
:::
::: table
| 名称 | 描述 | 参数 |
| ------- | -------- | ---- |
| default | 默认内容 | -- |
| preview | 自定义预览效果 | -- |
:::
::: title Button Group 属性
::: title Upload 事件
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ---- | ---- | ---- | ------ | ------ |
| - | - | - | - |
:::
::: title Button Group 插槽
:::
::: table
| 事件 | 描述 | 参数 |
| 名称 | 描述 | 参数 |
| ------- | -------- | ---- |
| default | 默认内容 | -- |
| choose | 打开系统选择文件窗体的回调 | -- |
| before | 上传事务开启前的回调 | -- |
| done | 上传事务结束的回调 | -- |
| error | 上传事务中出现错误的回调 | -- |
:::
::: comment
:::
::: previousNext button
::: -->

6
example/src/router/zh-CN.ts
View File

@@ -297,6 +297,12 @@ const zhCN = [
import("../../docs/zh-CN/components/datePicker.md"),
meta: { title: "日期选择器" },
},
{
path: "/zh-CN/components/upload",
component: () =>
import("../../docs/zh-CN/components/upload.md"),
meta: { title: "文件上传" },
},
{
path: "/zh-CN/components/layer",
component: () => import("../../docs/zh-CN/components/layer.md"),

6
example/src/view/utils/menus.ts
View File

@@ -176,6 +176,12 @@ const menus = [
subTitle: "datePicker",
path: "/zh-CN/components/datePicker",
},
{
id: 40,
title: "文件上传",
subTitle: "upload",
path: "/zh-CN/components/upload",
},
{
id: 29,
title: "图标选择器",