@blueking/bkui-knowledge 0.0.1-beta.1

package/knowledge/examples/popover/demo/callback.vue

@@ -0,0 +1,28 @@
+<template>
+  <bk-popover
+    content="文字提示"
+    placement="bottom"
+    @after-hidden="handleHide"
+    @after-show="handleShow"
+  >
+    <bk-button>自定义回调函数</bk-button>
+  </bk-popover>
+</template>
+
+<script setup>
+  import BkMessage from '@bkui-vue/message';
+
+  const handleShow = () => {
+    BkMessage({
+      theme: 'success',
+      message: 'onShow',
+    });
+  };
+
+  const handleHide = () => {
+    BkMessage({
+      theme: 'error',
+      message: 'onClose',
+    });
+  };
+</script>

package/knowledge/examples/popover/demo/hide-ignore-reference.vue

@@ -0,0 +1,9 @@
+<template>
+  <bk-popover
+    content="确实不会收起"
+    trigger="click"
+    hide-ignore-reference
+  >
+    <div>点我不会收起弹窗</div>
+  </bk-popover>
+</template>

package/knowledge/examples/popover/demo/manual-trigger.vue

@@ -0,0 +1,43 @@
+<template>
+  <bk-button @click="handleBtnClick(true)"> 手动设置Isshow = true </bk-button>
+  <bk-button @click="handleBtnClick(false)"> 手动设置Isshow = false </bk-button>
+  <bk-popover
+    width="450"
+    :is-show="isShow"
+    theme="light"
+    trigger="manual"
+    @after-hidden="handleAfterHidden"
+  >
+    <bk-button> 占位区域 </bk-button>
+    <template #content>
+      <div>
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+        今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错 今天天气不错
+      </div>
+    </template>
+  </bk-popover>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        isShow: false,
+      };
+    },
+    methods: {
+      handleBtnClick(val) {
+        this.isShow = val;
+      },
+      handleAfterHidden({ isShow }) {
+        this.isShow = isShow;
+      },
+    },
+  };
+</script>

package/knowledge/examples/popover/demo/mouse-event.vue

@@ -0,0 +1,48 @@
+<template>
+  <bk-button @click="handlePopMsgBtn"> 点击初始化Popover </bk-button>
+  <bk-button @click="handleShowPop"> show </bk-button>
+  <bk-button @click="handleShowPop"> show 2 </bk-button>
+  <bk-button @click="handleHidePop"> hide </bk-button>
+  <div
+    ref="refContentTable"
+    style="width: 400px; display: none"
+  >
+    <content-table />
+  </div>
+</template>
+<script>
+  import { defineComponent } from 'vue';
+
+  import { bkEllipsis } from '@bkui-vue/directives';
+  import { $bkPopover } from '@bkui-vue/popover';
+
+  import ContentTable from '../../table/column-template.vue';
+
+  export default defineComponent({
+    components: { ContentTable },
+    directives: {
+      bkEllipsis,
+    },
+    data() {
+      return {
+        popInstance: null,
+      };
+    },
+    methods: {
+      handlePopMsgBtn(e) {
+        if (!this.popInstance) {
+          this.popInstance = $bkPopover({
+            target: e,
+            content: this.$refs.refContentTable.children[0],
+          });
+        }
+      },
+      handleShowPop(e) {
+        this.popInstance?.show(e);
+      },
+      handleHidePop() {
+        this.popInstance?.hide();
+      },
+    },
+  });
+</script>

package/knowledge/examples/popover/demo/position.vue

@@ -0,0 +1,165 @@
+<template>
+  <div style="text-align: left">
+    <div class="bk-popover-position-top">
+      <bk-popover
+        :popover-delay="[300, 0]"
+        content="Top Left 文字提示"
+        placement="top-start"
+        theme="light"
+      >
+        <bk-button>上左</bk-button>
+      </bk-popover>
+      <bk-popover
+        :popover-delay="[300, 0]"
+        content="Top Center 文字提示"
+        theme="light"
+      >
+        <bk-button>上边</bk-button>
+      </bk-popover>
+      <bk-popover
+        :popover-delay="[300, 0]"
+        content="Top Right 文字提示"
+        placement="top-end"
+        theme="light"
+      >
+        <bk-button>上右</bk-button>
+      </bk-popover>
+    </div>
+
+    <div class="bk-popover-position-center">
+      <div class="bk-popover-position-center-left">
+        <bk-popover
+          :popover-delay="[300, 0]"
+          placement="left-start"
+          theme="light"
+        >
+          <bk-button>左上</bk-button>
+          <template #content>
+            <div>Left</div>
+            <div>Top</div>
+            <div>文字提示</div>
+          </template> </bk-popover
+        ><br /><br />
+
+        <bk-popover
+          :popover-delay="[300, 0]"
+          placement="left"
+          theme="light"
+        >
+          <bk-button>左边</bk-button>
+          <template #content>
+            <div>Left</div>
+            <div>Center</div>
+            <div>文字提示</div>
+          </template> </bk-popover
+        ><br /><br />
+
+        <bk-popover
+          :popover-delay="[300, 0]"
+          placement="left-end"
+          theme="light"
+        >
+          <bk-button>左下</bk-button>
+          <template #content>
+            <div>Left</div>
+            <div>Bottom</div>
+            <div>文字提示</div>
+          </template>
+        </bk-popover>
+      </div>
+
+      <div class="bk-popover-position-center-right">
+        <bk-popover
+          :popover-delay="[300, 0]"
+          placement="right-start"
+          theme="light"
+        >
+          <bk-button>右上</bk-button>
+          <template #content>
+            <div>Right</div>
+            <div>Top</div>
+            <div>文字提示</div>
+          </template> </bk-popover
+        ><br /><br />
+
+        <bk-popover
+          :popover-delay="[300, 0]"
+          placement="right"
+          theme="light"
+        >
+          <bk-button>右边</bk-button>
+          <template #content>
+            <div>Right</div>
+            <div>Center</div>
+            <div>文字提示</div>
+          </template> </bk-popover
+        ><br /><br />
+
+        <bk-popover
+          :popover-delay="[300, 0]"
+          placement="right-end"
+          theme="light"
+        >
+          <bk-button>右下</bk-button>
+          <template #content>
+            <div>Right</div>
+            <div>Bottom</div>
+            <div>文字提示</div>
+          </template>
+        </bk-popover>
+      </div>
+    </div>
+
+    <div class="bk-popover-position-bottom">
+      <bk-popover
+        content="Bottom Left 文字提示"
+        placement="bottom"
+        theme="light"
+      >
+        <bk-button>下左</bk-button>
+      </bk-popover>
+      <bk-popover
+        content="Bottom Center 文字提示"
+        placement="bottom"
+        theme="light"
+      >
+        <bk-button>下边</bk-button>
+      </bk-popover>
+      <bk-popover
+        content="Bottom Right 文字提示"
+        placement="bottom-end"
+        theme="light"
+      >
+        <bk-button>下右</bk-button>
+      </bk-popover>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+  .bk-popover-position-top,
+  .bk-popover-position-bottom {
+    margin-left: 80px;
+  }
+
+  .bk-popover-position-top div ~ div {
+    margin-left: 10px;
+  }
+
+  .bk-popover-position-bottom div ~ div {
+    margin-left: 10px;
+  }
+
+  .bk-popover-position-center {
+    margin: 10px auto;
+  }
+
+  .bk-popover-position-center-left {
+    display: inline-block;
+  }
+
+  .bk-popover-position-center-right {
+    display: inline-block;
+    margin-left: 250px;
+  }
+</style>

package/knowledge/examples/popover/demo/slot.vue

@@ -0,0 +1,20 @@
+<template>
+  <bk-popover
+    width="490"
+    :component-event-delay="300"
+    :offset="16"
+    placement="top"
+    theme="light"
+    disable-outside-click
+  >
+    超长
+    <template #content>
+      <div>
+        <content-table />
+      </div>
+    </template>
+  </bk-popover>
+</template>
+<script setup>
+  import ContentTable from '../../table/column-template.vue';
+</script>