效果展示
组件代码
<div class="cardOneRoot"><img :src="itemInfo.psnPicUrl ? itemInfo.psnPicUrl : ''" alt=""/><div class="infoDiv" v-if="itemInfo.noInfo == 1"><div v-for="(item2, index2) in confInfo2" :key="index2" v-if="(item2.prop in itemInfo)"><div v-if="item2.type == 1"><span>{{ item2.label }}：</span><span :style="('maxWidth' in item2)?{'max-width':item2.maxWidth}:{}" :title="itemInfo[item2.prop]">{{ itemInfo[item2.prop] }}</span></div><div v-if="item2.type == 2" class="spcOneHeng"><span>{{ item2.label }}：</span><span class="huanHang">{{ itemInfo[item2.prop] }}</span></div><div v-if="item2.type == 3"><span>{{ item2.label }}：</span><span>{{ itemInfo[item2.prop] }}</span><span style="margin-left: 20px" v-if="(item2.prop2 in itemInfo)">{{ item2.label2 }}：</span><span v-if="(item2.prop2 in itemInfo)">{{ itemInfo[item2.prop2] }}</span></div><div v-if="item2.type == 4" style="display: flex"><span>{{ item2.label }}：</span><span class="qianHang">{{ itemInfo[item2.prop] }}</span></div></div></div><div class="posiNO" v-if="itemInfo.noInfo == 2">身份未识别</div>
</div>
模拟数据
let cardOne={psnPicUrl:"",psnCertNoTypeRender:"身份证",psnCertNoRender:"99999999999999999",psnName:"**",psnCertNo:"99999999999999999",psnGendName:"男",psnNatyName:"汉族",cardNo:"9999999",addr: "河北省石家庄市桥西区红旗大街123号",noInfo:"1"
}
配置参数
【配置】
confInfo2: [{ type: 1, label: "姓名", prop: "psnName", maxWidth:"100px" },{ type: 2, label: "号码", prop: "psnCertNo" },{ type: 3, label: "性别", prop: "psnGendName", label2: "民族", prop2: "psnNatyName"},{ type: 4, label: "地址", prop: "addr" },
],
样式代码
<style scoped lang="less">
.cardOneRoot {position: relative;width:300px;padding:20px;background: #fff;border-radius: 3px;display: flex;box-shadow: 1px 1px 10px rgba(27, 101, 185,0.3);&>img{width:77px;height:95px;margin-right: 15px;}.infoDiv{color:#303133;font-size: 14px;&>div{margin-bottom: 10px;&:last-child{margin-bottom: 0;}&>div{display: flex;&.spcOneHeng{display: block;}&>img{margin-left: 10px;width: 36px;height: 16px;}&>span{&:nth-child(1),&:nth-child(3){color:#7F7F7F;letter-spacing: 2px;white-space: nowrap;}&:nth-child(2),&:nth-child(4){font-weight: bold;max-width: 220px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}&.huanHang{display: block;}}}}}.posiNO {font-size: 16px;font-weight: bold;position: absolute;top: 45%;left: 50%;}
}
</style>
