详情页面优化

Ben Lin

2025-03-08 745815f637e5385b2cbc23a6ae02401bb8b6c675

 src/layouts/default/sider/DragBar.vue

@@ -1,43 +1,35 @@
<template>
  <div :class="getClass" :style="getDragBarStyle"></div>
</template>
<script lang="ts">
  import { defineComponent, computed, unref } from 'vue';
<script lang="ts" setup>
  import { computed, unref } from 'vue';

  import { useDesign } from '/@/hooks/web/useDesign';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '@/hooks/web/useDesign';
  import { useMenuSetting } from '@/hooks/setting/useMenuSetting';

  export default defineComponent({
    name: 'DargBar',
    props: {
      mobile: Boolean,
    },
    setup(props) {
      const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();
  defineOptions({ name: 'DargBar' });

      const { prefixCls } = useDesign('darg-bar');
      const getDragBarStyle = computed(() => {
        if (unref(getCollapsed)) {
          return { left: `${unref(getMiniWidthNumber)}px` };
        }
        return {};
      });
  const props = defineProps({
    mobile: Boolean,
  });

      const getClass = computed(() => {
        return [
          prefixCls,
          {
            [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
          },
        ];
      });
  const { getMiniWidthNumber, getCollapsed, getCanDrag } = useMenuSetting();

      return {
        prefixCls,
        getDragBarStyle,
        getClass,
      };
    },
  const { prefixCls } = useDesign('darg-bar');
  const getDragBarStyle = computed(() => {
    if (unref(getCollapsed)) {
      return { left: `${unref(getMiniWidthNumber)}px` };
    }
    return {};
  });

  const getClass = computed(() => {
    return [
      prefixCls,
      {
        [`${prefixCls}--hide`]: !unref(getCanDrag) || props.mobile,
      },
    ];
  });
</script>
<style lang="less" scoped>