vue Tooltip提示动态换行问题

目录
  • Vue Tooltip提示动态换行
    • element的tooltip
  • 使用this.$confirm换行显示提示信息

Vue Tooltip提示动态换行

在项目中遇到一个需求，通过接口获取到的接口数据名称比较长，提交加一个title来全部显示出来，因为用的是原生的标签，所以直接在li中加了一个title,但是遇到的问题就是title不能换行，于是改变策略，我就引用了element的tooltip

element的tooltip

通过按钮引入组件，避免项目文件太大，还有不会的小伙伴吗？直接去官网看一下吧！element-Tooltip：

下面进入正题

//这是hmtl
<li style="width: 55%" v-if="item.name.length>15">
   <el-tooltip placement="top">
   //敲黑板了啊！注意这里，原生就用v-html解析
     <div slot="content"  v-html="item.name"></div> 
     <span>{{ item.name.substring(0,15)+'...'  }}</span>
   </el-tooltip>
 </li>
//这是方法
    ProcessNewline(){
        //this.newNameList 是你后台获取过来的数组，进行遍历
      for(var i of this.newNameList){
          //判断每项的长度，这个15，你们可以自己设置，也可以动态设置
        if(i.name.length > 15){
            //通过match方法在字符串内检索指定的值,然后进行匹配，里面的20，就是你想间隔的字符位数，至于这里为什么用br,那是因为v-html,只能解析br,解析不了 \n，
          i.name = i.name.match(/.{1,20}/g).join("<br />")
        } else {
          i.name = i.name
        }
      }
    },

这个方法亲测有效。

使用this.$confirm换行显示提示信息

在写一个简单的按钮点击确认框信息的时候，发现换行不能用\n。用了< br>发现也是字符串的输出形式

去查了下发现需要使用$createElement来创建

这里我需要显示两行信息。代码如下

creatNew(){
 const h = this.$createElement
        this.$confirm('提示', {
          title: '提示',
          message: h('div', [
            h('p', '新建会导致之前设置失效'),
            h('p', '是否继续新建？')
          ]),
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
        ....//调用新建方法
        }).catch(()=>({}))//不要忘记catch
        //最后可以.finally(()=>({}))
        }

解释：

h('div')就表示创建一个div标签，

如果写成h('div',{class:'...'})就可以定义class，如：

h('i', { class: 'el-icon-question' })

如果写成下面的，则可以定义props。（以element的弹出框el-tooltip为例）

h('el-tooltip',{props:{
                    content: (function() {
                      return '弹出信息'
                      })(),
                    placement: 'top'
                    }})

包含关系用h('div',[...])，如div中包含两个p标签：（可以继续嵌套）

h('div', [
            h('p', '第一个p'),
            h('p', '第二个p')
          ])

简单介绍到这里。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue组件之Tooltip的示例代码

    前言 本文主要Alert 组件的大致框架, 提供少量可配置选项. 旨在大致提供思路 tooltip 常用于展示鼠标 hover 时的提示信息. 模板结构 <template> <div style="position:relative;"> <span ref="trigger"> <slot> </slot> </span> <div class="tooltip"

  • 解决vue字符串换行问题(绝对管用)

    vue 中 用 {{}} 进行数据绑定的时候,如果我么你想让字符串换行是不生效的 解决办法,不用上边的方式进行数据绑定,用v-html标签代替{{}} data中的str为 "<b>1111</b><br/>2222" 例1, <div>{{str}}<div> 例1效果 <i>1111</i><br/>2222 例2, <div v-html="str">&

  • vue Element UI扩展内容过长使用tooltip显示示

    vue Element UI扩展内容过长使用tooltip显示示

    目录 1. 介绍 2. element-ui(vue2版本) 2.1 注册指令 1) akTooltipAutoShow.js 2.2 使用 3. element-plus(vue3版本) 3.1 注册指令 1) akTooltipAutoShow.js 2) 进行局部或全局注册 3.2 使用 1. 介绍 Tooltip常用于展示鼠标 hover 时的提示信息. 而在实际过程中,有这么一个需求:只有文字内容排不下,出现省略号,才需要显示tooltip的提示内容. 本文章的思路是通过一个自定义指令

  • vue Tooltip提示动态换行问题

    目录 Vue Tooltip提示动态换行 element的tooltip 使用this.$confirm换行显示提示信息 Vue Tooltip提示动态换行 在项目中遇到一个需求,通过接口获取到的接口数据名称比较长,提交加一个title来全部显示出来,因为用的是原生的标签,所以直接在li中加了一个title,但是遇到的问题就是title不能换行,于是改变策略,我就引用了element的tooltip element的tooltip 通过按钮引入组件,避免项目文件太大,还有不会的小伙伴吗?直接去官

  • vue实现提示保存后退出的方法

    假设有这样一个需求,用户在一个页面内编辑文字,但是并未点击保存并且跳转到了下一个路由.比较好的做法应该是给出一个提示-"您编辑的内容还未保存,是否确认退出?"用户如果点击"确定",那么不保存当前内容直接退出,用户如果点击"取消",则取消本次路由跳转,继续留在原来的页面. 尝试的错误做法 一开始的时候我是想着使用vuex结合vue router的beforeEach导航守卫来实现.代码如下: 首先在vuex中新增一个状态值-introduceSta

  • vue iview实现动态路由和权限验证功能

    github上关于vue动态添加路由的例子很多,本项目参考了部分项目后,在iview框架基础上完成了动态路由的动态添加和菜单刷新.为了帮助其他需要的朋友,现分享出实现逻辑,欢迎一起交流学习. Github地址 iview-dynamicRouter 实现目标 客户端从服务端拿到路由和权限数据后,刷新项目的路由和菜单列表,并进行权限控制. 项目基础 基础框架: iview组件库官方模板项目 iview-admin 的template分支项目,此项目为 iview-admin 的基础框架代码.项目地

  • 基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)

    前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的,所以要遍历生成: 2.联系方式(手机/座机)的切换,是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,

  • vue+echarts实现动态绘制图表及异步加载数据的方法

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s   (我这里用了淘宝镜像,不知道同学自行百度) 实例化   在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart

  • vue如何实现动态加载脚本

    这篇文章主要介绍了vue如何实现动态加载脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 今天在研究,tinymce富文本编辑器怎样在vue中使用,然后看到其它框架上的使用方法,它是动态加载tinymce脚本的,若果在本地引入静态文件或者,npm安装都会导致vue项目打包体积过大,这种动态脚本引入方式,是一个不错的实践,下面上的代码块叫 dynamicLoadScript 顾名思义,动态加载脚本,这个js只对加载tinymce有效,不过要想加

  • vue+echarts实现动态折线图的方法与注意

    之前公司有个绘制实时盈利率折线图的需求,实现的还不错,今天来分享下vue+echarts实现动态折线图的方法. 实现代码 <template> <div id="myChart"></div> </template> <script> import echarts from 'echarts' export default { name: 'DynamicLineChart', data () { return { // 实时

  • vue+elementui实现动态添加行/可编辑的table

    vue+elementui实现动态添加行/可编辑的table

    本文实例为大家分享了vue+elementui实现动态添加行.可编辑的table的具体代码,供大家参考,具体内容如下 HTMl代码块: <el-col :span="24">     <el-form-item label="与承租户同户籍成员:" :label-width="formLabelWidth">         <el-table :data="zichandetail.members&quo

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • Vue.js Ajax动态参数与列表显示实现方法

    Vue.js简介 vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.动态参数显示 ajax异步请求后,接收到返回的data参数并显示在前端 1.1 引入js,也加入了jQuery <script type="text/javascript" src="/js/vue.min.js"></script> <script type="text/javascript&

随机推荐