mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
Merge remote-tracking branch 'origin/main' into gitee
This commit is contained in:
xiaoxian521
commit
46cec38fe6
@ -60,6 +60,11 @@ menus:
|
||||
hsDatePicker: Date Picker
|
||||
hsDateTimePicker: DateTimePicker
|
||||
hsTimePicker: TimePicker
|
||||
hsTag: Tag
|
||||
hsStatistic: Statistic
|
||||
hsCollapse: Collapse
|
||||
hsProgress: Progress
|
||||
hsUpload: File Upload
|
||||
hsmenus: MultiLevel Menu
|
||||
hsmenu1: Menu1
|
||||
hsmenu1-1: Menu1-1
|
||||
|
||||
@ -60,6 +60,11 @@ menus:
|
||||
hsDatePicker: 日期选择器
|
||||
hsDateTimePicker: 日期时间选择器
|
||||
hsTimePicker: 时间选择器
|
||||
hsTag: 标签
|
||||
hsStatistic: 统计组件
|
||||
hsCollapse: 折叠面板
|
||||
hsProgress: 进度条
|
||||
hsUpload: 文件上传
|
||||
hsmenus: 多级菜单
|
||||
hsmenu1: 菜单1
|
||||
hsmenu1-1: 菜单1-1
|
||||
|
||||
16
package.json
16
package.json
@ -54,8 +54,8 @@
|
||||
"@logicflow/extension": "^1.2.19",
|
||||
"@pureadmin/descriptions": "^1.2.0",
|
||||
"@pureadmin/table": "^3.0.1",
|
||||
"@pureadmin/utils": "^2.4.0",
|
||||
"@vueuse/core": "^10.7.1",
|
||||
"@pureadmin/utils": "^2.4.3",
|
||||
"@vueuse/core": "^10.7.2",
|
||||
"@vueuse/motion": "^2.0.0",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
@ -77,20 +77,20 @@
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"pinia": "^2.1.7",
|
||||
"pinyin-pro": "^3.19.0",
|
||||
"pinyin-pro": "^3.19.3",
|
||||
"qrcode": "^1.5.3",
|
||||
"qs": "^6.11.2",
|
||||
"responsive-storage": "^2.2.0",
|
||||
"sortablejs": "^1.15.1",
|
||||
"sortablejs": "^1.15.2",
|
||||
"swiper": "^11.0.5",
|
||||
"typeit": "8.7.1",
|
||||
"v-contextmenu": "3.0.0",
|
||||
"v3-infinite-loading": "^1.3.1",
|
||||
"version-rocket": "^1.7.1",
|
||||
"vue": "^3.4.10",
|
||||
"vue": "3.4.14",
|
||||
"vue-i18n": "^9.9.0",
|
||||
"vue-json-pretty": "^2.3.0",
|
||||
"vue-pdf-embed": "^1.2.1",
|
||||
"vue-pdf-embed": "1.2.1",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-tippy": "^6.4.1",
|
||||
"vue-types": "^5.1.1",
|
||||
@ -153,10 +153,10 @@
|
||||
"svgo": "^3.2.0",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5.3.3",
|
||||
"vite": "^5.0.11",
|
||||
"vite": "^5.0.12",
|
||||
"vite-plugin-cdn-import": "^0.3.5",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-fake-server": "2.0.0",
|
||||
"vite-plugin-fake-server": "^2.1.1",
|
||||
"vite-plugin-remove-console": "^2.2.0",
|
||||
"vite-plugin-router-warn": "^1.0.0",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
|
||||
691
pnpm-lock.yaml
generated
691
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -9,3 +9,17 @@ type Result = {
|
||||
export const mapJson = (params?: object) => {
|
||||
return http.request<Result>("get", "/get-map-info", { params });
|
||||
};
|
||||
|
||||
/** 文件上传 */
|
||||
export const formUpload = data => {
|
||||
return http.request<Result>(
|
||||
"post",
|
||||
"https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b",
|
||||
{ data },
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "multipart/form-data"
|
||||
}
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@ -26,6 +26,15 @@ export default {
|
||||
title: $t("menus.hsmessage")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/upload",
|
||||
name: "PureUpload",
|
||||
component: () => import("@/views/components/upload/index.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsUpload"),
|
||||
extraIcon: "IF-pure-iconfont-new svg"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/date-picker",
|
||||
name: "DatePicker",
|
||||
@ -107,6 +116,38 @@ export default {
|
||||
title: $t("menus.hsbutton")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/progress",
|
||||
name: "PureProgress",
|
||||
component: () => import("@/views/components/progress.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsProgress")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/tag",
|
||||
name: "PureTag",
|
||||
component: () => import("@/views/components/tag.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsTag")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/statistic",
|
||||
name: "Statistic",
|
||||
component: () => import("@/views/components/statistic.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsStatistic")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/collapse",
|
||||
name: "Collapse",
|
||||
component: () => import("@/views/components/collapse.vue"),
|
||||
meta: {
|
||||
title: $t("menus.hsCollapse")
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/components/cascader",
|
||||
name: "Cascader",
|
||||
|
||||
@ -7,35 +7,10 @@
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
.el-upload {
|
||||
input[type="file"] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-upload__input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
.el-upload {
|
||||
width: 100%;
|
||||
|
||||
.el-upload-dragger {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-dropdown-menu {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.el-range-separator {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.is-dark {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
|
||||
86
src/views/components/collapse.vue
Normal file
86
src/views/components/collapse.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "Collapse"
|
||||
});
|
||||
|
||||
const radio = ref();
|
||||
const collapseRef = ref();
|
||||
const activeNames = ref(["1", "2", "3", "4", "5"]);
|
||||
const isOpen = ref(true);
|
||||
|
||||
function onClick() {
|
||||
isOpen.value
|
||||
? (activeNames.value = [])
|
||||
: radio.value === "accordion"
|
||||
? (activeNames.value = ["5"])
|
||||
: (activeNames.value = ["1", "2", "3", "4", "5"]);
|
||||
isOpen.value = !isOpen.value;
|
||||
}
|
||||
|
||||
const handleChange = (val: string[]) => {
|
||||
console.log(val);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/collapse.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
折叠面板
|
||||
</el-link>
|
||||
</el-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础用法</p>
|
||||
<el-radio-group v-model="radio" class="mb-3">
|
||||
<el-radio label="">可同时展开多个面板</el-radio>
|
||||
<el-radio label="accordion">每次只能展开一个面板</el-radio>
|
||||
</el-radio-group>
|
||||
<el-button size="small" text bg class="ml-8 mb-1" @click="onClick">
|
||||
外部触发打开、关闭
|
||||
</el-button>
|
||||
<el-collapse
|
||||
ref="collapseRef"
|
||||
v-model="activeNames"
|
||||
class="w-[360px]"
|
||||
:accordion="radio === 'accordion' ? true : false"
|
||||
@change="handleChange"
|
||||
>
|
||||
<el-collapse-item title="周一" name="1">
|
||||
周一启航，新的篇章
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="周二" name="2">
|
||||
周二律动，携手共进
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="周三" name="3">
|
||||
周三昂扬，激情不减
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="周四" name="4">
|
||||
周四精进，事半功倍
|
||||
</el-collapse-item>
|
||||
<el-collapse-item name="5">
|
||||
<template #title>
|
||||
周五
|
||||
<IconifyIconOnline
|
||||
icon="streamline-emojis:beaming-face-with-smiling-eyes"
|
||||
class="ml-1"
|
||||
width="30"
|
||||
/>
|
||||
</template>
|
||||
周五喜悦，收尾归档
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</el-card>
|
||||
</template>
|
||||
@ -198,7 +198,7 @@ watch(size, val =>
|
||||
@change="value1 = ''"
|
||||
>
|
||||
<el-radio label="">Date</el-radio>
|
||||
<el-radio label="YYYY-MM-DD h:m:s a">年月日 时分秒</el-radio>
|
||||
<el-radio label="YYYY-MM-DD HH:mm:ss">年月日 时分秒</el-radio>
|
||||
<el-radio label="x">时间戳</el-radio>
|
||||
</el-radio-group>
|
||||
<br />
|
||||
|
||||
140
src/views/components/progress.vue
Normal file
140
src/views/components/progress.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<script setup lang="ts">
|
||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||
|
||||
defineOptions({
|
||||
name: "PureProgress"
|
||||
});
|
||||
|
||||
const format = percentage => (percentage === 100 ? "Full" : `${percentage}%`);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/progress.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
进度条
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="mb-4">直线进度条动画</p>
|
||||
<div class="w-1/4">
|
||||
<el-progress indeterminate :percentage="50" class="mb-4" />
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="100"
|
||||
:format="format"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="100"
|
||||
status="success"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="100"
|
||||
status="warning"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
indeterminate
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
class="mb-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">进度条内显示百分比标识</p>
|
||||
<div class="w-1/4">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="26"
|
||||
:percentage="70"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="100"
|
||||
status="success"
|
||||
striped
|
||||
striped-flow
|
||||
:duration="70"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="22"
|
||||
:percentage="80"
|
||||
status="warning"
|
||||
class="mb-4"
|
||||
/>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
striped
|
||||
striped-flow
|
||||
class="mb-4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">自定义内容</p>
|
||||
<div class="w-1/4 demo-progress">
|
||||
<el-progress :percentage="50">
|
||||
<el-button text>自定义内容</el-button>
|
||||
</el-progress>
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="50"
|
||||
status="exception"
|
||||
>
|
||||
<span>自定义内容</span>
|
||||
</el-progress>
|
||||
<el-progress type="circle" :percentage="100" status="success">
|
||||
<el-button type="success" :icon="useRenderIcon('ep:check')" circle />
|
||||
</el-progress>
|
||||
<el-progress type="dashboard" :percentage="80">
|
||||
<template #default="{ percentage }">
|
||||
<span class="percentage-value">{{ percentage }}%</span>
|
||||
<span class="percentage-label">上升率</span>
|
||||
</template>
|
||||
</el-progress>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.percentage-value {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.percentage-label {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.demo-progress .el-progress--line {
|
||||
width: 350px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.demo-progress .el-progress--circle {
|
||||
margin-right: 15px;
|
||||
}
|
||||
</style>
|
||||
84
src/views/components/statistic.vue
Normal file
84
src/views/components/statistic.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import dayjs from "dayjs";
|
||||
import ReCol from "@/components/ReCol";
|
||||
import { useTransition } from "@vueuse/core";
|
||||
|
||||
defineOptions({
|
||||
name: "Statistic"
|
||||
});
|
||||
|
||||
const value = ref(Date.now() + 1000 * 60 * 60 * 7);
|
||||
const value1 = ref(Date.now() + 1000 * 60 * 60 * 24 * 2);
|
||||
const value2 = ref(dayjs().add(1, "month").startOf("month"));
|
||||
|
||||
const source = ref(0);
|
||||
const outputValue = useTransition(source, {
|
||||
duration: 1500
|
||||
});
|
||||
source.value = 36000;
|
||||
|
||||
function reset() {
|
||||
value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/statistic.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
统计组件
|
||||
</el-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="24">
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-statistic title="需求人数" :value="outputValue" />
|
||||
</re-col>
|
||||
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-countdown title="距离答疑结束还剩" :value="value" />
|
||||
</re-col>
|
||||
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-countdown
|
||||
title="VIP到期时间还剩"
|
||||
format="HH:mm:ss"
|
||||
:value="value1"
|
||||
/>
|
||||
<el-button class="mt-2" type="primary" text bg @click="reset">
|
||||
重置
|
||||
</el-button>
|
||||
</re-col>
|
||||
|
||||
<re-col :value="6" :xs="24" :sm="24">
|
||||
<el-countdown format="DD天 HH时 mm分 ss秒" :value="value2">
|
||||
<template #title>
|
||||
<div style="display: inline-flex; align-items: center">
|
||||
<IconifyIconOnline icon="ep:calendar" class="mr-2" />
|
||||
距离下个月还剩
|
||||
</div>
|
||||
</template>
|
||||
</el-countdown>
|
||||
<div class="mt-2">{{ value2.format("YYYY-MM-DD") }}</div>
|
||||
</re-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-col {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
172
src/views/components/tag.vue
Normal file
172
src/views/components/tag.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from "vue";
|
||||
import { cloneDeep, isAllEmpty } from "@pureadmin/utils";
|
||||
|
||||
defineOptions({
|
||||
name: "PureTag"
|
||||
});
|
||||
|
||||
const size = ref("default");
|
||||
const checked1 = ref(false);
|
||||
const checked2 = ref(false);
|
||||
const baseTag = ref("dark");
|
||||
const tagList = ref([
|
||||
{
|
||||
type: "",
|
||||
text: "Default"
|
||||
},
|
||||
{
|
||||
type: "success",
|
||||
text: "Success"
|
||||
},
|
||||
{
|
||||
type: "info",
|
||||
text: "Info"
|
||||
},
|
||||
{
|
||||
type: "warning",
|
||||
text: "Warning"
|
||||
},
|
||||
{
|
||||
type: "danger",
|
||||
text: "Danger"
|
||||
}
|
||||
]);
|
||||
const handleClose = tag => {
|
||||
tagList.value.splice(tagList.value.indexOf(tag), 1);
|
||||
};
|
||||
const copyTagList = cloneDeep(tagList.value);
|
||||
function onReset() {
|
||||
tagList.value = cloneDeep(copyTagList);
|
||||
}
|
||||
|
||||
/** 动态编辑标签 */
|
||||
const inputValue = ref("");
|
||||
const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
|
||||
const inputVisible = ref(false);
|
||||
const InputRef = ref();
|
||||
const handleDynamicClose = (tag: string) => {
|
||||
dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
|
||||
};
|
||||
const showInput = () => {
|
||||
inputVisible.value = true;
|
||||
nextTick(() => {
|
||||
InputRef.value!.input!.focus();
|
||||
});
|
||||
};
|
||||
const handleInputConfirm = () => {
|
||||
if (!isAllEmpty(inputValue.value)) {
|
||||
dynamicTags.value.push(inputValue.value);
|
||||
}
|
||||
inputVisible.value = false;
|
||||
inputValue.value = "";
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-space wrap :size="40">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/tag.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Tag 标签
|
||||
</el-link>
|
||||
<el-radio-group v-model="size" size="small">
|
||||
<el-radio label="large">大尺寸</el-radio>
|
||||
<el-radio label="default">默认尺寸</el-radio>
|
||||
<el-radio label="small">小尺寸</el-radio>
|
||||
</el-radio-group>
|
||||
</el-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="mb-2">基础按钮</p>
|
||||
<el-radio-group v-model="baseTag" class="mb-3">
|
||||
<el-radio label="dark" />
|
||||
<el-radio label="light" />
|
||||
<el-radio label="plain" />
|
||||
</el-radio-group>
|
||||
<br />
|
||||
<el-space class="mb-3">
|
||||
<el-checkbox
|
||||
v-if="tagList.length > 0"
|
||||
v-model="checked1"
|
||||
label="可移除"
|
||||
/>
|
||||
<el-button v-else size="small" text bg class="mr-6" @click="onReset">
|
||||
重置
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="checked1 && tagList.length > 0"
|
||||
size="small"
|
||||
text
|
||||
bg
|
||||
class="mr-6 ml-4"
|
||||
@click="tagList = []"
|
||||
>
|
||||
移除全部
|
||||
</el-button>
|
||||
<el-checkbox v-model="checked2" label="圆形" />
|
||||
</el-space>
|
||||
<br />
|
||||
<el-space wrap>
|
||||
<el-tag
|
||||
v-for="(tag, index) in tagList"
|
||||
:key="index"
|
||||
:type="tag.type as any"
|
||||
:effect="baseTag as any"
|
||||
:closable="checked1"
|
||||
:round="checked2"
|
||||
:size="size as any"
|
||||
:disabled="size === 'disabled'"
|
||||
@close="handleClose(tag)"
|
||||
>
|
||||
{{ tag.text }}
|
||||
</el-tag>
|
||||
</el-space>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-2">动态编辑标签</p>
|
||||
<el-tag
|
||||
v-for="tag in dynamicTags"
|
||||
:key="tag"
|
||||
class="mx-1"
|
||||
closable
|
||||
:size="size as any"
|
||||
:disable-transitions="false"
|
||||
@close="handleDynamicClose(tag)"
|
||||
>
|
||||
{{ tag }}
|
||||
</el-tag>
|
||||
<el-input
|
||||
v-if="inputVisible"
|
||||
ref="InputRef"
|
||||
v-model="inputValue"
|
||||
class="ml-1 !w-20"
|
||||
size="small"
|
||||
@keyup.enter="handleInputConfirm"
|
||||
@blur="handleInputConfirm"
|
||||
/>
|
||||
<el-button
|
||||
v-else
|
||||
class="button-new-tag ml-1"
|
||||
size="small"
|
||||
@click="showInput"
|
||||
>
|
||||
新建标签
|
||||
</el-button>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-divider--horizontal) {
|
||||
margin: 17px 0;
|
||||
}
|
||||
</style>
|
||||
94
src/views/components/upload/form.vue
Normal file
94
src/views/components/upload/form.vue
Normal file
@ -0,0 +1,94 @@
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from "vue";
|
||||
import { formUpload } from "@/api/mock";
|
||||
import { message } from "@/utils/message";
|
||||
import { createFormData } from "@pureadmin/utils";
|
||||
|
||||
import UploadIcon from "@iconify-icons/ri/upload-2-line";
|
||||
|
||||
const formRef = ref();
|
||||
const uploadRef = ref();
|
||||
const validateForm = reactive({
|
||||
fileList: [],
|
||||
date: ""
|
||||
});
|
||||
|
||||
const submitForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(valid => {
|
||||
if (valid) {
|
||||
// 多个 file 在一个接口同时上传
|
||||
const formData = createFormData({
|
||||
files: validateForm.fileList.map(file => ({ raw: file.raw })), // file 文件
|
||||
date: validateForm.date // 别的字段
|
||||
});
|
||||
formUpload(formData)
|
||||
.then(({ success }) => {
|
||||
if (success) {
|
||||
message("提交成功", { type: "success" });
|
||||
} else {
|
||||
message("提交失败");
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
message(`提交异常 ${error}`, { type: "error" });
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const resetForm = formEl => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-form ref="formRef" :model="validateForm" label-width="82px">
|
||||
<el-form-item
|
||||
label="附件"
|
||||
prop="fileList"
|
||||
:rules="[{ required: true, message: '附件不能为空' }]"
|
||||
>
|
||||
<el-upload
|
||||
ref="uploadRef"
|
||||
v-model:file-list="validateForm.fileList"
|
||||
drag
|
||||
multiple
|
||||
action="#"
|
||||
class="!w-[200px]"
|
||||
:auto-upload="false"
|
||||
>
|
||||
<div class="el-upload__text">
|
||||
<IconifyIconOffline
|
||||
:icon="UploadIcon"
|
||||
width="26"
|
||||
class="m-auto mb-2"
|
||||
/>
|
||||
可点击或拖拽上传
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="日期"
|
||||
prop="date"
|
||||
:rules="[{ required: true, message: '日期不能为空' }]"
|
||||
>
|
||||
<el-date-picker
|
||||
v-model="validateForm.date"
|
||||
type="datetime"
|
||||
class="!w-[200px]"
|
||||
placeholder="请选择日期时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" text bg @click="submitForm(formRef)">
|
||||
提交
|
||||
</el-button>
|
||||
<el-button text bg @click="resetForm(formRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
BIN
src/views/components/upload/imgs/1.jpg
Normal file
BIN
src/views/components/upload/imgs/1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 KiB |
BIN
src/views/components/upload/imgs/2.jpg
Normal file
BIN
src/views/components/upload/imgs/2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
src/views/components/upload/imgs/3.jpg
Normal file
BIN
src/views/components/upload/imgs/3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 174 KiB |
313
src/views/components/upload/index.vue
Normal file
313
src/views/components/upload/index.vue
Normal file
@ -0,0 +1,313 @@
|
||||
<script setup lang="ts">
|
||||
import axios from "axios";
|
||||
import Sortable from "sortablejs";
|
||||
import UploadForm from "./form.vue";
|
||||
import { ref, computed } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { message } from "@/utils/message";
|
||||
import type { UploadFile } from "element-plus";
|
||||
import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";
|
||||
|
||||
import Add from "@iconify-icons/ep/plus";
|
||||
import Eye from "@iconify-icons/ri/eye-line";
|
||||
import Delete from "@iconify-icons/ri/delete-bin-7-line";
|
||||
|
||||
defineOptions({
|
||||
name: "PureUpload"
|
||||
});
|
||||
|
||||
const fileList = ref([]);
|
||||
const router = useRouter();
|
||||
const curOpenImgIndex = ref(0);
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const urlList = computed(() => getKeyList(fileList.value, "url"));
|
||||
const imgInfos = computed(() => extractFields(fileList.value, "name", "size"));
|
||||
|
||||
const getImgUrl = name => new URL(`./imgs/${name}.jpg`, import.meta.url).href;
|
||||
const srcList = Array.from({ length: 3 }).map((_, index) => {
|
||||
return getImgUrl(index + 1);
|
||||
});
|
||||
|
||||
/** 上传文件前校验 */
|
||||
const onBefore = file => {
|
||||
if (!["image/jpeg", "image/png", "image/gif"].includes(file.type)) {
|
||||
message("只能上传图片");
|
||||
return false;
|
||||
}
|
||||
const isExceed = file.size / 1024 / 1024 > 2;
|
||||
if (isExceed) {
|
||||
message(`单个图片大小不能超过2MB`);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/** 超出最大上传数时触发 */
|
||||
const onExceed = () => {
|
||||
message("最多上传3张图片，请先删除在上传");
|
||||
};
|
||||
|
||||
/** 移除上传的文件 */
|
||||
const handleRemove = (file: UploadFile) => {
|
||||
fileList.value.splice(fileList.value.indexOf(file), 1);
|
||||
};
|
||||
|
||||
/** 大图预览 */
|
||||
const handlePictureCardPreview = (file: UploadFile) => {
|
||||
curOpenImgIndex.value = fileList.value.findIndex(img => img.uid === file.uid);
|
||||
dialogVisible.value = true;
|
||||
};
|
||||
|
||||
const getUploadItem = () => document.querySelectorAll("#pure-upload-item");
|
||||
|
||||
/** 缩略图拖拽排序 */
|
||||
const imgDrop = uid => {
|
||||
const CLASSNAME = "el-upload-list";
|
||||
const _curIndex = fileList.value.findIndex(img => img.uid === uid);
|
||||
getUploadItem()?.[_curIndex]?.classList?.add(`${CLASSNAME}__item-actions`);
|
||||
const wrapper: HTMLElement = document.querySelector(`.${CLASSNAME}`);
|
||||
Sortable.create(wrapper, {
|
||||
handle: `.${CLASSNAME}__item`,
|
||||
onEnd: ({ newIndex, oldIndex }) => {
|
||||
const oldFile = fileList.value[oldIndex];
|
||||
fileList.value.splice(oldIndex, 1);
|
||||
fileList.value.splice(newIndex, 0, oldFile);
|
||||
// fix: https://github.com/SortableJS/Sortable/issues/232 (firefox is ok, but chromium is bad. see https://bugs.chromium.org/p/chromium/issues/detail?id=410328)
|
||||
getUploadItem().forEach(ele => {
|
||||
ele.classList.remove(`${CLASSNAME}__item-actions`);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** 下载图片 */
|
||||
const onDownload = () => {
|
||||
[
|
||||
{ name: "巴旦木.jpeg", type: "img" },
|
||||
{ name: "恭喜发财.png", type: "img" },
|
||||
{ name: "可爱动物.gif", type: "gif" },
|
||||
{ name: "pure-upload.csv", type: "other" },
|
||||
{ name: "pure-upload.txt", type: "other" }
|
||||
].forEach(img => {
|
||||
axios
|
||||
.get(`https://xiaoxian521.github.io/hyperlink/${img.type}/${img.name}`, {
|
||||
responseType: "blob"
|
||||
})
|
||||
.then(({ data }) => {
|
||||
downloadByData(data, img.name);
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-card shadow="never">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<el-link
|
||||
v-tippy="{
|
||||
content: '点击查看详细文档'
|
||||
}"
|
||||
href="https://element-plus.org/zh-CN/component/upload.html"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
文件上传
|
||||
</el-link>
|
||||
<span class="header-right">
|
||||
<el-button class="ml-1" text bg @click="onDownload">
|
||||
点击下载安全文件进行上传测试
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<p class="mb-4">
|
||||
综合示例<span class="text-[14px]">
|
||||
（ <span class="text-[red]">自动上传</span>
|
||||
、拖拽上传、拖拽排序、设置请求头、上传进度、大图预览、多选文件、最大文件数量、文件类型限制、文件大小限制、删除文件）
|
||||
</span>
|
||||
</p>
|
||||
<p v-show="fileList.length > 0" class="mb-4">
|
||||
{{ imgInfos }}
|
||||
</p>
|
||||
<el-upload
|
||||
v-model:file-list="fileList"
|
||||
drag
|
||||
multiple
|
||||
class="pure-upload"
|
||||
list-type="picture-card"
|
||||
accept="image/jpeg,image/png,image/gif"
|
||||
action="https://run.mocky.io/v3/3aa761d7-b0b3-4a03-96b3-6168d4f7467b"
|
||||
:limit="3"
|
||||
:headers="{ Authorization: 'eyJhbGciOiJIUzUxMiJ9.admin' }"
|
||||
:on-exceed="onExceed"
|
||||
:before-upload="onBefore"
|
||||
>
|
||||
<IconifyIconOffline :icon="Add" class="m-auto mt-4" width="30" />
|
||||
<template #file="{ file }">
|
||||
<div
|
||||
v-if="file.status == 'ready' || file.status == 'uploading'"
|
||||
class="mt-[35%] m-auto"
|
||||
>
|
||||
<p class="font-medium">文件上传中</p>
|
||||
<el-progress
|
||||
class="mt-2"
|
||||
:stroke-width="2"
|
||||
:text-inside="true"
|
||||
:show-text="false"
|
||||
:percentage="file.percentage"
|
||||
/>
|
||||
</div>
|
||||
<div v-else @mouseenter.stop="imgDrop(file.uid)">
|
||||
<img
|
||||
class="el-upload-list__item-thumbnail select-none"
|
||||
:src="file.url"
|
||||
/>
|
||||
<span
|
||||
id="pure-upload-item"
|
||||
:class="[
|
||||
'el-upload-list__item-actions',
|
||||
fileList.length > 1 && '!cursor-move'
|
||||
]"
|
||||
>
|
||||
<span
|
||||
title="查看"
|
||||
class="hover:text-primary"
|
||||
@click="handlePictureCardPreview(file)"
|
||||
>
|
||||
<IconifyIconOffline
|
||||
:icon="Eye"
|
||||
class="hover:scale-125 duration-100"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<span title="移除" class="hover:text-[var(--el-color-danger)]">
|
||||
<IconifyIconOffline
|
||||
:icon="Delete"
|
||||
class="hover:scale-125 duration-100"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
<!-- 有时文档没写并不代表没有，多看源码好处多多😝 https://github.com/element-plus/element-plus/tree/dev/packages/components/image-viewer/src （emm...这让我想起刚开始写这个项目时，很多东西只有英文或者没有文档，需要看源码时，想笑🥹。那些美好时光都给这些坑了，giao） -->
|
||||
<el-image-viewer
|
||||
v-if="dialogVisible"
|
||||
:initialIndex="curOpenImgIndex"
|
||||
:url-list="urlList"
|
||||
:zoom-rate="1.2"
|
||||
:max-scale="7"
|
||||
:min-scale="0.2"
|
||||
@close="dialogVisible = false"
|
||||
@switch="index => (curOpenImgIndex = index)"
|
||||
/>
|
||||
<!-- 将自定义内容插入到body里，有了它在图片预览的时候，想插入个分页器或者别的东东在预览区某个位置就很方便咯（用户需求可以很灵活，开源组件库几乎不可能尽善尽美，很多时候寻找别的解决途径或许更好） -->
|
||||
<teleport to="body">
|
||||
<div
|
||||
v-if="fileList[curOpenImgIndex] && dialogVisible"
|
||||
effect="dark"
|
||||
round
|
||||
size="large"
|
||||
type="info"
|
||||
class="img-name"
|
||||
>
|
||||
<p class="text-[#fff] dark:text-black">
|
||||
{{ fileList[curOpenImgIndex].name }}
|
||||
</p>
|
||||
</div>
|
||||
</teleport>
|
||||
<p class="el-upload__tip">
|
||||
可拖拽上传最多3张单个不超过2MB且格式为jpeg/png/gif的图片
|
||||
</p>
|
||||
<el-divider />
|
||||
|
||||
<p class="mb-4 mt-4">
|
||||
结合表单校验进行<span class="text-[red]">手动上传</span>
|
||||
<span class="text-[14px]">
|
||||
（可先打开浏览器控制台找到Network，然后填写表单内容后点击点提交观察请求变化）
|
||||
</span>
|
||||
</p>
|
||||
<div class="flex justify-between">
|
||||
<UploadForm />
|
||||
<div>
|
||||
<p class="text-center">上传接口相关截图</p>
|
||||
<el-image
|
||||
class="w-[200px] rounded-md"
|
||||
:src="srcList[0]"
|
||||
:preview-src-list="srcList"
|
||||
fit="cover"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider />
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
<p>
|
||||
裁剪、上传头像请参考
|
||||
<span
|
||||
class="font-bold text-[18x] cursor-pointer hover:text-[red]"
|
||||
@click="router.push({ name: 'SystemUser' })"
|
||||
>
|
||||
系统管理-用户管理
|
||||
</span>
|
||||
表格操作栏中的上传头像功能
|
||||
</p>
|
||||
<p class="text-[red] text-[12px] flex flex-auto items-center justify-end">
|
||||
免责声明：上传接口使用免费开源的
|
||||
<el-link
|
||||
href="https://designer.mocky.io/"
|
||||
target="_blank"
|
||||
style="font-size: 16px; font-weight: 800"
|
||||
>
|
||||
Mocky
|
||||
</el-link>
|
||||
<span class="font-bold text-[18x]"> 请不要上传重要信息 </span
|
||||
>，如果造成任何损失，我们概不负责
|
||||
</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep(.card-header) {
|
||||
display: flex;
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.pure-upload) {
|
||||
.el-upload-dragger {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.img-name {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
left: 50%;
|
||||
z-index: 4000;
|
||||
padding: 5px 23px;
|
||||
background-color: var(--el-text-color-regular);
|
||||
border-radius: 22px;
|
||||
transform: translateX(-50%);
|
||||
|
||||
/** 将下面的 left: 50%; bottom: 80px; transform: translateX(-50%); 注释掉
|
||||
* 解开下面 left: 40px; top: 40px; 注释，体验不一样的感觉。啊？还是差强人意，自己调整位置吧🥹
|
||||
*/
|
||||
// left: 40px;
|
||||
// top: 40px;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user