前言

这个问题从2020年小年夜一直卡到2021年大年初一才解决，虽然查了很多资料，但是没有一个能解决的。主要原因有2个：
1.本人是新手，Vue学习使用时间不长，而且用的是最新的Vue3
2.用了Element plus，而不是Element UI

问题描述

我想实现如下一个功能，在input上方弹出一个popover窗口提示，并且将input和popover边框全变成红色，如下图：

第一个小坑：弹出popover窗口提示

首先根据element plus指南，做出如下效果：

本以为很简单，结果手动激活始终弹不出popover窗口提示，原因是：
(1)trigger=“manual” 弹出模式为手动模式，这里要设为manual
(2)v-model:visible=“visible” 通过设置visible为true或false来实现显示或者隐藏弹窗。

第二个坑：修改input外边框的颜色

(1)给el-input加一层原生标签，并给定一个类
(2)配合样式穿透
这个问题解决，我是参考下面这位大哥的方法
https://blog.csdn.net/qq_42527726/article/details/107907936

第三个天坑：修改popover外边框的颜色

天真的我以为和第二个一样简单，结果卡了我整整1天多
关键原因：Chrome浏览器F12，看Elements调试
(1)el-input是在id=“app”的根组件中的，但是popover不在根组件，而是和根组件同级，都在body下的

(2)如果还是用修改input样式一样的方法，根本不生效：

vue-cli生成时，自动给样式加了[data-v-]，所以无法修改popover。如果去掉文件样式中的scoped，会造成全局样式污染。

(3)解决办法：element plus考虑到了这个问题，只是在文档中简单的提到了popper-class这个属性，怎么用完全没说。
具体解决办法：
首先在模板template中el-popover加上popper-class，并指定一个类名，这里我指定的是teshu，就是上图中出现的那个。
然后在项目里定义一个css文件

把样式放在这个文件中

再在main.js中引入这个全局样式

这样，就可以了，既解决了问题，又不会造成全局样式污染。

给出最终代码

//popcss.css代码
.el-popover.teshu.el-popper.is-light {
  color: #f56c6c;
  border: 1px solid #f56c6c;
}
.teshu.el-popper.is-light .el-popper__arrow::before {
  border: 1px solid #f56c6c;
}

//vue文件，使用时把<template>中的注释去掉，否则会报错
<template>
  <el-popover
    placement="bottom"
    :width="200"
    <!-- trigger="manual"  弹出模式为手动模式，这里要设为manual -->
    trigger="manual"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
     <!-- v-model:visible="visible"  通过设置visible为true或false来实现显示或者隐藏弹窗。-->
  <!-- :popper-class="teshu"  绑定修改el-popover的样式类 -->
    v-model:visible="visible"
    popper-class="teshu"
  >
    <template #reference>
     <!-- 给el-input加一层原生标签(我这里给的是div)，并给定一个类(我设定的是errcss) -->
      <div class="errcss">
        <el-input></el-input>
      </div>
    </template>
  </el-popover>
  <el-button @click="show">手动激活</el-button>
</template>

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    // 模板中控制显示的变量
    const visible = ref(false)
    // 控制显示和隐藏的方法
    const show = () => {
      visible.value = !visible.value
    }
    return {
      visible,
      show
    }
  }
})
</script>

<style lang="less" scoped>
// 模板中el-input给定的类
.errcss {
  // 一定要加/deep/才能穿透，less不支持>>>，如果是css，这里就要用>>>
  /deep/ .el-input__inner,
  .el-input__inner:hover,
  .el-input__inner:focus {
    border-color: #f56c6c;
  }
}
</style>