iview Tooltip換行及應用


第一種:

<Tooltip placement="bottom">
    <Button>Multiple lines</Button>
    <div slot="content" style="white-space: normal;">
       A balloon appears when the mouse passes over this text
     </div>
</Tooltip>

第二種: 

render: (h, params) => {
            let texts = ''; //表格列顯示文字
            if (params.row.content !== null) {
              if (params.row.content.length > 6) { //進行截取列顯示字數
                texts = params.row.content.substring(0, 6) + ".....";
              } else {
                texts = params.row.content;
              }
            }
            return h('div', [
              h('Tooltip', {
                props: {
                  placement: 'bottom',
                  // transfer: true  //是否將彈層放置於 body 內
                },
                style: {
                  cursor: 'pointer',
                }
              }, [ //這個中括號表示是Tooltip標簽的子標簽
                texts, //表格列顯示文字
                h('div', {
                    slot: 'content',
                    style: {
                      whiteSpace: 'normal'
                    }
                  }, params.row.content //整個的信息即氣泡內文字
                )
              ])
            ]);
          }

顯示結果如下:

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM