@wfrog/vc/dist/es/components/chat-container/chat-container.mjs

vue3 组件库 vc

import './index.css'
import { defineComponent, useTemplateRef, shallowRef, onMounted, onBeforeUnmount, createElementBlock, openBlock, normalizeClass, renderSlot, createBlock, createCommentVNode, unref, withCtx } from 'vue';
import { _ as _sfc_main$1 } from '../backbottom/backbottom.mjs';
import { _ as _export_sfc } from '../../chunk/pcqpp-6-.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "chat-container",
  props: {
    stopHeight: { default: 30 },
    keepBottom: { type: Boolean, default: false },
    backbottomClassName: {},
    backbottomProps: {}
  },
  setup(__props, { expose: __expose }) {
    const props = __props;
    const containerRef = useTemplateRef("containerRef");
    const observer = shallowRef();
    function isScrollbarNearBottom(element) {
      return element.scrollTop + element.clientHeight + props.stopHeight >= element.scrollHeight;
    }
    function scrollToBottom() {
      containerRef.value.scrollTop = containerRef.value.scrollHeight;
    }
    __expose({ scrollToBottom });
    onMounted(() => {
      observer.value = new MutationObserver(() => {
        if (isScrollbarNearBottom(containerRef.value) || props.keepBottom) {
          containerRef.value.scrollTop = containerRef.value.scrollHeight;
        }
      });
      observer.value.observe(containerRef.value, { subtree: true, characterData: true, childList: true });
    });
    onBeforeUnmount(() => {
      observer.value?.disconnect();
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "containerRef",
        ref: containerRef,
        class: normalizeClass(_ctx.$style.main)
      }, [
        renderSlot(_ctx.$slots, "default"),
        unref(containerRef) ? (openBlock(), createBlock(_sfc_main$1, {
          key: 0,
          target: unref(containerRef),
          class: normalizeClass([_ctx.$style.backbottom, __props.backbottomClassName]),
          "visibility-height": __props.backbottomProps?.visibilityHeight,
          bottom: __props.backbottomProps?.bottom
        }, {
          default: withCtx(() => [
            renderSlot(_ctx.$slots, "backbottom")
          ]),
          _: 3
        }, 8, ["target", "class", "visibility-height", "bottom"])) : createCommentVNode("", true)
      ], 2);
    };
  }
});

/* unplugin-vue-components disabled */const main = "_main_1rf0x_1";
const backbottom = "_backbottom_1rf0x_6";
const style0 = {
	main: main,
	backbottom: backbottom
};

const cssModules = {
  "$style": style0
};
const Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssModules]]);

const __vite_glob_0_3 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
  __proto__: null,
  default: Component
}, Symbol.toStringTag, { value: 'Module' }));

export { Component as C, __vite_glob_0_3 as _ };