Bubble 气泡栏

Bubble 组件是 kaitify-vue 的内置组件，必须放置在 Wrapper 组件的 default 插槽中

Props 参数

visible boolean

是否显示气泡栏，默认为 false

match KNodeMatchOptionType

指定气泡栏出现的位置条件，每次更新气泡位置时会判断光标是否在符合条件的节点下，如果符合则根据该节点的真实 dom 进行定位，否则只根据光标位置进行定位

关于该属性的释义，同 kaitify 中的 Editor 的 getMatchNodeBySelection 方法中的入参

hideOnMousedown boolean

鼠标在编辑器内按下时是否隐藏气泡栏，默认为 false，如果该值为 true，在鼠标按下时即使 visible 属性是 true，也无法显示气泡栏

Events 事件

show

气泡栏显示前触发的事件，回调参数为气泡栏的 dom

<template>
  <Wrapper v-model="content">
    <Bubble @show="bubbleShow" />
  </Wrapper>
</template>
<script setup lang="ts">
import { Wrapper, Bubble } from '@kaitify/vue'
import { ref } from 'vue'
const content = ref('<p>hello</p>')

const bubbleShow = (el: HTMLDivElement) => {
  console.log('气泡栏显示前触发', el)
}
</script>

showing

气泡栏显示时触发的事件，回调参数为气泡栏的 dom

<template>
  <Wrapper v-model="content">
    <Bubble @showing="bubbleShowing" />
  </Wrapper>
</template>
<script setup lang="ts">
import { Wrapper, Bubble } from '@kaitify/vue'
import { ref } from 'vue'
const content = ref('<p>hello</p>')

const bubbleShowing = (el: HTMLDivElement) => {
  console.log('气泡栏显示时触发', el)
}
</script>

shown

气泡栏显示后触发的事件，回调参数为气泡栏的 dom

<template>
  <Wrapper v-model="content">
    <Bubble @shown="bubbleShown" />
  </Wrapper>
</template>
<script setup lang="ts">
import { Wrapper, Bubble } from '@kaitify/vue'
import { ref } from 'vue'
const content = ref('<p>hello</p>')

const bubbleShown = (el: HTMLDivElement) => {
  console.log('气泡栏显示后触发', el)
}
</script>

hide

气泡栏隐藏前触发的事件，回调参数为气泡栏的 dom

<template>
  <Wrapper v-model="content">
    <Bubble @hide="bubbleHide" />
  </Wrapper>
</template>
<script setup lang="ts">
import { Wrapper, Bubble } from '@kaitify/vue'
import { ref } from 'vue'
const content = ref('<p>hello</p>')

const bubbleHide = (el: HTMLDivElement) => {
  console.log('气泡栏隐藏前触发', el)
}
</script>

hiding

气泡栏隐藏时触发的事件，回调参数为气泡栏的 dom

<template>
  <Wrapper v-model="content">
    <Bubble @hiding="bubbleHiding" />
  </Wrapper>
</template>
<script setup lang="ts">
import { Wrapper, Bubble } from '@kaitify/vue'
import { ref } from 'vue'
const content = ref('<p>hello</p>')

const bubbleHiding = (el: HTMLDivElement) => {
  console.log('气泡栏隐藏时触发', el)
}
</script>

hidden

气泡栏隐藏后触发的事件，回调参数为气泡栏的 dom

<template>
  <Wrapper v-model="content">
    <Bubble @hidden="bubbleHidden" />
  </Wrapper>
</template>
<script setup lang="ts">
import { Wrapper, Bubble } from '@kaitify/vue'
import { ref } from 'vue'
const content = ref('<p>hello</p>')

const bubbleHidden = (el: HTMLDivElement) => {
  console.log('气泡栏隐藏后触发', el)
}
</script>

API 组件属性/方法

Bubble 提供了部分属性/方法可以通过组件实例来调用

elRef HTMLElement | undefined

获取组件实例即气泡栏的 dom 元素

popperInstance Instance | undefined

popperjs 创建的浮层实例对象

Slots 插槽

default

默认插槽，显示在气泡栏上的内容，一般可以用来放置 Menu 组件

<template>
  <Wrapper v-model="content">
    <template #default="{ state }">
      <Bubble>气泡栏</Bubble>
    </template>
  </Wrapper>
</template>
<script setup lang="ts">
import { Wrapper, Bubble } from '@kaitify/vue'
const content = ref('<p>hello</p>')
</script>