需求：1 .第一个标签展示固定字样，且不能删除，最少上传三张图片。
2. 其余标签双击可编辑字样，10字以内，可删除，均可上传图片。
3. +号按钮可点击添加标签，标签数量控制在10个以内。
4. 当标签下无内容，上传时该标签自动删除。
效果展示：
<el-form-item label-width="185px" label="店铺展示:" prop="shopImgList" style="margin-left: 20px;margin-top: 30px;">
<div style="display: flex">
<el-tabs
v-model="name"
type="card"
@tab-remove="removeTab"
:before-leave="beforeLeave"
style="width: 95%;"
@keydown.native.capture.stop.self>
<el-tab-pane
:label="item.name"
v-for="(item,index) in ruleForm.shopImgList" :key="index"
:name="item.seq.toString()"
:closable="index!=0 && formStatus!=''"
>
<template slot="label">
<span
@dblclick="tabsContent(item,index)"
>{{item.name}}
</span>
</template>
<div @click="getImageTypeIndex(index)">
<el-upload
:class="{audit_pict:hideUpload}"
ref="upload"
action=""
:http-request="Picture"
show-file-list
list-type="picture-card"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
v-if="refreshUploadOSSComp"
accept=".jpg,.png,.jpeg"
:file-list="item.fileLists"
:on-exceed="handleExceed"
:on-preview="handlePictureCardPreview">
<i class="el-icon-plus"></i>
</el-upload>
</div>
</el-tab-pane>
<el-tab-pane key="add" name="add" v-if="ruleForm.shopImgList.length!=10 && formStatus!=''">
<span slot="label" style="padding: 8px;font-size:20px">+</span>
</el-tab-pane >
</el-tabs>
</div>
</el-form-item>结构：
shopImgList:[{//门店展示图片集合
imgUrlList:[],
fileLists:[],
seq:1,
name:"门店展示",
}],限制规则：
let checkDescImgs = (rule, value, callback) => {
let _this = this;
let _validatenull = validatenull;
if(_validatenull(_this.ruleForm.shopImgList) ){
return callback(new Error('请上传门店宣传信息'));
}
if(_this.ruleForm.shopImgList[0].imgUrlList.length < 3){
return callback(new Error('门店展示必须上传3张'));
}
return callback();
};
shopImgList:[{required: true, validator: checkDescImgs, trigger: 'blur'}],生命周期 --- created中回显处理：
if (!isNull(_this.ruleForm.shopImgList)){
_this.ruleForm.shopImgList.forEach(data => {
data['fileLists']=[]
data.imgUrlList.forEach((item,index)=>{
item['imgSrc']= item.imgUrl;
item['seq']=index+1
const map5 = {};
map5['name'] = '';
map5['url'] = item.imgUrl;
map5['seq'] = index+1
data.fileLists.push(map5);
})
})
}else {
_this.ruleForm.shopImgList=[{//门店展示图片集合
imgUrlList:[],
fileLists:[],
seq:1,
name:"门店展示",
}]
}知识扩展
阻止键盘默认事件：@keydown.native.capture.stop.self
方法：
1. 删除标签
//删除门店展示名称
removeTab(targetName) {
let _this=this
let isNull=validatenull
if(_this.name==targetName){
_this.name='1'
}else if(Number(_this.name)>Number(targetName)){
_this.name= (Number(_this.name)-1).toString()
}
_this.ruleForm.shopImgList.forEach((item, index) => {
if (item.seq === Number(targetName)) {
_this.ruleForm.shopImgList.splice(index, 1)
}
});
_this.refreshUploadOSSComp=false
if (!isNull(_this.ruleForm.shopImgList)){
_this.ruleForm.shopImgList.forEach((data,idx) => {
data.fileLists=[]
data.imgUrlList.forEach((item,i)=>{
item['seq']=i+1
const map5 = {};
map5['name'] = '';
map5['url'] = item.imgSrc;
map5['seq'] =i+1;
data.fileLists.push(map5);
})
})
_this.ruleForm.shopImgList.forEach((data,idx) => {
data.seq=idx+1
})
_this.$nextTick(() => {
_this.refreshUploadOSSComp = true;
});
}
},2. 切换事件 与 添加标签
beforeLeave(currentName, oldName) {
//重点，如果name是add，则什么都不触发
if(currentName == "add") {
this.addTitle()
return false
}
this.arrIndex=Number(currentName)-1
},
// 添加门店展示名称
addTitle() {
if(this.ruleForm.shopImgList.length < 10){
this.tagName='新增名称'
this.formStatus1='create'
this.dialogFormsVisible=true
this.form.name=undefined
}
},3. 双击打开标签，编辑内容
// 编辑名称
tabsContent(val,index){
if(index!=0){
this.tagName='编辑名称'
this.formStatus1='update'
this.arrIndex=index
this.form.name=val.name
this.dialogFormsVisible=true
}
},4. 点击上传图片时，记录坐标
getImageTypeIndex(index){
this.arrIndex=index
},上传图片内容过多，忽略
5. 双击编辑标签 --- 弹出弹窗
<!-- 店铺展示添加编辑名称-->
<el-dialog :title="tagName" :visible.sync="dialogFormsVisible" :modal-append-to-body="false" :close-on-click-modal="false" append-to-body width="25%">
<el-form :model="form" :rules="rulesForm" ref="form" class="demo-ruleForm">
<el-form-item label="名称" prop="name" label-width="70px">
<el-input v-model.trim="form.name" maxlength="10" placeholder="限制10个字" ></el-input>
</el-form-item>
<el-form-item style="display: flex;flex-direction: row;justify-content: center;align-items: center">
<el-button type="primary" @click="submitFormButton('form')">确定</el-button>
<el-button @click="getClose()">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>tagName:undefined, //名字
dialogFormsVisible:false,//默认关闭弹窗
form:{
name:undefined,
}, //表单
弹窗 校验规则绑定
rulesForm:{
name:[{ required: true,message:'请输入名称', trigger: 'blur'},{
required: true,
trigger: "blur",
validator: (rule, value, callback) => {
if (!value.split("").some(item => item !== " "))
return callback(new Error("名称不能为纯空格"));
return callback();
}
}],
},
6. 弹窗 --- 确定按钮
// 店铺展示添加编辑名称提交
submitFormButton(form){
let _this=this
_this.$refs[form].validate((valid) => {
if (valid){
if(_this.formStatus1=='create'){
_this.ruleForm.shopImgList.push({//门店展示图片集合
imgUrlList:[],
fileLists:[],
seq:_this.ruleForm.shopImgList.length+1,
name:_this.form.name,
})
}else{
_this.ruleForm.shopImgList[_this.arrIndex].name=_this.form.name
}
_this.dialogFormsVisible=false
}else{
_this.showToal('提示', '请先维护必填信息', 'warning');
return false;
}
})
},7. 弹窗 --- 取消按钮
getClose(){
this.dialogFormsVisible=false
},
