@fesjs/fes-design/es/drawer/useDimension.js

fes-design for PC

import { ref, watch } from 'vue';
import { isNil, isNumber } from 'lodash-es';
import { pxfy } from '../_util/utils';
import { COMPONENT_NAME } from './const';

// TODO: 废弃 height 和 width 以后，移除此处默认值，恢复 props 中的
const DEFAULT_DIMENSION = 520;
const formatSize = size => {
  if (isNil(size)) {
    return pxfy(DEFAULT_DIMENSION);
  }
  if (isNumber(size)) {
    return pxfy(size);
  }
  return size;
};
const useDrawerDimension = props => {
  const drawerDimension = ref(DEFAULT_DIMENSION);
  watch([() => props.dimension, () => props.placement, () => props.height, () => props.width], _ref => {
    let [dimension, placement, height, width] = _ref;
    // dimension 的优先级最高
    if (!isNil(dimension)) {
      drawerDimension.value = formatSize(dimension);
      return;
    }
    if (!isNil(width) || !isNil(height)) {
      console.warn(`[${COMPONENT_NAME}]: width 和 height 属性即将废弃，请使用 dimension 代替`);
      const dimensionByPlacement = ['top', 'bottom'].includes(placement) ? height : width;
      drawerDimension.value = formatSize(dimensionByPlacement);
      return;
    }
    drawerDimension.value = DEFAULT_DIMENSION;
  }, {
    immediate: true
  });
  return drawerDimension;
};

export { useDrawerDimension };