如何在Vue的Element UI中的el-input组件中禁用聚焦时的边框样式？

在Vue的Element UI中，`el-input`组件默认在获取焦点时会有边框变粗的视觉效果，如果你想要禁用这种样式，你可以通过自定义CSS来覆盖默认样式。首先，在你的样式表文件（如`styles.scss`或`styles.css`）中添加如下规则：

.el-input.is-focused {
  border-color: initial; /* 或者设置为透明 */
  box-shadow: none;
}

这里的关键在于`.is-focused`类，这是Element UI给输入框聚焦状态添加的类名。通过设置`border-color`属性为`initial`，它会恢复到元素的初始边框颜色（通常是黑色），如果希望完全去除边框，可以设置为`transparent`。同时，`box-shadow`属性用于移除聚焦时可能出现的光晕效果。

如果你是在`.vue`文件的`<style>`标签内写CSS，可以这样做：

<style scoped>
.el-input.is-focused {
  border-color: initial;
  box-shadow: none;
}
</style>

然后在需要禁用边框样式的`el-input`上添加`focus`事件阻止默认行为：

<template>
  <el-input v-model="inputValue" @focus.prevent></el-input>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

通过上述方法，当用户试图聚焦这个输入框时，边框就不会改变样式了。