Callout

<fv-callout v-model="show" effect="hover" position="bottomLeft">
  <fv-button icon="ActionCenter" borderRadius="3" style="width: 120px; height: 45px;">Callout</fv-button>
  <template v-slot:main>
    <fv-color-picker v-model="color" style="width:500px"></fv-color-picker>
  </template>
</fv-callout>

Callout Custom

beak:

10 px

space:

0 px

position:

topLeft

<fv-callout :lockScroll="true" :position="position.key" :beak="beak" :space="space" :popperStyle="{ backgroundColor: color }" theme="dark">
  <fv-button :background="color" theme="dark" icon="ActionCenter" borderRadius="3" style="width: 120px; height: 45px;">Callout</fv-button>
  <template v-slot:header>
    Fluent UI
  </template>
  <template v-slot:main>
    Hello Vue! Nice to meet you!
  </template>
  <template v-slot:footer>
    @Copyright Creator SN
  </template>
</fv-callout>

属性

---

属性	类型	必填	默认值	说明
v-model	Boolean	No	false	是否显示。
theme	string	否	'global'	主题色。
disabled	boolean	否	false	是否禁用。
space	number	否	0	间距(px)
beak	number	否	0	角标大小(px)
position	string	否	'bottomCenter'	位置。
lockScroll	boolean	否	true	是否锁定滚动。
focusTrap	boolean	否	false	是否聚焦。
delayClose	number	否	0	显示时是否延时关闭(ms)
effect	string	否	'click'	显示触发方式。
popperStyle	object	否	{}	悬浮窗的样式。
popperClass	array	否	[]	悬浮窗的 css
keepalive	boolean	否	false	参见组件的 keepalive 选项。
lang	string	否	"global"	参见组件的 lang 选项。

Appendix

---

1. position

position属性包括: topLeft, topRight, topCenter, bottomLeft, bottomRight, bottomCenter, leftTop, leftCenter, leftBottom, rightTop, rightBottom, rightCenter