本文介绍了如何在Vue项目中创建一个名为photoWall的公共组件，该组件可作为照片墙功能使用。首先，将组件添加到components文件夹下，并提供了photoWall.vue的具体代码内容。接着，通过配置config.js文件来调整组件参数。然后，在productList.vue组件中展示了如何引用并使用这个公共photoWall.vue，以实现图片墙的显示和编辑功能。
1.添加公共 photoWall.vue（我自己起的Vue名称，你们可自己取）
我这个公共插件引入到components文件夹下，你们可选择自行引入，在使用的时候注意文件夹路径即可
photoWall.vue内容（可直接复制使用）
<template>
<div id="photoWall">
<el-upload
ref="upload"
:action="uploadBaseUrl"
name="picture"
:limit="6"
:file-list="fileListImg"
list-type="picture-card"
:before-upload="beforeUpload"
:on-success="handlePreview"
:on-remove="handleRemove"
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="imgData" alt="">
</el-dialog>
</div>
</template>
<script>
import conf from '../config.js'
export default {
name: "photoWall",
props:{
fileListImg:{
type:Array,
required:true
},
},
data() {
return {
dialogImageUrl: '',
uploadBaseUrl: conf.baseApi + '/api/v1/sec/UploadController/uploadImg', //服务器图片地址路径
accessToImages: conf.baseApi + "/api/img/",
imgData:[],
fileList: [],
dialogVisible: false,
};
},
methods: {
// handleRemove(file, fileList) {
// console.log(file, fileList);
// },
// handlePictureCardPreview(file) {
// this.dialogImageUrl = file.url;
// this.dialogVisible = true;
// },
//删除文件之前的钩子函数
handleRemove(file, fileList) {
// this.model.packageImg = ''
this.$message({
type: 'info',
message: '已删除原有图片',
duration: 6000
})
console.log(file, fileList)
this.imgData=[];
if(fileList.length>0){
console.log(fileList.length);
console.log(fileList)
for (let key=0; key< fileList.length;key++) {
if(fileList[key].ame != undefined){
let list = fileList[key].url.split(this.accessToImages)
this.imgData.push({
url:list[1],
ame:fileList[key].ame
})
}else {
this.imgData.push({
url:fileList[key].response.data.path,
ame:fileList[key].name
})
}
}
}
console.log('数组对象', this.imgData)
this.$emit('photos',this.imgData)
},
handlePreview(response,file, fileList) {
console.log(response);
console.log(file);
console.log(this.imgData)
console.log(fileList)
console.log(this.fileListImg)
this.imgData=[];
// console.log(this.imgData)
// console.log(this.imgData.length)
let obj = {}
for (let key=0; key< fileList.length;key++) {
if (fileList[key].ame != undefined){
console.log(key);
var ret = fileList[key].url.split(this.accessToImages);
console.log(ret[1]);
this.imgData.push({
url:ret[1],
ame:fileList[key].ame
})
// obj.url = ret[1];
// obj.ame = fileList[key].ame
}else{
console.log(key);
this.imgData.push({
url:fileList[key].response.data.path,
ame:fileList[key].name
})
// obj.url = fileList[key].response.data.path
// obj.ame = fileList[key].name
}
// this.imgData.push(obj)
}
console.log('数组对象', this.imgData)
this.$emit('photos',this.imgData)
this.$message({
type: 'success',
message: '文件上传成功',
duration: 6000
})
this.showFont = false
},
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isGIF = file.type === 'image/gif'
const isPNG = file.type === 'image/png'
const isBMP = file.type === 'image/bmp'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG && !isGIF && !isPNG && !isBMP) {
this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!')
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
return (isJPG || isBMP || isGIF || isPNG) && isLt2M
},
}
}
</script>
<style scoped>
</style>
config.js 文件
2.公共 photoWall.vue的使用
productList.vue中使用
<template>
<div class="productList" :style="productListStyle">
<div class="wrap">
<div class="list">
<div class="search">
<div class="pull-left">
名称：
<el-input
v-model="params.merchandiseName"
placeholder="请输入商品名称"
size="small"
class="list-simple-search-input"
/>
<el-button type="primary" @click="refresh(1)" size="small" icon="el-icon-search">查询</el-button>
<el-button type="warning" @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
</div>
<div class="pull-right">
<el-button @click="refresh" size="small" icon="el-icon-refresh">刷新</el-button>
<!-- <el-button type="success" @click="exportExcel" size="small" icon="el-icon-upload2">导出</el-button>-->
<el-button type="primary" @click="add" size="small" icon="el-icon-plus">添加</el-button>
<el-button @click="edit" size="small" icon="el-icon-edit">编辑</el-button>
<el-button @click="del" size="small" type="danger" icon="el-icon-delete">删除</el-button>
</div>
</div>
<div class="list-wrap">
<el-table
id="exprotTable"
border
stripe
highlight-current-row
:max-height="580"
v-loading="loading"
:data="dataList"
@select="select"
@select-all="select"
@row-dblclick="details"
>
<template v-for="column in dataFiled">
<el-table-column
align="center"
header-align="center"
:type="column.type?column.type:''"
:fixed="column.fixed?column.fixed:false"
:prop="column.model?column.model:''"
:label="column.label?column.label:''"
:width="column.width?column.width:''"
:sortable="column.sortable?true:false"
:formatter="column.formatter?column.formatter:null"
:key="column.model"
v-if="column.show"
:show-overflow-tooltip="column['show-overflow-tooltip']?true:false"
></el-table-column>
</template>
<el-table-column
align="center"
prop="mainPic"
label="商品图片"
width="280">
<template slot-scope="scope">
<img v-if="scope.row.mainPic" :src="ImageUrl + scope.row.mainPic" class="avatar" style="width: 100px" />
<span v-if="!scope.row.mainPic"> 暂无数据</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="merchandiseName"
label="商品名称"
>
</el-table-column>
<el-table-column
align="center"
prop="categoryName"
label="分类名称">
</el-table-column>
<el-table-column
align="center"
prop="auditStatus"
label="审核状态"
width="180">
<template slot-scope="scope">
<span v-if="scope.row.auditStatus == 0"> 待审核</span>
<span v-if="scope.row.auditStatus == 1"> 审核通过</span>
<span v-if="scope.row.auditStatus == 2"> 审核失败</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="auditTime"
width="180"
label="审核时间">
</el-table-column>
<el-table-column
align="center"
prop="salesQuantity"
width="180"
label="销售数量">
</el-table-column>
<el-table-column
align="center"
prop="isPostage"
label="是否包邮"
width="180">
<template slot-scope="scope">
<span v-if="scope.row.isPostage == 0"> 包邮</span>
<span v-if="scope.row.isPostage == 1"> 不包邮</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="isSale"
label="是否上架"
width="180">
<template slot-scope="scope">
<span v-if="scope.row.isSale == 0">下架</span>
<span v-if="scope.row.isSale == 1">上架</span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="操作"
align="center"
width="280"
>
<template slot-scope="scope" >
<el-button @click.prevent="view(scope.row,0)" v-if="scope.row.isSale == 0" size="small" type="success">上架</el-button>
<el-button @click.prevent="view(scope.row,1)" v-if="scope.row.isSale == 1" size="small" type="warning">下架</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-pagination
:background="true"
@size-change="sizeChange"
@current-change="currentChange"
:current-page.sync="params.pageNum"
:page-sizes="[10, 50, 100, 5000]"
:page-size="pageInfo.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageInfo.total"
></el-pagination>
</div>
</div>
<!--添加-->
<el-dialog
customClass="productList_ins"
title="添加商品"
:visible.sync="addWin"
size="tiny"
width="1200px"
:append-to-body="true"
:close-on-click-modal="false"
:before-close="beforeClose1"
>
<el-form
ref="addForm"
:rules="formRules"
:model="model"
label-width="100px"
label-suffix=":"
label-position="right"
style="width:100%;"
:lock-scroll="true"
>
<div class="basic">
<span class="basic_height"></span>
<span>商品详情</span>
</div>
最低0.47元/天 解锁文章
2869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
