vue分离框架弹框页面适配手机端和PC端

方法一：利用js解决

获取屏幕宽度，将方法封装成公用方法引入

import { ref, onMounted, onUnmounted } from "vue";

export default function UseWindowSize() {
  const windowWidth = ref(window.innerWidth);
  const dialogWidth = ref("100%");

  const updateSize = () => {
    windowWidth.value = window.innerWidth;
  };

  const checkWidth = () => {
    if(windowWidth.value < 768) {
      dialogWidth.value = "100%";
    } else {
      dialogWidth.value = "50%";
    }
  }

  onMounted(() => {
    window.addEventListener("resize", updateSize);
    checkWidth();
  });
  onUnmounted(() => window.removeEventListener("resize", updateSize));
  return { dialogWidth };
}

页面引入：

import useWindowSize from './useWindowSize';
const { dialogWidth } = useWindowSize();

在需要写弹框宽度的地方动态设置成dialogWidth属性即可。

弊端是：需要手动刷新页面，才能看出区别。

方法二:通过css解决

例如在vue框架内部，在app.vue页面,或者初始化加载页面加入以下css即可：

<style lang="scss">
.pcbody {
  min-width: 600px;
}
</style>

页面使用方法：

在弹框组件Dialog或者el-drawer 组件中设置