|
|
@@ -30,21 +30,37 @@ |
|
|
|
some tips.... |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
<div |
|
|
|
<!-- <div |
|
|
|
class="file-list__item" |
|
|
|
v-for="n in 9" |
|
|
|
:key="n" |
|
|
|
style="background: #f003" |
|
|
|
:style="{ |
|
|
|
display: n > 4 && !expand ? 'none' : 'block', |
|
|
|
}"> |
|
|
|
1 |
|
|
|
}" |
|
|
|
:data-name="n" |
|
|
|
:class="{ 'default-icon': !isPicMode }"> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
</div> --> |
|
|
|
<div |
|
|
|
class="file-list__item" |
|
|
|
v-for="(file, index) in files" |
|
|
|
:key="file.fileName" |
|
|
|
:style="{ |
|
|
|
display: index > 3 && !expand ? 'none' : 'block', |
|
|
|
background: isPicMode ? `url(${file.fileUrl}) no-repeat` : `url(${defaultBg}) no-repeat`, |
|
|
|
backgroundSize: isPicMode ? '100% 100%' : '64px', |
|
|
|
backgroundPosition: isPicMode ? '0% 0%' : 'center', |
|
|
|
}" |
|
|
|
:data-name="file.fileName"> |
|
|
|
<i class="el-icon-delete"></i> |
|
|
|
</div> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import defaultBg from '../../../../../assets/images/default-file-icon.png'; |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'AssetsUpload', |
|
|
|
components: {}, |
|
|
@@ -61,15 +77,73 @@ export default { |
|
|
|
type: String, |
|
|
|
default: '', |
|
|
|
}, |
|
|
|
isPicMode: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
emits: ['update-filelist'], |
|
|
|
data() { |
|
|
|
return { |
|
|
|
defaultBg, |
|
|
|
expand: false, |
|
|
|
fileList: [], |
|
|
|
files: [ |
|
|
|
// 服务器返回的结构 |
|
|
|
{ |
|
|
|
fileName: 'sf.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: |
|
|
|
'https://hbimg.b0.upaiyun.com/cc7475787bd08ed926b68eaf53fa1f2c5473259115e3c-gJdObd_fw658', |
|
|
|
}, |
|
|
|
{ |
|
|
|
fileName: 'sddf.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: 'https://img0.sc115.com/wm/xqx/pic1/1501xofo4ssolji.jpg', |
|
|
|
}, |
|
|
|
{ |
|
|
|
fileName: 'jjj.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: |
|
|
|
'https://www.mms591.com/www.mms591.com-photo/2013081823/1-130QR34544.jpg', |
|
|
|
}, |
|
|
|
{ |
|
|
|
fileName: 'asdfasdf.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: |
|
|
|
'https://hbimg.b0.upaiyun.com/8f6bced5f2e38d3a021b2c48d5a98dfb6317e3e12c6a0-QmhJ5v_fw658', |
|
|
|
}, |
|
|
|
{ |
|
|
|
fileName: 'asdkj.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: |
|
|
|
'https://www.mms591.com/www.mms591.com-photo/2013013021/1-130130212034.jpg', |
|
|
|
}, |
|
|
|
{ |
|
|
|
fileName: 'lkasjdf.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: |
|
|
|
'https://www.mms591.com/www.mms591.com-photo/2013072122/1-130H1223057.jpg', |
|
|
|
}, |
|
|
|
{ |
|
|
|
fileName: 'asdf.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: |
|
|
|
'https://img.1ppt.com/uploads/allimg/1212/1-1212101ZH5A2.jpg', |
|
|
|
}, |
|
|
|
{ |
|
|
|
fileName: 'afdffff.docs', |
|
|
|
fileType: 'asset', |
|
|
|
fileUrl: |
|
|
|
'https://www.mms591.com/www.mms591.com-photo/2013051721/1-13051H11945.jpg', |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
computed: {}, |
|
|
|
mounted() { |
|
|
|
console.log('this.ispicmocde', this.isPicMode); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
handleUpload() { |
|
|
|
switch (this.type) { |
|
|
@@ -165,7 +239,56 @@ export default { |
|
|
|
display: grid; |
|
|
|
grid-template-columns: repeat(5, 188px); |
|
|
|
grid-auto-rows: 128px; |
|
|
|
gap: 18px; |
|
|
|
gap: 24px 18px; |
|
|
|
place-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.file-list__item { |
|
|
|
background-color: #fff; |
|
|
|
border: 1px dashed #d9d9d9; |
|
|
|
border-radius: 6px; |
|
|
|
-webkit-box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|
position: relative; |
|
|
|
// overflow: hidden; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
.el-icon-delete { |
|
|
|
display: block; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-icon-delete { |
|
|
|
color: #ccc; |
|
|
|
position: absolute; |
|
|
|
top: 8px; |
|
|
|
right: 8px; |
|
|
|
display: none; |
|
|
|
|
|
|
|
&:hover { |
|
|
|
color: rgb(210, 41, 41); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.file-list__item:hover { |
|
|
|
border-color: #0b58ff; |
|
|
|
} |
|
|
|
|
|
|
|
.file-list__item::after { |
|
|
|
content: attr(data-name); |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
bottom: -16px; |
|
|
|
font-size: 14px; |
|
|
|
line-height: 1; |
|
|
|
} |
|
|
|
|
|
|
|
.default-icon { |
|
|
|
background: url(../../../../../assets/images/default-file-icon.png) no-repeat; |
|
|
|
background-position: center; |
|
|
|
background-size: 64px; |
|
|
|
} |
|
|
|
</style> |