我开发的应用程序在用户身份验证方面与一些具有严格安全策略的平台集成，因此我们这边的身份验证也必须以不同的方式处理。这里的细节并不是非常重要。
我现在正在开发一项新功能，用户可以从列表中打开一些项目，但从用户体验的角度来看，在新选项卡中打开这些项目是最有意义的，因为用户希望在一次，而无需导航回列表并再次在其中找到它们的位置。
因此，为了使其正常工作，我们的 API 有一个redirects处理身份验证的端点。实现细节并不重要，重要的是要知道此端点将接收应该导航到的 URL（从我们的 UI 提供），并且它将返回带有令牌的重定向 URL。
因此，我使用了以下函数，当用户单击按钮时会调用该函数
async function openInNewTab() {
// $ajax is an axios instance that calls the endpoint
const { url } = await $ajax.post('/redirects', {
data: {
url: "myurl.com/route/to/go/to",
//...
}
});
window.open(url)
}
正如您所看到的，它非常简单，它从我们的 API 获取重定向 URL 并尝试在新选项卡中打开该 URL。这在 Chrome 中有效，但在 Firefox 或 Safari 中不起作用，提示用户弹出窗口被阻止。
我很清楚浏览器有许多关于弹出窗口以及何时阻止它们的规则，但是在这种情况下，此操作是由用户通过单击按钮交互启动的，唯一的问题是调用的函数是异步的。
有什么方法可以在 Firefox 和 Safari 中实现此功能吗？如果没有异步功能，该函数在实际网络速度下就无法很好地工作，并且按照我们应用程序的工作方式，我们无法使用target="_blank"链接中的 a 等内容来绕过重定向 URL，否则将无法正确进行身份验证。
注意：我最好在寻找 vanilla JS，因为 jQuery 不是我可以在这个项目中使用的东西
我有一个有点复杂的网格结构：
body {
margin: 0;
height: 100vh;
text-align: center;
}
.grid-container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "tl tr" "bl br";
}
.tl {
background: #fdfdfd;
color: #2f2f2f;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: ". . . ." ". . text-tl ." ". . . button-tl";
grid-area: tl;
}
.button-tl {
grid-area: button-tl;
background: #2f2f2f;
color: #fdfdfd;
}
.text-tl {
grid-area: text-tl;
} …这是关于带有 Vite 的 Vue 3 应用程序，而不是 webpack。
目前，正如您在vite 的问题页面上看到的，vite 没有一种在不使用外部插件的情况下内联 SVG 的便捷方法。但是，Vite支持将文件作为原始文本字符串导入。因此，我想到了使用此功能并通过将原始 SVG 字符串传递到元素的v-html.
它实际上工作得很好，SVG 按预期显示在页面上，我可以执行通常的 CSS 转换（像这样内联它们的全部目的），但它并不完美。按照目前的情况，接收指令的元素v-html只是将提供的 HTML 嵌套为子元素。例如，如果我这样做<span v-html="svgRaw" />，最终的 HTML 会像这样
<span>
<svg>
<!-- SVG attributes go here -->
</svg>
</span>
有没有什么方法可以让我基本上用v-html传递给它的顶级元素替换声明的父元素？在上面的例子中，这意味着<span>just 变成了<svg>
编辑：
感谢 tony19 提到自定义指令。
我的最终结果如下所示：
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.directive("inline", (element) => {
element.replaceWith(...element.children);
});
app.mount("#app");
然后，在组件中我只需使用该指令， …
以下面的示例片段为例：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
.grid-item {
border: 1px solid #000;
text-align: center;
}<div class="grid-container">
<div class="grid-item">item 1</div>
<div class="grid-item">item 2</div>
<div class="grid-item">item 3</div>
</div>结果是一个看起来像这样的表。我的问题是我想消除表格左侧、右侧和顶部的 10 个像素间隙，使其覆盖 100% 的宽度（基本上，我希望它从 0, 0 开始）。我发现唯一有效的是将边距设置为margin: -10px -10px 0 -10px;in.grid-container但这似乎是错误的处理方式。
我在这里错过了一些非常明显的东西吗？
