Vue通过ref修改 <el-input-number> 增减按钮的样式

Vue 为一个  设置了ref为‘inputNumberRef’, 通过这个ref获取组件中的增、减按钮所在的标签,并将它们的class分别改为'el-icon-plus' 和 'el-icon-minus'。

可以通过以下代码实现:




mounted() 钩子函数里面,首先获取 <el-input-number> 组件实例的根元素 this.$refs.inputNumberRef.$el,接着分别获取增加和减少按钮的元素,即 .el-icon-arrow-up 和 .el-icon-arrow-down,最后使用 classList.replace() 方法将它们的类名从 el-icon-arrow-upel-icon-arrow-down 替换为 el-icon-plusel-icon-minus

修改后的样式:

你可能感兴趣的:(vue.js,javascript,前端)