iview Tooltip換行及渲染

需求:
關於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//整個的信息即氣泡內文字)
                      ])
          ]);
}
發佈了99 篇原創文章 · 獲贊 91 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章