## 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 模式下有效 |