(vue)el-popover鼠标移入提示效果

nyf_unknown

已于 2024-01-04 10:23:33 修改

阅读量832

点赞数 9

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2024-01-04 10:23:08 首次发布

本文链接：https://blog.csdn.net/qq_44754635/article/details/135379930

版权

VUE 专栏收录该内容

189 篇文章 2 订阅

订阅专栏

(vue)el-popover鼠标移入提示效果

效果：
在这里插入图片描述

代码：

<el-form-item
  v-for="(item,index) of ele.algorithmParameters"
  :key="index"
  :label="item.parametersName"
  class="descInput"
>
  <el-input v-model="item.parametersValue" placeholder="请输入" @change="paramsChange" />  
  <!-- 重点开始 -->
  <span class="descIcon">
    <el-popover placement="right" trigger="hover">
      <i slot="reference" class="el-icon-question"></i>//slot="reference"
      <span>{{ item.itemDescription }}</span>//浮现的内容
    </el-popover>
  </span>
<!-- 重点结束 -->
</el-form-item>


//样式
<style lang="scss" scoped>
// 参数描述
.descInput {
  position: relative;
}
.descIcon {
  position: absolute;
  top: 0px;
  right: -25px;
  margin-right: 10px;
}
</style>