如何在Vue.js中“正确”引用<body>标签？

Question

如何在Vue.js中“正确”引用<body>标签？

3

我在我的布局文件中有这段代码，包含了我的appSearch组件：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="css/app.css" />
        <title>title</title>
    </head>
    <body>
        <div id ='app' >
            <app-search ref='search'></app-search>
            @include('layouts/header')
            @yield('content')
        </div>
        <script type="text/javascript" src="js/app.js" ></script>
    </body>
</html>

在组件中，我想引用body标签并设置一个类，该类将应用overflow: hidden。然而vue不能在div之外使用。我首先想到的是document.querySelector。但这不是“vue式”的方法。有没有其他方法可以解决这个问题？

- Artshellorok

在这种情况下直接访问DOM是完全可以的。我认为没有绕过它的方法。 - Husam Ibrahim

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ssc-hrep3 · Accepted Answer

在Vue中，你不能访问body标签，但可以像你所提到的那样使用普通的JavaScript。如果你要操作DOM，你需要确保模板已经被渲染，然后你可以通过mounted()访问HTML元素，但是在Vue应用程序运行时，<body>已经被渲染。所以你可以使用document.querySelector（或者更容易地使用评论中提到的document.body）来访问<body>标签。

通常不需要直接在Vue应用程序中直接访问body标签。通常可以以Vue的方式实现相同的效果。在你的情况下，你可以给你的Vue应用程序的最高元素（App.vue）添加一个类，并让这个元素充当你的<body>标签。然后，你就完全可以使用Vue来控制模板了。

如果你正在使用Vue 3并且需要在Vue应用程序的最高元素之外管理元素，则还可以使用新的<teleport>标签。例如，这可用于模态遮罩层，但它不能帮助你向body元素添加类名。请参见<teleport>的文档。