b2894lxlx/guofu-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、新增首页轮播图切换效果

Browse Source 
2、其他调整
This commit is contained in:
b2894lxlx
2024-09-30 18:20:29 +08:00
parent 7a180ee5a7
commit 713f24ca3e
22 changed files with 3239 additions and 1603 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
src/components/SelectFile/index.vue
View File

@@ -1,38 +1,51 @@
<template>
<a-image-preview-group>
<a-space>
<template v-for="(item, index) in data" :key="index">
<div class="image-upload-item" v-if="isImage(item.url)">
<a-space style="display: flex;
align-items: center;
justify-content: flex-start;flex-wrap: wrap">
<template v-for="(item, index) in data" :key="index">
<video v-if="type === 'video'" :src="item.url" style="width: 400px; height: 200px" controls="controls"></video>
<a-tag :key="item.url" closable @close="onDeleteItem(index)"
@click.native="open(item.url)" style="cursor: pointer"
v-else-if="type && ['audio', 'file'].includes(type)"> {{ item.url }}
</a-tag>
<div class="image-upload-item" v-else>
<a-image-preview-group>
<a-image
:style="{
border: '1px dashed var(--grey-7)',
width: width + 'px',
height: height + 'px'
}"
:width="width"
:height="width"
style="border: 1px dashed var(--grey-7)"
:src="item.url"
/>
<a class="image-upload-close" @click="onDeleteItem(index)">
<CloseOutlined />
<CloseOutlined/>
</a>
</div>
<div v-else class="image-upload-item">
<YoutubeOutlined />
<a class="image-upload-close" @click="onDeleteItem(index)">
<CloseOutlined />
</a>
</div>
</template>
</a-image-preview-group>
</div>
</template>
<template v-if="type === 'video'">
<a-button type="primary"
@click="openEdit"
v-if="data?.length < limit">
选择视频
</a-button>
</template>
<template v-else-if="type === 'audio'">
<a-button type="primary"
@click="openEdit"
v-if="data?.length < limit">
选择音频
</a-button>
</template>
<template v-else>
<a-button
@click="openEdit"
v-if="data?.length < limit"
:style="{ width: width + 'px', height: height + 'px' }"
v-if="data?.length < limit || limit === -1"
class="select-picture-btn ele-text-placeholder"
>
<PlusOutlined />
<PlusOutlined/>
</a-button>
</a-space>
</a-image-preview-group>
</template>
</a-space>
<!-- 选择弹窗 -->
<SelectData
v-model:visible="showEdit"
@@ -44,92 +57,100 @@
</template>
<script lang="ts" setup>
import { PlusOutlined, CloseOutlined, YoutubeOutlined } from '@ant-design/icons-vue';
import { ref } from 'vue';
import SelectData from './components/select-data.vue';
import { FileRecord } from '@/api/system/file/model';
import { isImage } from "@/utils/common";
import {PlusOutlined, CloseOutlined} from '@ant-design/icons-vue';
import {ref} from 'vue';
import SelectData from './components/select-data.vue';
import {FileRecord} from '@/api/system/file/model';
const props = withDefaults(
defineProps<{
value?: any;
data?: any[];
width?: number;
height?: number;
type?: string;
limit?: number;
placeholder?: string;
index?: number;
}>(),
{
placeholder: '请选择数据',
width: 80,
height: 80,
limit: 1
}
);
const props = withDefaults(
defineProps<{
value?: any;
data?: any[];
width?: number;
type?: string;
limit?: number;
placeholder?: string;
index?: number;
}>(),
{
placeholder: '请选择数据',
width: 80,
limit: 1
}
);
const emit = defineEmits<{
(e: 'done', data: FileRecord): void;
(e: 'del', index: number): void;
(e: 'clear'): void;
}>();
const emit = defineEmits<{
(e: 'done', data: FileRecord): void;
(e: 'del', index: number): void;
(e: 'clear'): void;
}>();
// 是否显示编辑弹窗
const showEdit = ref(false);
// 当前编辑数据
const current = ref<FileRecord | null>(null);
// 是否显示编辑弹窗
const showEdit = ref(false);
// 当前编辑数据
const current = ref<FileRecord | null>(null);
/* 打开编辑弹窗 */
const openEdit = (row?: FileRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
/* 打开编辑弹窗 */
const openEdit = (row?: FileRecord) => {
current.value = row ?? null;
showEdit.value = true;
};
const onChange = (row) => {
row.index = props.index;
emit('done', row);
};
const onChange = (row) => {
row.index = props.index;
emit('done', row);
};
const onDeleteItem = (index: number) => {
emit('del', index);
};
const onDeleteItem = (index: number) => {
emit('del', index);
};
const open = (url: string) => {
if (['docx', 'doc', 'xlsx', 'xls', 'pdf'].includes(url.split('.').pop()!)) {
window.open(`https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(url)}`);
} else window.open(url)
}
</script>
<style lang="less" scoped>
.select-picture-btn {
background-color: var(--grey-9);
border: 1px dashed var(--border-color-base);
font-size: 16px;
}
//.ant-image-img {
// width: 100px !important;
// height: 100px !important;
//}
.image-upload-item {
position: relative;
}
.image-upload-close {
width: 18px;
height: 18px;
color: rgb(255, 255, 255);
font-size: 10px;
border-bottom-left-radius: 18px;
border-top-right-radius: 2px;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 1px;
right: 1px;
line-height: 1;
box-sizing: border-box;
padding: 2px 0 0 5px;
transition: background-color 0.2s ease-in-out 0s;
cursor: pointer;
z-index: 2;
//display: flex;
//justify-content: center;
//align-items: center;
}
.image-upload-close:hover {
background-color: var(--red-6);
}
.select-picture-btn {
background-color: var(--grey-9);
border: 1px dashed var(--border-color-base);
width: 80px;
height: 80px;
font-size: 16px;
}
//.ant-image-img {
// width: 100px !important;
// height: 100px !important;
//}
.image-upload-item {
position: relative;
}
.image-upload-close {
width: 18px;
height: 18px;
color: rgb(255, 255, 255);
font-size: 10px;
border-bottom-left-radius: 18px;
border-top-right-radius: 2px;
background: rgba(0, 0, 0, 0.6);
position: absolute;
top: 1px;
right: 1px;
line-height: 1;
box-sizing: border-box;
padding: 2px 0 0 5px;
transition: background-color 0.2s ease-in-out 0s;
cursor: pointer;
z-index: 2;
//display: flex;
//justify-content: center;
//align-items: center;
}
.image-upload-close:hover {
background-color: var(--red-6);
}
</style>