Honeycomb Design

# 气泡卡片 Popover

# 基本用法

hover激活 click激活
基本用法

使用气泡卡片做信息提示功能

<title>基本用法</title>
<describe>使用气泡卡片做信息提示功能</describe>
<template>
  <hc-popover
      position="top"
       content="这是一段内容,这是一段内容,,这是一段内容,,这是一段内容,这是一段内容">
   <el-button>hover激活</el-button>
  </hc-popover>
<hc-popover
      position="top"
      trigger ="click"
       content="这是一段内容,这是一段内容,这是一段内容,,这是一段内容,这是一段内容">
   <el-button>click激活</el-button>
  </hc-popover>
</template>

# 自定义显示内容

hover激活
自定义内容

使用气泡卡片做信息提示功能

<title>自定义内容</title>
<describe>使用气泡卡片做信息提示功能</describe>
<template>
  <hc-popover position="top">
  <template #content>自定义一些标签内容
 <hc-tag :value="1" text="标签1" type="defalut">标签1</hc-tag></template>
   <el-button>hover激活</el-button>
  </hc-popover>
</template>

# 属性及事件

# HcPopover属性

属性 说明 类型 可选值 默认值
v-model 是否显示 boolean - false
content 内容 string - -
trigger 触发方式 string hover,click hover
position 弹出位置 string top,tl,tr,bottom,bl,br,left,lt,lb,right,rt,rb top
show-arrow 是否显示箭头 boolean - true
max-width 最大宽度 number/string - 200
min-width 最小宽度 number/string - 380
content-style 自定义内容区域样式 {[cssKey]: [cssValue]} - {}

# HcPopover事件

名称 说明 参数
change 显示隐藏更改 (visible: boolean) => void

# HcPopover 插槽

名称 说明
default 气泡卡片箭头指向的对象
content 气泡卡片内容

← 标签页 Tabs →