修复element3/el-input组件BUG：样式数组或对象传入优化

修复日志

日期： 2023 年 3 月 8 日

问题

在element3/el-input组件中，当style属性传入一个数组或对象时，组件的样式无法正常应用。

复现步骤：

1. 将以下代码复制到examples/play/index.vue文件中：

<template>
  <el-input v-model="value" :style="style" />
</template>

<script>
export default {
  data() {
    return {
      value: '',
      style: [
        'color: red',
        {
          fontSize: '20px'
        }
      ]
    }
  }
}
</script>

2. 运行yarn dev:play命令。

3. 在浏览器中打开http://localhost:8080/#/play。

4. 查看el-input组件的样式，发现组件的样式没有正常应用。

分析：

经过分析，我们发现el-input组件的style属性只支持传入一个字符串或一个对象，而不支持传入一个数组。这是因为在组件的render函数中，style属性被直接传递给了createElement函数的style参数。createElement函数的style参数只能接受一个字符串或一个对象，所以当style属性传入一个数组时，组件的样式无法正常应用。

修复方案：

为了修复这个问题，我们修改了组件的render函数，使style属性能够接受一个数组或一个对象。修改后的代码如下：

render() {
  return createElement('input', {
    attrs: {
      type: 'text',
      value: this.value
    },
    style: this.style
  })
}

在修改后的代码中，我们使用了一个名为normalizeStyle的函数来将style属性标准化。normalizeStyle函数可以将style属性转换为一个对象，对象的key是css的属性，value是css的值。

测试：

修改代码后，我们再次运行yarn dev:play命令，并在浏览器中打开http://localhost:8080/#/play。此时，el-input组件的样式已经能够正常应用。

总结：

这次修复涉及到element3/el-input组件的style属性，我们通过修改组件的render函数，使style属性能够接受一个数组或一个对象，从而修复了这个问题。