因為這個組件沒有suffix插槽撵摆,所以通過dom方式手動插入。
<el-input-number id="unit_1" v-model="form.Fee" placeholder="請輸入費用" style="width: 100%;" :controls="false" :max="99" :min="0" step-strictly :precision="2" :step="0.01" />
// 先給組件加id仑撞,然后在mounted中調用
mounted() {
this.addSuffix('unit_1')
}
addSuffix(id) {
this.$nextTick(() => {
const inputWrapper = document.getElementById(id)
console.log(inputWrapper)
console.log(inputWrapper.lastChild)
const suffix = document.createElement('span')
suffix.innerText = '元'
suffix.style.width = '40px'
suffix.style.borderLeftWidth = '1px'
suffix.style.borderLeftStyle = 'solid'
suffix.style.borderLeftColor = '#dcdfe6'
suffix.style.position = 'absolute'
suffix.style.display = 'inlineBlock'
suffix.style.right = '0'
suffix.style.textAlign = 'center'
suffix.style.color = '#909399'
suffix.style.fontSize = '13px'
suffix.style.borderTopRightRadius = '5px'
suffix.style.borderBottomRightRadius = '5px'
suffix.style.margin = '1px'
suffix.style.backgroundColor = '#f5f7fa'
inputWrapper.lastChild.appendChild(suffix)
})
}
效果還行