In Vue, append-to-body="true" is mainly used to control the mounting position of the component (such as pop-up boxes, drop-down menus, etc. in Element UI or Ant Design Vue). Specifically, when you set append-to-body="true", it inserts the component's DOM element into the body element instead of the default parent element.
Why do I need append-to-body?
Typically, Vue components are rendered in the parent component's DOM tree. If the parent container of elements such as pop-up boxes, drop-down menus, etc. has overflow: hidden or z-index hierarchy issues, these elements may be cropped or overwritten by other elements. Use append-to-body="true" to move these elements out of the DOM level of the current parent component, allowing them to be displayed properly and avoid being affected by the CSS style of the parent container.
For example:
<el-dropdown append-to-body="true">
<el-button>Click to drop down</el-button>
<el-dropdown-menu>
<el-dropdown-item>Options 1</el-dropdown-item>
<el-dropdown-item>Options 2</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>In this example, the drop-down menu in the component will be mounted directly into the body element instead of its parent element (probably a container div). The advantage of this is to ensure that the drop-down menu is visually unaffected by the parent element's CSS style (such as overflow) and is often avoided occlusion by other elements.
Summarize:
effect: Insert the DOM of the specified component directly into the body element.
Scene: Usually used for floating UI elements such as pop-up boxes and drop-down menus to ensure that they are not affected by the style of the parent element and can be displayed normally.
This is the article about the mount location of control components in Vue. For more related content on Vue component mount location, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!