这是我关于这个特定问题的第二篇文章。我已经删除了那个问题，因为我找到了一种更好的方法来解释我到底想做什么。
本质上，我想将命令行参数传递给docker-compose up我的 Vue.js Web 应用程序并将它们设置为环境变量。目标是能够更改环境变量而无需每次都重建容器。
我遇到了几个问题。这是我的 docker 文件：
用于 Vue.js 应用程序的 Dockerfile。
FROM node:latest as build-stage
WORKDIR /app
# Environment variable.
ENV VUE_APP_FOO=FOO
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build
FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf
VUE_APP_FOO通过 Node 的process.envobjected存储和访问，并且似乎在构建时传入。
还有我的 docker-compose.yml：
version: '3.5'
services:
ms-sql-server:
image: mcr.microsoft.com/mssql/server:2017-latest-ubuntu
ports:
- "1430:1433"
api:
image: # omitted (pulled from url)
restart: always
depends_on: …我正在尝试创建一个可重用的表格组件，该组件利用 Vuetify 的v-data-table组件来对常见方面进行分组，例如搜索栏、表格操作（刷新、创建等）以及我的所有表格都将具有的其他功能。但是，我在表组件内实现动态、作用域槽以考虑自定义列时遇到了问题。想想诸如操作、格式化 ISO 字符串等列。
这是我目前正在尝试的一个简化示例。在示例中，我将数组customColumns作为 prop 传递给 CustomDataTable.vue。customColumns具有一个具有两个属性的元素。该slotName属性指定我想在父组件中引用的插槽的名称。该itemValue属性指定 CustomDataTable.vue 应覆盖并替换为作用域槽的标头值。然后，在父组件中使用作用域槽来正确设置“创建于”列中的日期格式。
实现表组件的父组件：
<template>
<custom-data-table
:items="items"
:headers="headers"
:customColumns="customColumns"
>
<template v-slot:custom-column="slotProps">
<span>{{ formatDate(slotProps.item.createdAt) }}</span>
</template>
</custom-data-table>
</template>
<script>
import CustomDataTableVue from '@/components/table/CustomDataTable.vue'
export default {
data: () => ({
items: [
{
id: 0,
createdAt: new Date().toISOString(),
...
},
...
],
headers: [
{
text: 'Created At',
value: 'createdAt',
sortable: true
},
...
],
customColumns: [
{
slotName: 'custom-column',
itemValue: 'createdAt' …我不完全确定 Stack Overflow 是否是提出这个问题的正确网站，但自从一周前一位朋友向我提到这个问题以来，我一直在思考这个问题。我知道硬件加速的基本功能：将某些工作负载卸载到计算机中的其他组件（即 GPU 或声卡），以提高各种应用程序的性能。我只是想知道当流式传输 Google Chrome 窗口时硬件加速打开/关闭时到底发生了什么，以及为什么它在完全不同的应用程序中产生差异。
如果您不熟悉我在标题中提到的内容，这里有一个简单的例子来说明我的意思：假设您想在 Discord 上与朋友一起观看 Netflix 节目或体育赛事，所以你们一起加入通话在应用程序上观看您在 Chrome 选项卡中流式传输视频。但是，当您的朋友加入流时，他们可以听到您正在流式传输的音频，但对于观看的人来说，视频源将被屏蔽。有趣的是，人们发现这个问题的解决方案之一是在 Google Chrome 的设置中禁用硬件加速，这样视频和音频就可以毫无问题地传输。
发生这种情况的原因是有道理的：为了防止潜在的盗版和非法重新分发文案材料，但为什么禁用硬件加速会重新启用此功能呢？硬件加速是否允许在应用程序之间共享数据？Discord 是否设置了一个标志，表示正在流式传输特定窗口/屏幕，并且 Chrome 只能在启用硬件加速时“看到”该标志？
我想根本的问题是：启用硬件加速如何让 Netflix、电视提供商或任何其他网站知道他们的内容正在流式传输？
请随意为这篇文章推荐其他标签，不想包含不和谐，因为它没有引用他们的 API
编辑：另外，请告诉我这是否偏离主题，以便我可以将其删除并重新发布到另一个网站上
我正在使用<v-dialog>组件来显示我的 Web 应用程序的表单。我想实现一个未保存的更改对话框，当用户在不保存的情况下中止更改并根据按钮按下关闭/保持对话框打开时弹出。不幸的是，我在弄清楚如何阻止框架执行的默认关闭操作时遇到了很多麻烦。
因此，据我所知，您可以通过 3 种不同的方式关闭对话框：
v-model属性设置为false.v-dialog除非persistentprop 设置为 ，否则单击模态外部true。让我们不用担心关闭我上面引用的对话框的第二种方法，并假设它设置为true.
方法#1：
我的第一种方法是只允许用户在点击表单上的取消按钮时退出对话框。当我试图禁用退出按钮的使用时，我很快就遇到了障碍。
这是我到目前为止所尝试的：在我的 App.vuemounted函数中：
mounted () {
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
console.log('The escape key was pressed.')
e.preventDefault()
e.returnValue = false
e.stopImmediatePropagation()
}
})
}
这应该有效。日志消息显示在控制台中，但按下退出键后对话框仍关闭。我知道我应该在这里使用关键代码，但这是为了可读性。我也试着keyup和keypress没有成功。在 Vue.js 或 Vuetify 框架中一定有一些奇怪的事情发生了。
方法#2：
在尝试禁用转义键失败后，我不得不尝试不同的方法。我尝试在 watch 函数中添加此代码，以尝试在取消时保持对话框打开：
dialog (val) {
if (val) {
console.log('Dialog is true')
} …我正在尝试向组件添加一个总和行v-data-table并维护对组件的排序。我尝试了两种方法，但都不是最佳解决方案。
方法 1) 挂载好表并取完数据后，再将数据总和再推入表中。
像这样的东西：
let total = 0
this.data.forEach(d => {
total += d.someValue
})
this.data.push({
value: total
})
这在表上具有所需的结果，您可以使用条件类绑定来加粗最后一行。这种方法的问题是在排序时，总和行像任何其他行一样移动。这不是最优的。造型是完美的，正是我想要的，但排序把一切都搞砸了。
方法 2) 使用v-data-table具有一行（总和行）的另一个组件并将其添加到v-slot:footer父表中。
这种方法有几个问题。标题必须存在并且与父表完全相同（除了排序）。否则，求和行的间距是错误的（即它不在求和列的正下方）。
由于存在标题，因此在页脚和表格的其余部分之间存在明显的间隙。使用display: none;的页脚表头弄乱列间隔为好。我相信 Vuetify 通过列标题的宽度来确定列的宽度。隐藏它的方法似乎是使用opacity: 0;This 删除标题，但留下一个空白空间。
我尝试调整边距以使表格更接近它的父表格，但这会导致新问题。由于页脚表的页眉仍然存在，它与表的最后一行重叠并使底行无法使用。
这是这种方法的样子：
<v-data-table :items-per-page="-1" :headers="headers" :items="items">
<template v-slot:footer>
<v-data-table
:headers="headers"
hide-default-footer
style="font-weight: bold;"
:items="[sum]">
</v-data-table>
</template>
</v-data-table>
任何人都有在保留排序的同时添加求和行的正确方法？