H5 拨打电话&&根据不同状态显示不同的背景色

1。根据不同状态显示不同的背景色

<div class="status"> <span class="mark" :class="markClassMap[baseInfo.status] || ''"> {{baseInfo.status}} </span> </div> data() { return{ baseInfo:{ status: '待处理' } } } markClassMap: { '待处理': 'mark-yellow', '处理中': 'mark-blue', '处理完成': 'mark-green', '驳回': 'mark-red', '已废弃': 'mark-deep-red' }, .status { .mark{ 相关样式 } .mark-yellow { background: #FCAC6F; } .mark-blue { background: #6F9FFF; } .mark-green { background: #1AE0BA; } .mark-red { background: #F34158; } .mark-deep-red { background: #DF5164; } }

效果

---

2、H5点击电话，拨打电话

<a :href="'tel:' + standardInfo.contactNumber">{{standardInfo.contactHideNumber}}</a> // 隐藏电话中间4位 contactHideNumber: val.contactNumber.substring(0, 3) + '****' + val.contactNumber.substring(7)

效果