文件选择器样式优化

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

View File

@@ -3,14 +3,14 @@
<div class="file-name" :class="{ show: isShow }">{{ data.name }}</div>
<component :is="FileTypes[data.file_type].tag" v-bind="FileTypes[data.file_type].attr" />
<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;" />
</el-icon>
</div>
</div>
</template>
<script setup lang="ts">
import { defineComponent, nextTick } from 'vue';
import { defineComponent } from 'vue';
import { ref, defineProps, PropType, watch, onMounted, h } from 'vue';
const props = defineProps({
fileData: { type: Object as PropType<any>, required: true },

View File

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