## Poptip 氣泡提示 Poptip 與 Tooltip 類似，具有很多相同配置，不同點是 Poptip 以卡片的形式承載了更多的內容，比如鏈接、表格、按鈕等。 Poptip 有confirm 確認框，與 Modal 不同的是，它會出現在就近元素，相對輕量。  ### 代碼示例 基礎用法 ```html <cvu-poptip trigger="hover" title="Title" content="content"> <cvu-button>Hover</cvu-button> </cvu-poptip> <cvu-poptip title="Title" content="content"> <cvu-button>Click</cvu-button> </cvu-poptip> <cvu-poptip trigger="focus" title="Title" content="content"> <cvu-button>Focus</cvu-button> </cvu-poptip> <cvu-poptip trigger="focus" title="Title" content="content" placement="right"> <Input placeholder="Input focus" /> </cvu-poptip> ``` 位置  ```html <div class="top"> <cvu-poptip title="Title" content="content" placement="top-start"> <cvu-button>上左</cvu-button> </cvu-poptip> <cvu-poptip title="Title" content="content" placement="top"> <cvu-button>上邊</cvu-button> </cvu-poptip> <cvu-poptip title="Title" content="content" placement="top-end"> <cvu-button>上右</cvu-button> </cvu-poptip> </div> <div class="center"> <div class="center-left"> <cvu-poptip title="Title" content="content" placement="left-start"> <cvu-button>左上</cvu-button> </cvu-poptip><br><br> <cvu-poptip title="Title" content="content" placement="left"> <cvu-button>左邊</cvu-button> </cvu-poptip><br><br> <cvu-poptip title="Title" content="content" placement="left-end"> <cvu-button>左下</cvu-button> </cvu-poptip> </div> <div class="center-right"> <cvu-poptip title="Title" content="content" placement="right-start"> <cvu-button>右上</cvu-button> </cvu-poptip><br><br> <cvu-poptip title="Title" content="content" placement="right"> <cvu-button>右邊</cvu-button> </cvu-poptip><br><br> <cvu-poptip title="Title" content="content" placement="right-end"> <cvu-button>右下</cvu-button> </cvu-poptip> </div> </div> <div class="bottom"> <cvu-poptip title="Title" content="content" placement="bottom-start"> <cvu-button>下左</cvu-button> </cvu-poptip> <cvu-poptip title="Title" content="content" placement="bottom"> <cvu-button>下邊</cvu-button> </cvu-poptip> <cvu-poptip title="Title" content="content" placement="bottom-end"> <cvu-button>下右</cvu-button> </cvu-poptip> </div> ``` 從浮層內關閉 > 通過v-model來控制提示框的顯示和隱藏。  ```html <cvu-poptip v-model="visible"> <a>Click</a> <div slot="title"><i>Custom title</i></div> <div slot="content"> <a @click="visible = false">close</a> </div> </cvu-poptip> ``` 嵌套復雜內容 > 通過自定義 slot 來實現復雜的內容。  ```html <cvu-poptip placement="right-end" width="600"> <cvu-button>Click</cvu-button> <div slot="content"> <div class="table-main"> <cvu-table border stripe :columns="tableData.columns" :data="tableData.data"></cvu-table> </div> </div> </cvu-poptip> ``` 自動換行 > 設置屬性 word-wrap，當超出寬度后，文本將自動換行，并兩端對齊。  ```html <cvu-poptip word-wrap width="200" title="Title" content="Steven Paul Jobs was an American entrepreneur and business magnate. He was the chairman, chief executive officer, and a co-founder of Apple Inc."> <cvu-button>長文本</cvu-button> </cvu-poptip> ``` 確認框 > 通過設置屬性confirm開啟確認框模式。確認框只會以 click 的形式激活，并且只會顯示 title 的內容，忽略 content。  ```html <cvu-poptip confirm title="您確定刪除這條內容嗎?" @on-ok="ok" @on-cancel="cancel"> <cvu-button>Delete</cvu-button> </cvu-poptip> ``` 主題 > 設置屬性 theme 可以顯示不同的顏色。  ```html <cvu-poptip title="標題" content="內容" placement="bottom" theme="light"> <cvu-button>Light(default)</cvu-button> </cvu-poptip> <cvu-poptip title="標題" content="內容" placement="bottom" theme="dark"> <cvu-button>Dark</cvu-button> </cvu-poptip> ``` ### props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | trigger | 觸發方式，可選值為`hover`（懸停）`click`（點擊）`focus`（聚焦）,在 confirm 模式下，只有 click 有效 | String | click | | title | 顯示的標題 | String \| Number | \- | | content | 顯示的正文內容，只在非 confirm 模式下有效 | String \| Number | 空 | | placement | 提示框出現的位置，可選值為top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end | String | top | | width | 寬度，最小寬度為 150px，在 confirm 模式下，默認最大寬度為 300px | String \| Number | \- | | confirm | 是否開啟對話框模式 | Boolean | false | | disabled | 是否禁用 | Boolean | false | | ok-text | 確定按鈕的文字，只在 confirm 模式下有效 | String | 確定 | | cancel-text | 取消按鈕的文字，只在 confirm 模式下有效 | String | 取消 | | transfer | 是否將彈層放置于 body 內，在 Tabs、帶有 fixed 的 Table 列內使用時，建議添加此屬性，它將不受父級樣式影響，從而達到更好的效果 | Boolean | false | | popper-class | 給 Poptip 設置 class-name，在使用 transfer 時會很有用 | String | \- | | word-wrap | 開啟后，超出指定寬度文本將自動換行，并兩端對齊 | Boolean | false | | padding | 自定義間距值 | String | 8px 16px | | offset | 出現位置的偏移量 | Number | 0 | | theme | 主題色，可選值 light \| dark | String | light | | dis-arrow | 是否隱藏小三角 | Boolean | false | ### events | 事件名 | 說明 | 返回值 | | --- | --- | --- | | on-popper-show | 在提示框顯示時觸發 | 無 | | on-popper-hide | 在提示框消失時觸發 | 無 | | on-ok | 點擊確定的回調，只在 confirm 模式下有效 | 無 | | on-cancel | 點擊取消的回調，只在 confirm 模式下有效 | 無 | ### slot | 名稱 | 說明 | | --- | --- | | 無 | 主體內容 | | title | 提示框標題，定義此 slot 時，會覆蓋 props`title` | | content | 提示框內容，定義此 slot 時，會覆蓋 props`content`，只在非 confirm 模式下有效 |