element-ui中el-dialog放大缩小，弹出框移动，取消阴影

在Element UI中，el-dialog组件提供了属性来控制对话框的大小调整、移动和去除阴影。

• 大小调整：通过设置resizable属性为true，用户可以手动调整对话框的大小。
• 移动：对话框通常是不能移动的，但可以通过自定义样式来实现。
• 取消阴影：通过设置modal-append-to-body属性为false，可以移除对话框背后的阴影。

以下是一个简单的例子，展示如何在el-dialog中使用这些属性：

<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :resizable="true"
    :modal-append-to-body="false">
    <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: true
    };
  }
};
</script>
 
<style>
/* 自定义对话框可移动样式 */
.el-dialog {
  position: absolute;
  top: 5vh; /* 根据需要调整位置 */
  left: 5vw; /* 根据需要调整位置 */
}
</style>

在这个例子中，对话框是可调整大小的，没有阴影，并且可以通过拖动来移动。请注意，移动对话框需要额外的CSS样式来覆盖默认的定位。