工具属性、工具信息页面初次编写

yyg1378265336

2025-02-26 61900b1f71f4c9048cbc48ed6f4b41ccfa1a6ce4

 src/components/Container/src/ScrollContainer.vue

@@ -1,80 +1,77 @@
<template>
  <Scrollbar ref="scrollbarRef" class="scroll-container" v-bind="$attrs">
  <Scrollbar
    ref="scrollbarRef"
    class="scroll-container"
    :scrollHeight="scrollHeight"
    v-bind="$attrs"
  >
    <slot></slot>
  </Scrollbar>
</template>

<script lang="ts">
  import { defineComponent, ref, unref, nextTick } from 'vue';
  import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
<script lang="ts" setup>
  import { ref, unref, nextTick } from 'vue';
  import { Scrollbar, ScrollbarType } from '@/components/Scrollbar';
  import { useScrollTo } from '@vben/hooks';
  import { type Nullable } from '@vben/types';

  export default defineComponent({
    name: 'ScrollContainer',
    components: { Scrollbar },
    setup() {
      const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
  defineOptions({ name: 'ScrollContainer' });

      /**
       * Scroll to the specified position
       */
      function scrollTo(to: number, duration = 500) {
        const scrollbar = unref(scrollbarRef);
        if (!scrollbar) {
          return;
        }
        nextTick(() => {
          const wrap = unref(scrollbar.wrap);
          if (!wrap) {
            return;
          }
          const { start } = useScrollTo({
            el: wrap,
            to,
            duration,
          });
          start();
        });
      }

      function getScrollWrap() {
        const scrollbar = unref(scrollbarRef);
        if (!scrollbar) {
          return null;
        }
        return scrollbar.wrap;
      }

      /**
       * Scroll to the bottom
       */
      function scrollBottom() {
        const scrollbar = unref(scrollbarRef);
        if (!scrollbar) {
          return;
        }
        nextTick(() => {
          const wrap = unref(scrollbar.wrap) as any;
          if (!wrap) {
            return;
          }
          const scrollHeight = wrap.scrollHeight as number;
          const { start } = useScrollTo({
            el: wrap,
            to: scrollHeight,
          });
          start();
        });
      }

      return {
        scrollbarRef,
        scrollTo,
        scrollBottom,
        getScrollWrap,
      };
  defineProps({
    scrollHeight: {
      type: Number,
    },
  });

  const scrollbarRef = ref<Nullable<ScrollbarType>>(null);

  function getScrollWrap() {
    const scrollbar = unref(scrollbarRef);
    if (!scrollbar) {
      return null;
    }
    return scrollbar.wrap;
  }

  /**
   * Scroll to the specified position
   */
  function scrollTo(to: number, duration = 500) {
    const wrap = unref(getScrollWrap());
    nextTick(() => {
      if (!wrap) {
        return;
      }
      const { start } = useScrollTo({
        el: wrap,
        to,
        duration,
      });
      start();
    });
  }

  /**
   * Scroll to the bottom
   */
  function scrollBottom() {
    const wrap = unref(getScrollWrap());
    nextTick(() => {
      if (!wrap) {
        return;
      }
      const scrollHeight = wrap.scrollHeight as number;
      const { start } = useScrollTo({
        el: wrap,
        to: scrollHeight,
      });
      start();
    });
  }

  defineExpose({
    scrollTo,
    scrollBottom,
  });
</script>
<style lang="less">
@@ -84,7 +81,6 @@

    .scrollbar__wrap {
      margin-bottom: 18px !important;
      overflow-x: hidden;
    }

    .scrollbar__view {