首页 > 其他分享 >关于ElementUI的el-popover的问题:文本换行、修改样式

关于ElementUI的el-popover的问题:文本换行、修改样式

时间:2022-08-25 17:56:19浏览次数:67  
标签:el ElementUI 换行 样式 popover 方法

 一、 el-popover组件要想实现content中的内容换行可是使用如下方法:

  第一种方法:

 <el-popover
        placement="right"
        width="370"
        trigger="hover"
      >
          <p class="tipck"> 1、XXXXXX </p>
          <p class="tipck">2、XXXXXX </p>
          <p class="tipck">3、 XXXXXXX</p>
        <span class="el-icon-question" slot="reference"></span>
      </el-popover>

  实现结果:

 

 

  第二种方法:(官方):

<el-tooltip placement="top">
  <div slot="content">多行信息<br/>第二行信息</div>
  <el-button>Top center</el-button>
</el-tooltip>

  实现结果:

    

 

二、el-popover的文字提示设置样式或字体无效,是应为el-popover添加的元素是与app文件同级的所以设置无效,暴力,简单的方法如下:

       问题:

  解决方法:取消scoped属性,或者在写个style标签,书写样式,不加scoped即可

 

标签:el,ElementUI,换行,样式,popover,方法
From: https://www.cnblogs.com/zhanghaohao/p/16625148.html

相关文章

  • 反射-Class对象功能概述以及获取Field
    Class对象功能概述1、获取成员变量们:Field[]getFields():获取所有public修饰的成员变量FieldgetField(Stringname):获取指定名称的public修饰的成员变量 Field[]g......
  • python selenium使用无头模式执行用例
    什么是无头模式?HeadlessBrowser模式是浏览器的无界面状态,即在不打开浏览器界面的情况下使用浏览器。该模式的好处如下:1)可以加快web自动化测试的执行时间,对于web自动化......
  • java操作selenium浏览器自动化操作
    seleniumgithubselenium官网各类型浏览器webDriver驱动下载chrome浏览器webDriver驱动下载,注意要与电脑上实际安装的浏览器版本相对应原理说明:java代码直接通过sele......
  • 实战 ElasticSearch
    一、基础知识你会如何处理实时或准实时数据流?在大数据时代,有很多方案可以帮助你完成这项任务。接下来,我将通过一个系列的教程,我将利用Storm、Kafka、ElasticSearch逐步......
  • PageHelper自定义count
    一、概述PageHelper:com.github.pagehelper.PageHelper 二、问题描述有一个分页需求,总数据有11万多,响应时间为3秒,测试提出了bug,响应时间太长。sql如下:a表有11万多数......
  • JS监听了select的onchange事件
    <selectid="sel_YJCL"runat="server"></select><inputtype="button"id="btn_YJCL"runat="server"style="display:none"onserverclick="dp_YJCL_SelectedIndexCh......
  • Sequel
    Openadatabaserequire'rubygems'require'sequel'DB=Sequel.sqlite('my_blog.db')DB=Sequel.connect('postgres://user:password@localhost/my_db')DB=Sequ......
  • [Oracle] LeetCode 1161 Maximum Level Sum of a Binary Tree
    Giventherootofabinarytree,thelevelofitsrootis1,thelevelofitschildrenis2,andsoon.Returnthesmallestlevelxsuchthatthesumofallth......
  • excel学习
    1.EXCEL公式的运用M2&"-"&IF(N2<10,"0","")&N2&"-"&IF(O2<10,"0","")&O2 2.EXLCEL中字符拼接函数concatenate('','','',''......) 3.删除单元格中空格......
  • el-tree只能同级拖拽排序
    <el-tree:data="treeData"node-key="id"draggable:allow-drop="allowDrop"@node-drop="handleDrop"></el-tree>主要是用到了allow-drop这个方法,然后去......