标签: svelte-3

https://tailwindcss.com/docs/background-image#任意-values

这就是我想要使用 Tailwind bg-image 功能的方式。使用 SvelteKit next 160 和 Tailwind 3.0.9 时这不起作用。

代码：

<script>
  import globe from '$assets/bg/bg_globe2.png'
</script>

<div
    class={`flex flex-col bg-primary-dark h-64 overflow-hidden bg-no-repeat bg-[right_-14rem_bottom_-10rem] bg-[url('${globe}')]`}
>
  //children
</div>

该类bg-[right_-14rem_bottom_-10rem]工作没有问题，所以我认为 Tailwind 对 Svelte 文件路径有问题？

编辑：console.log(globe) 的输出是src/assets/bg/bg_globe2.png。

我正在尝试为我的项目选择一个提供数据绑定和DOM管理功能的库。比较多个库后，我最终选择了Inferno和Svelte。

我注意到Svelte的评估脚本时间比其他库要长（请参阅附件图像） 。

在示例中，我绘制了一个100 x 15的表格（总共1500个单元格）。尽管渲染时间减少了几毫秒，但是inferno的脚本执行时间是它的一半。

时间随着元素数量的增加而急剧增加，例如。对于15000个单元格苗条脚本，评估时间为2000ms，而inferno则为680ms。

苗条代码：

<style>
table,td,tr {
  border: 1px solid black;
}
</style>
<script>
import { officedatabase } from '../../../data_generator/sampleGridData/initialloaddata.js';
</script>
<table>
  {#each officedatabase as row}
    <tr>
     {#each row as cell}
      <td>{cell}</td>
     {/each}
    </tr>
  {/each}
</table>

地狱样本代码：

import { Component } from 'inferno';
import { officedatabase } from './initialloaddata.js';
export default class Grid extends Component {
  state = {
    data: officedatabase
  };
  render () {
    let data = this.state.data, …

• 语境

在我的 Svelte 应用程序中，我有多个页面，每个页面显示一个或多个视频。为了渲染视频，我重用了视频组件（简化）：

// video component
<video poster="{source.thumb}">
    <source type="{source.mime}" src="{source.source}" >
</video>

主页面通过api接收视频内容并调用视频组件：

// calling video component on main page
<script>
    let source = {
        thumb: 'thumb.jpg',
        source: 'video.mp4',
        mime: 'video/mp4',
    };
</script>
<Video source={source} />

一切正常，视频已渲染并可以播放。

• 问题

但：当我导航或想要用另一个视频替换一个视频时，旧的视频元素以某种方式仍然存在并且播放继续。

我可以用来beforeUpdate()暂停视频。但随后，新视频奇怪地在完全相同的播放时间加载，一切都变得混乱。或者，如果我删除 中的视频元素beforeUpdate()，它不会填充新信息。

这有点道理，因为video媒体元素保持完全相同，而只有属性和内容发生变化。因此，状态和已经缓冲的源仍然存在。

我以某种方式需要确保，当数据发生变化时，视频组件必须完全重新安装。 有谁知道这是怎么做到的吗？谢谢！

本质上，我正在开发一个幻灯片项目，其中每个“幻灯片”都是使用 <svelte:component this={currentSelection.component} />. 每张幻灯片都需要逐个组件地自定义进出转换。然而，正如 svelte 文档中所述，我希望下一张幻灯片在当前幻灯片完成转换时“等待”：

\n

与transition:不同，使用in:和out:应用的转换不是双向的\xe2\x80\x94，如果在转换时块被淘汰，则in转换将继续与out转换一起“播放”，而不是反转正在处理。如果输出转换被中止，转换将从头开始重新开始。

\n

是否有一种明智的方法可以使下一张幻灯片“等待”，直到当前幻灯片完成其结尾过渡？

REPL的玩具示例

为后代发布的玩具代码：

//App.svelte\n<script>\n    import RedThing from \'./RedThing.svelte\';\n    import GreenThing from \'./GreenThing.svelte\';\n    import BlueThing from \'./BlueThing.svelte\';\n\n    const slides = [\n            RedThing,\n            BlueThing,\n            GreenThing\n    ];\n    let currentComponent = 0;\n    const prev = () => currentComponent--;\n    const next = () => currentComponent++;\n\n</script>\n\n<button on:click={prev}>Prev</button><button on:click={next}>Next</button>\n<div>\n    <svelte:component this={slides[currentComponent]}/>\n</div>\n\n

//RedThing.svelte\n<script>\n    import { fly, slide } from \'svelte/transition\';\n</script>\n\n<style>\n    div { color: red; }\n</style>\n\n<div …

我正在尝试在 nav.svelte 组件中加载 sv-bootstrap-dropdown 模块，但出现错误<Dropdown> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules。之后我尝试将其安装为 devDependency 但出现错误Cannot read property remove of undefined。这会在sapper文件夹下的服务器 js 文件中自行生成

当单击子元素时，附加到父元素的事件会在 svelte 中触发。我在简单的 CSS 和 HTML 中尝试了相同的方法，它工作得很好，而在 svelte 中，父操作被触发。我下面有一个 REPL 代码，它模拟了我的场景，其中单击子项内部会在控制台中打印“hi”。

<script>
let name = 'world';
</script>
<div style="padding:50px; border:solid;height:200px; z-index:1" on:click={() => {console.log('hi')}}>
    <div style="border:solid;height:200px; z-index:999">
        <h1>Hello {name}!</h1>
    </div>
</div>

现在，我有一个菜单，只需单击汉堡包按钮就可以展开或折叠。菜单的默认状态true意味着它已展开，但是当我转到菜单所在的不同路线时not there，它会播放折叠动画。这是示例代码：

<script>
 import { slide } from 'svelte/transition';
 let isExpanded = true; 
</script>

<button on:click={()=>isExpanded=!isExpanded}>Expand/Collapse</button>

{#if isExpanded}
  <nav transition:slide>
   Content
  </nav>
{/if}

<a href="/some-page">There is no menu in this page</a>

这是代码的当前行为：

在页面加载/重新加载时，菜单展开过渡会播放（奇怪的是，这种情况只有时发生），并且单击链接时，菜单折叠过渡会在重定向发生时播放一瞬间。

我不确定这是否是我的实现中的错误或错误。无论哪种情况，如果为此提供解决方法，我们将不胜感激。

提前致谢！

我正在制作一个基于套接字连接的简单应用程序。基本上，一个用户决定其他用户可以看到什么。功能之一是为其他用户启动计时器。因此，有一个带有timerState变量和startTimer函数的Timer组件。当用户连接到套接字时，计时器组件与整个用户视图一起呈现。对传入事件“计时器已启动”做出反应非常简单并且工作完美。当计时器已经启动并且用户刷新浏览器时（或者在计时器已经设置时只是晚连接），问题就开始了。设置计时器的信息存储在数据对象中，该数据对象在初始连接到套接字后作为欢迎事件发送给用户。

为了简化，用户视图的组成如下：

{#if !isDataComplete}
<WaitingComponent>
{:else}
<Timer bind:{tools}>
{/if}

Tools是一个对象，包含一些方法，主要是startTimer方法。

因此，连接后，用户接收数据对象，该数据对象将 wiev 从等待切换到应用程序 wiev（此处：计时器，最初为空，但已渲染）。如果有计时器属性，则意味着已经设置了计时器，并且应该调用 startTimer 方法。但是，startTimer 方法尚无法访问，因为脚本比渲染速度更快，并且计时器组件尚不存在。实际上并没有获取数据，它带有来自套接字的“欢迎”事件，因此等待数据并不能解决问题，我需要等待组件渲染。

{#if !isDataComplete}
<WaitingComponent>
{:else}
<Timer bind:{tools}>
{/if}

正如您所看到的：我通过在脚本中添加等待 setTimeout 500 毫秒（在调用 startTimer 之前）“解决”了这个问题 - 做到了这一点，组件管理渲染并且方法已经可以访问。但不知怎的，我觉得这是蹩脚的解决方案，所以也许有人可以通过其他方式提供帮助？

我只需将计时器组件放在 if 块之外，使其甚至在接收数据之前就进行渲染，但这并不是一个好主意，因为视图结构。

我试图将 setTimer 方法存储在其他地方并导入它，但这会导致从外部管理计时器状态时遇到一些困难。但这当然是一种有效的尝试方法。

多谢！普热梅克

我对 sveltekit 和 svelte 不太熟悉，我正在尝试将数据从 API 加载到商店，这就是我的做法

    export const load = async ({ fetch }) => {
        const data = get(dataStore);

        if (browser && data) {
            return { status: 200 };
        }

        const res = await fetch('/data.json', { credentials: 'include', mode: 'cors' });
        const data = await res.json();

        if (browser) {
            dataStore.set(data);
        }

        return { status: res.status };
    };

我的问题是将 SSR 上的数据加载到 FE 存储的最佳方法是什么？

我已经创建了一个 svelte 应用程序并使用 SvelteKit 构建应用程序，一切正常。

我尝试在 firebase 托管中部署此应用程序，但失败了。Sveltekit 在文件夹下生成生产版本.svelte-kit。我尝试将public对象值更改为".svelte-kit"来自firebase.json文件，但它返回错误，例如没有 index.html 和 404.html。我们需要改变什么才能firebase.json让它发挥作用？

{
  "hosting": {
    "public" : "public",

    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}