iview Tooltip换行及渲染

川长思鸟来 2023-07-01 08:34 2阅读 0赞

**需求：**  
关于iview上的文字提示及气泡提示都是没有换行的，如果我们要换行必须自己设置，但是你直接在Tooltip上设置它的style为whit-spce=‘normal’是不能生效的，官方是提供了一种换行方式，但是并没有很详细的解答

**官方解决方案：**  
注意 Tooltip 内的文本使用了 white-space: nowrap;，即不自动换行，如需展示很多内容并自动换行时，建议给内容 slot 增加样式 white-space: normal;

<Tooltip placement="top">
       <Button>Multiple lines</Button>
          <div slot="content">
             <p>Display multiple lines of information</p>
             <p><i>Can customize the style</i></p>
          </div>
     </Tooltip>

**自己解决方案：**  
第一种是直接这种标签类型的和官方一样只是不用p标签而是设置style（需要说明的是Tooltip标签加样式必须如官方所说必须要加slot='content’属性，否则不会生效）

<Tooltip placement="bottom-end">
        <Button>Multiple lines</Button>
        <div slot="content" style="white-space: normal;">
            Display multiple lines of information
            Can customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the styleCan customize the style
         </div>
    </Tooltip>

第二种是表格渲染时用的render函数渲染Tooltip这种就要模拟上边这种必须要组合标签的方式了，所以我们就用render函数去模拟这种标签模式

render: (h, params) => { 
            let texts = '';//表格列显示文字
            if (params.row.message !== null) { 
                  if (params.row.message.length > 13) { //进行截取列显示字数
                      texts = params.row.message.substring(0, 13) + ".....";
                   } else { 
                       texts = params.row.message;
                   }
            }
             return h('div', [
                   h('Tooltip', { 
                        props: { 
                             placement: 'top',
                             transfer: true
                         }
                    }, [//这个中括号表示是Tooltip标签的子标签
                        texts,//表格列显示文字
                        h('div', { 
                              slot: 'content',
                              style: { 
                                  whiteSpace: 'normal'
                               }
                          }, params.row.message//整个的信息即气泡内文字)
                          ])
              ]);
    }