大家好！我叫戴向天
QQ羣：602504799
QQ:809002582
如若有不理解的，可加QQ羣進行諮詢瞭解
layout-div 組件詳情 》https://blog.csdn.net/weixin_41088946/article/details/91448369
layout-img 組件詳情》https://blog.csdn.net/weixin_41088946/article/details/90759906
<template>
<div class="posi-r">
<slot name="cover"></slot>
<input type="file" class=" op-0 posi-a w100 hei100 t0 l0" ref="ddFile" :multiple="multiple"
@change="getFiles" :accept="accept"/>
</div>
</template>
<script>
export default {
props: {
accept: { //文件選擇的格式 默認所有的圖片格式
default: 'image/*'
},
value: {}, // 綁定的數據可以爲 string | array
multiple: { // 是否可以多圖 more =》 false
type: Boolean,
default: false
},
max: { // 最大圖片數量 默認一張
type: Number,
default: 1
}
},
data() {
return {
urls: [],
}
},
methods: {
getFiles() {
const files = this.$refs.ddFile.files;
if (!files) return false;
let urls = []
for (let i in files) if (!isNaN(+i) && i < this.max) urls.push(URL.createObjectURL(files[i]));
if (this.getType(this.value) == 'string') {
this.$emit('input', urls[0])
} else if (this.getType(this.value) == 'array') {
this.$emit('input', urls)
}
this.$emit('change', {
filePaths: urls,
files,
})
},
}
}
</script>
使用方法：
<template>
<img :src=face/>
選中的文件列表：=》》{{files}}
<layout-div :w="206" :h="206" class=" posi-r flex-center" :br-r="200">
<div class="posi-a bg-e op-1 w100 hei100 t0 l0"></div>
<file class="posi-a-i bg-e op-0 w100 hei100 " v-model="face"
@change="(e)=>files =e.files"/>
</layout-div>
</template>
<script>
export default{
data(){
return {
face:'',
files:[]
}
}
}
</script>
class - style 具體內容如下
css 參考的 UI設計尺寸爲 750*1334
.posi-r {
position: relative;
z-index: 1;
}
.op-0 {
opacity: 0;
}
.posi-a {
position: absolute;
z-index: 1;
}
.w100 {
width: 100%;
}
.hei100 {
height: 100%;
}
.t0 {
top: 0;
}
.l0 {
left: 0;
}
.posi-a-i {
position: absolute !important;
z-index: 1;
}
.flex-center {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.mar-a {
margin: 0 auto;
}
.bg-e {
background-color: #eee;
}
.op-1 {
opacity: 0.1;
}
實例代碼圖
效果圖
