您现在的位置是：网站首页> 编程资料编程资料

vue Tooltip提示动态换行问题_vue.js_

2023-05-24 834人已围观

简介 vue Tooltip提示动态换行问题_vue.js_

Vue Tooltip提示动态换行

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

element的tooltip

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

下面进入正题

//这是hmtl 
  •         //敲黑板了啊！注意这里，原生就用v-html解析      
           {{ item.name.substring(0,15)+'...'  }}          
    •  //这是方法     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("
    ")         } 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')           ])

    简单介绍到这里。 

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

    您可能感兴趣的文章:

    上一篇：vue项目配置eslint保存自动格式化问题_vue.js_

    下一篇：如何解决element-ui动态加载级联选择器默认选中问题_vue.js_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网