小编Dan*_*ton的帖子

假设我有一个包含数据的组件：

data: function () {
  return {
    slots: [
      { Id: 1, slotName: 'apple', componentName: 'Apple' },
      { Id: 2, slotName: 'banana', componentName: 'Banana' }
    ]
  }
}

我想将插槽列表作为作用域插槽传递给子组件。以下语法不起作用，因为您不能在模板元素上使用 v-for：

<child-component>
    <template v-for="slot in slots" :key="slot.Id" v-slot[slot.slotName]="slotProps">
        <component :is="slot.componentName" :someProp="slotProps"></component>
    </template>
</child-component>

并且以下语法将不起作用，因为在 Vue 2.6.0+ 中any content not wrapped in a <template> using v-slot is assumed to be for the default slot。

<child-component>
    <component v-for="slot in slots" :key="slot.Id"
        :is="slot.componentName" v-slot[slot.slotName]="slotProps" :someProp="slotProps"></component>
</child-component>

以下将起作用，但编译器会抛出警告并使用不推荐使用的语法：

<child-component>
    <component v-for="slot …

使用webpack，如果我想对整个模块进行代码拆分，我可以更改

import Module from 'module'

在我的文件顶部

import('module').then(Module => {...

当我需要使用模块 ( docs ) 时。是否有可能做到这一点，但只有一个命名的导出？也就是说，我怎么能对以下内容进行代码拆分：

import {namedExport} from 'module'

我可以将我的 Progressive Web App 注册为图像的共享目标（Chrome Android 76 支持）：

"share_target": {
    "action": "/share-target",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "files": [
        {
          "name": "myImage",
          "accept": ["image/jpeg", "image/png"]
        }
      ]
    }
  }

然后，我可以拦截在 Service Worker 中将图像共享到应用程序的尝试：

self.addEventListener('fetch', e => {
  if (e.request.method === 'POST' && e.request.url.endsWith('/share-target')) {
    // todo
  }
})

如何在我的离线 PWA 中显示共享图像？

我的应用程序允许用户输入 Azure Blob 存储 SAS URL。我将如何去验证它？我正在使用Azure 存储 Blob 客户端库，并且似乎没有任何方法可以在不实际执行 Blob 操作（我不想这样做）的情况下验证 SAS URL。

验证操作可以是异步的，并在必要时涉及 API 调用（即可以通过按钮触发）。

public class SASURLValidator
{
    public async Task<bool> ValidateSASURL(string sasURL)
    {
        // What goes here?
    }

    public async Task Test()
    {
        var result = await ValidateSASURL("https://blobstorageaccountname.blob.core.windows.net/containerName?sp=w&st=2022-02-15T02:07:49Z&se=2022-03-15T10:07:49Z&spr=https&sv=2020-08-04&sr=c&sig=JDFJEF342JDSFJIERJsdjfkajiwSKDFJIQWJIFJSKDFJWE%3D")
        // result should be true if the above is a valid SAS
    }
}

我想在较大的屏幕上将 3 个宽度相等的项目放置在一行中，拉伸项目以填充可用空间。

但是，当项目宽度小于 200px 时，我想将它们全部显示在单列中。

我不想每行有 2 个项目。任何简单的 CSS 解决方案（例如 CSS flexbox 或 CSS grid）都是可以接受的。

以下代码不正确，因为它有时每行显示 2 个项目。

.item {
  height: 200px;
  background-color: blue;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 1rem;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>