如何调整抽屉宽度以适应不同的屏幕尺寸？

在Element UI的`el-dialog`抽屉组件中，你可以通过设置`width`属性来动态调整其宽度。为了适应不同的屏幕尺寸，你可以在Vue的响应式系统中使用计算属性（Computed Property）来动态计算宽度，比如基于视口宽度百分比或者媒体查询。

首先，创建一个计算属性来计算抽屉的宽度，例如70%的视口宽度：

<template>
  <div>
    <el-menu ...></el-menu>
    <el-dialog :visible.sync="drawerVisible" :width="dialogWidth" class="drawer">
      ...
    </el-dialog>
  </div>
</template>

<script>
import { computed } from "vue";

export default {
  data() {
    return {
      drawerVisible: false,
    };
  },
  computed: {
    dialogWidth: computed(() => `${Math.min(800, window.innerWidth * 0.7)}px`),
  },
  // 其他方法...
};
</script>

这个计算属性会根据窗口宽度动态变化，如果宽度小于800px，则固定为800px。如果需要更复杂的条件来调整宽度，可以添加更多的媒体查询规则。