element 中 input [ type = number ] 光标 bug 整改

Pagination 分页光标bug整改

在分页器的文本框中输入数字是没问题的；但是如果我们只输入中文，他的光标就会跑到左边，不再是居中的效果

1、先来排除 bug 是否与框架有关：

我们可以看到他用的是一个type=“number” 的 input，准备一个纯html的代码进行尝试，发现也有类似的问题，说明bug跟框架是没关系的。

<input type="number" style="text-align: center;">

2、解决问题方案

<!-- 绑定一个 oninput 事件，传入 event -->
 <input type="number" style="text-align: center;" oninput="fixInvalidChar(event)">

 function fixInvalidChar(e){
    console.log(e);
 }

我们发现当我们输入中文后，点击确定时 e.data 就会等于一个空字符串，然后我们进行一个判断就好了：

纯html解决方案

 function fixInvalidChar(e){
 // 判断e.data 为空，且 e.target.value 为空
   if(e.data === '' && e.target.value === ''){
   	  // 将他的值设置为 '0'
      e.target.value = '0'
      // 设置计时器再将 0 清空
      setTimeout(() => {
        e.target.value = ''
      }, 0);
   }
 }

3、针对vue解决方案

 <!-- 给分页组件设一个 ref 方便在 $refs 中能取到他 --> 
 <el-pagination
      ref='pagination'
      :current-page="1"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="1000"
 />

vue2中element-ui解决方案：

 // vue2
 mounted(){
	this.$refs.pagination.$el.querySelector('input[type=number]').oninput = (e) =>{
		if(e.data === '' && e.target.value === ''){
      		e.target.value = '0'
      		setTimeout(() => {
        		e.target.value = ''
     		}, 0);
   		}
	}
 }

vue3中element-plus解决方案：

 // vue3
 import { ref, onMounted } from 'vue';
 const pagination: any = ref(null)
 onMounted(() => {
	pagination.value.oninput = (e) =>{
		if(e.data === '' && e.target.value === ''){
      		e.target.value = '0'
      		setTimeout(() => {
        		e.target.value = ''
     		}, 0);
   		}
	}
 })