Vue 为一个设置了ref为‘inputNumberRef’, 通过这个ref获取 组件中的增、减按钮所在的标签,并将它们的class分别改为'el-icon-plus' 和 'el-icon-minus'。
可以通过以下代码实现:
- <div>
- <el-input-number ref="inputNumberRef">el-input-number>
- div>
-
- <script>
- export default {
- mounted() {
- const inputNumberElement = this.$refs.inputNumberRef.$el;
- const plusButton = inputNumberElement.querySelector('.el-icon-arrow-up');
- plusButton.classList.replace('el-icon-arrow-up', 'el-icon-plus');
- const minusButton = inputNumberElement.querySelector('.el-icon-arrow-down');
- minusButton.classList.replace('el-icon-arrow-down', 'el-icon-minus');
- }
- }
- script>
在 mounted() 钩子函数里面,首先获取 <el-input-number> 组件实例的根元素 this.$refs.inputNumberRef.$el,接着分别获取增加和减少按钮的元素,即 .el-icon-arrow-up 和 .el-icon-arrow-down,最后使用 classList.replace() 方法将它们的类名从 el-icon-arrow-up 和 el-icon-arrow-down 替换为 el-icon-plus 和 el-icon-minus。
修改后的样式:
