效果圖：
自定義組建的步驟：
1.在項目中建立目錄：components
2.建立元件.vue 檔案 例如：AddImgs.vue
3.元件文檔結構
執行個體：
4.使用元件
執行個體：
5.接下來，我将其中圖檔選擇的自定義元件代碼粘貼出來
（1）.子元件：
<template name="AddImgs">
<view class="content">
<view class="image-wrap">
<block v-for="(itemImg ,index) in imageList">
<view class="item">
<image class="q-image" :src="itemImg" mode="scaleToFill" @click="previewImage(index)">
</image>
<!-- 移除圖檔的按鈕 -->
<view class="q-image-remover">
<image class="deldete" src="../static/img_exit.png" @click="btnDeleteImg(index)"
mode="widthFix"></image>
</view>
</view>
</block>
<!-- 添加圖檔圖示 -->
<view class="item" @click="btnAddImgs">
<image class="q-image" src="../static/add_img1.png" mode="scaleToFill">
</image>
</view>
</view>
</view>
</template>
<script>
export default {
name: "AddImgs",
data() {
return {
imageList: [], //最終選中圖檔總數
tempImgList: [] //選中圖檔的臨時檔案數組
};
},
props: {
endImgList: {
type: Object,
value: {}
}
},
methods: {
// 選擇圖檔
btnAddImgs: function() {
var _this = this
uni.chooseImage({
count: 9, //預設9
sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，預設二者都有
sourceType: ['album', "camera"], //從相冊選擇 、使用相機
success(res) {
console.log("++res++ " + JSON.stringify(res.tempFilePaths))
_this.tempImgList = res.tempFilePaths
_this.imageList = _this.imageList.concat(_this.tempImgList)
_this.endImgList.list = _this.imageList
}
})
},
// 删除圖檔
btnDeleteImg: function(index) {
var _this = this
uni.showModal({
title: "删除",
content: "是否删除該選中的圖檔！",
confirmText: "删除",
success(res) {
if (res.confirm) { //删除
_this.imageList.splice(index, 1)
_this.endImgList.list = _this.imageList
}
}
})
},
// 圖檔預覽
previewImage: function(index) {
var _this = this
uni.previewImage({
current: index,
urls: _this.imageList,
indicator: "number"
})
}
}
}
</script>
<style>
.deldete {
width: 28rpx;
position: absolute;
top: -56rpx;
right: 4rpx;
}
.q-image-remover {
width: 0;
height: 0;
border-top: 66rpx solid #bfde85;
border-left: 66rpx solid transparent;
position: absolute;
top: 0;
right: 0;
}
.q-image {
height: 220rpx;
width: 100%;
}
.item {
position: relative;
height: 220rpx;
width: 30%;
margin-left: 2.5%;
margin-top: 20rpx;
}
.image-wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 95%;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
</style>
（2）.父元件：
<template>
<view>
<addImgs :endImgList="endImgList"></addImgs>
<view class="show-imgs">
<image class="img" v-for="imgurl in curImgsList" :src="imgurl" mode="scaleToFill"></image>
</view>
<button class="button" @click="btnShowContent">送出資料</button>
</view>
</template>
<script>
import addImgs from "../../components/AddImgs.vue"
export default {
components: {
// 注冊自定義元件
addImgs
},
data() {
return {
endImgList: {},
curImgsList: []
}
},
methods: {
btnShowContent: function() {
var _this = this
// 監聽選擇圖檔路徑
console.log("選擇圖檔的個數 index = " + _this.endImgList.list.length)
console.log("選擇圖檔的路徑集合 endImgList = " + JSON.stringify(_this.endImgList))
_this.curImgsList = this.endImgList.list
}
}
}
</script>
<style>
.img {
width: 30%;
margin-left: 2.5%;
height: 220rpx;
margin-top: 20rpx;
}
.show-imgs {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 20rpx;
}
.button {
width: 94%;
margin-left: 3%;
margin-top: 20rpx;
background-color: #007AFF;
color: white;
font-size: 36rpx;
position: fixed;
bottom: 30rpx;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #FFFFFF;
}
page {
background-color: #FFFFFF;
}
</style>
最後兩Demo下載下傳位址貼出來，用得到的夥伴可以去下載下傳，直接運作看效果