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

文件选择器样式优化

Browse Source
This commit is contained in:
阿辉
2024-12-03 14:36:52 +08:00
parent e3291fe22b
commit 706986e187
2 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/components/fileSelector/fileItem.vue
View File

@@ -3,14 +3,14 @@
<div class="file-name" :class="{ show: isShow }">{{ data.name }}</div> <div class="file-name" :class="{ show: isShow }">{{ data.name }}</div>
<component :is="FileTypes[data.file_type].tag" v-bind="FileTypes[data.file_type].attr" /> <component :is="FileTypes[data.file_type].tag" v-bind="FileTypes[data.file_type].attr" />
<div class="file-del" :class="{ show: isShow }"> <div class="file-del" :class="{ show: isShow }">
<el-icon :size="24" color="white" @click.stop="delFileHandle"> <el-icon :size="24" color="white" @click.stop="delFileHandle" style="cursor: pointer;">
<CircleClose style="mix-blend-mode: difference;" /> <CircleClose style="mix-blend-mode: difference;" />
</el-icon> </el-icon>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineComponent, nextTick } from 'vue'; import { defineComponent } from 'vue';
import { ref, defineProps, PropType, watch, onMounted, h } from 'vue'; import { ref, defineProps, PropType, watch, onMounted, h } from 'vue';
const props = defineProps({ const props = defineProps({
fileData: { type: Object as PropType<any>, required: true }, fileData: { type: Object as PropType<any>, required: true },

5
web/src/components/fileSelector/index.vue
View File

@@ -112,8 +112,8 @@
<el-empty v-if="!listData.length" description="无内容，请上传" <el-empty v-if="!listData.length" description="无内容，请上传"
style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" /> style="width: 100%; height: calc(50vh); margin-top: 24px; padding: 4px;" />
<div ref="listContainerRef" class="listContainer" v-else> <div ref="listContainerRef" class="listContainer" v-else>
<div v-for="item, index in listData" :style="{ width: (props.itemSize || 100) + 'px' }" :key="index" <div v-for="item, index in listData" :key="index" @click="onItemClick($event)" :data-id="item[props.valueKey]"
@click="onItemClick($event)" :data-id="item[props.valueKey]"> :style="{ width: (props.itemSize || 100) + 'px', cursor: props.selectable ? 'pointer' : 'normal' }">
<FileItem :fileData="item" :api="fileApi" @onDelFile="listRequest(); listRequestAll();" /> <FileItem :fileData="item" :api="fileApi" @onDelFile="listRequest(); listRequestAll();" />
</div> </div>
</div> </div>
@@ -341,7 +341,6 @@ onMounted(() => {
.listContainer>* { .listContainer>* {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
box-shadow: 0 0 4px rgba(0, 0, 0, .2); box-shadow: 0 0 4px rgba(0, 0, 0, .2);
cursor: pointer;
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }