Callout

<fv-callout :visible.sync="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:

{ "value": 9 } px

space:

{ "value": 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>

Propoties

---

属性(attr)	类型(type)	必填(required)	默认值(default)	说明(statement)
visible.sync	Boolean	No	false	是否显示
theme	['system','light','dark','custom']	No	'system'	主题色
disabled	Boolean	No	false	是否禁用
space	Number	No	0	间距(px)
beak	Number	No	10	角标大小(px)
position	['topLeft','topCenter',...]	No	'bottomCenter'	位置
lockScroll	Boolean	No	false	是否锁定滚动
focusTrap	Boolean	No	false	是否聚焦
delayClose	Number	No	0	显示时是否延时关闭(ms)
effect	[’click','hover','always']	No	'click'	显示触发方式
popperStyle	Object	No	{}	悬浮窗的样式
popperClass	Array	No	[]	悬浮窗的 css

Appendix

---

1. position

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