vue在表格中弹窗显示提示信息，使用el-popover组件

码田里的小白菜

已于 2022-09-30 15:22:06 修改

阅读量1.5k

点赞数

文章标签： vue.js elementui javascript

于 2022-09-27 10:00:37 首次发布

本文链接：https://blog.csdn.net/weixin_45294459/article/details/127065679

版权

效果如下：当悬停在input上时，会显示如下

        <template>
          <el-popover
            placement="top"
            width="200"
            trigger="hover"
            popper-class="monitor-yt-popover"
          >
            <span>规则：{{ config.unitId }}</span>
            <el-input
              v-model="config.unitId"
              slot="reference"
              type="text"
              @blur="
                getUnitScoreVal()
              "
            ></el-input>
          </el-popover>
        </template>

样式如下：注意不能写在scoped的style标签中，正确如下

<style>
.el-popover.monitor-yt-popover {
  background-color: #fbfbfb;
  border-color: #f56c6c;
  color: #f56c6c;
}

.monitor-yt-popover .popper__arrow::after {
  border-top-color: #f56c6c !important;
}
</style>