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-11-19 18:52:48 +08:00
parent f62f0b440d
commit 9c370169d3
1 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<template> <template>
<div v-show="props.showInput" style="width: 100%;"> <div v-show="props.showInput" style="width: 100%;" :class="props.class" :style="props.style">
<el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable <el-select v-if="props.inputType === 'selector'" v-model="data" suffix-icon="arrow-down" clearable
:multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true" @clear="selectedInit" :multiple="props.multiple" placeholder="请选择文件" @click="selectVisiable = true && !props.disabled"
@remove-tag="selectedInit"> :disabled="props.disabled" @clear="selectedInit" @remove-tag="selectedInit">
<el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])" <el-option v-for="item, index in listAllData" :key="index" :value="String(item[props.valueKey])"
:label="item.name" /> :label="item.name" />
</el-select> </el-select>
@@ -19,8 +19,9 @@
<Plus /> <Plus />
</el-icon> </el-icon>
</div> </div>
<div @click="selectVisiable = true" class="addControllorHover"></div> <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
<el-icon v-show="!!data" class="closeHover" :size="16" @click="dataClear"> :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<Close /> <Close />
</el-icon> </el-icon>
</div> </div>
@@ -35,8 +36,9 @@
<Plus /> <Plus />
</el-icon> </el-icon>
</div> </div>
<div @click="selectVisiable = true" class="addControllorHover"></div> <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
<el-icon v-show="!!data" class="closeHover" :size="16" @click="dataClear"> :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<Close /> <Close />
</el-icon> </el-icon>
</div> </div>
@@ -51,8 +53,9 @@
<Plus /> <Plus />
</el-icon> </el-icon>
</div> </div>
<div @click="selectVisiable = true" class="addControllorHover"></div> <div @click="selectVisiable = true && !props.disabled" class="addControllorHover"
<el-icon v-show="!!data" class="closeHover" :size="16" @click="dataClear"> :style="{ cursor: props.disabled ? 'not-allowed' : 'pointer' }"></div>
<el-icon v-show="!!data && !props.disabled" class="closeHover" :size="16" @click="dataClear">
<Close /> <Close />
</el-icon> </el-icon>
</div> </div>
@@ -123,6 +126,10 @@ const TypeLabel = ['图片', '视频', '音频', '文件']
const AcceptList = ['image/*', 'video/*', 'audio/*', '']; const AcceptList = ['image/*', 'video/*', 'audio/*', ''];
const props = defineProps({ const props = defineProps({
modelValue: {}, modelValue: {},
class: { type: String, default: '' },
style: { type: Object, default: {} },
disabled: { type: Boolean, default: false },
tabsType: { type: Object as PropType<'' | 'card' | 'border-card'>, default: '' }, tabsType: { type: Object as PropType<'' | 'card' | 'border-card'>, default: '' },
itemSize: { type: Number, default: 100 }, itemSize: { type: Number, default: 100 },