Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）

在Vue中使用ElementUI的Dialog和Drawer组件时，如果你想要将这些组件的某个实例的append-to-body属性设置为true，可以确保Dialog或Drawer的DOM结构能够在body标签下单独渲染，而不受其父元素的定位影响。

以下是一个简单的例子，展示如何在Vue中使用ElementUI的Dialog组件，并将append-to-body属性设置为true：

<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :append-to-body="true">
    <span>这是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>
 
<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
};
</script>

对于Drawer组件，设置方式类似：

<template>
  <el-button @click="drawer = true">打开抽屉</el-button>
  <el-drawer
    title="我是标题"
    :visible.sync="drawer"
    :append-to-body="true">
    <span>这里可以放置 Drawer 内的组件</span>
  </el-drawer>
</template>
 
<script>
export default {
  data() {
    return {
      drawer: false,
    };
  },
};
</script>

在这两个例子中，我们创建了一个按钮，点击后会将对话框或抽屉的visible属性设置为true，同时将append-to-body属性设置为true，这样对话框和抽屉的内容就会被插入到body标签下，而不会受到父元素的定位影响。