ElMessageBox组件appendTo 属性使用示例

ElMessageBox 组件的 appendTo 属性允许指定一个 DOM 元素，将消息框挂载到该元素下。这个属性在需要将消息框插入到特定的容器中时非常有用，而不是默认的挂载到 body 元素。

以下是如何使用 appendTo 属性的示例

<script setup>
import { ElMessageBox } from 'element-plus';

const openMsgBox = () => {
  ElMessageBox({
    title: '提示',
    message: '这是一段内容',
    showCancelButton: true,
    appendTo: document.body 
  })
  .then(() => {
    // 处理确认操作
  })
  .catch(() => {
    // 处理取消操作
  });
};
</script>

在这个例子中，appendTo 被设置为 document.body，这意味着消息框将被挂载到 body 元素下。
可以将 appendTo 设置为任何有效的 DOM 元素，例如：

// 假设你有一个 ID 为 'app' 的元素
<script setup>
import { ElMessageBox } from 'element-plus';

const openMsgBox = () => {
  ElMessageBox({
    title: '提示',
    message: '这是一段内容',
    showCancelButton: true,
    // 使用 `appendTo` 来指定挂载的元素
    appendTo: '#app'
  })
  .then(() => {
    // 处理确认操作
  })
  .catch(() => {
    // 处理取消操作
  });
};
</script>

在这个例子中，消息框将被挂载到 ID 为 app 的元素下。