小编You*_*him的帖子

如何在 Sapper 中离开父布局?

目前,我正在开发一个项目,该项目Menu在除两个页面之外的所有页面上共享一个组件。我在根_layout.svelte文件中添加了菜单组件。现在因为不需要Menu组件的两个页面是嵌套路由。的Menu,因为他们是孩子的路线是在他们里面出现。他们是这样看的。但我认为应该有一些方法可以选择退出/离开父布局。否则我将不得不删除_layout.svelte根文件Menu并向每个路由添加组件,这对 DRY 来说太过分了。有没有办法_layout.svelte在 Sapper 中离开父母?

javascript layout parent sapper svelte-3

15
推荐指数
1
解决办法
2111
查看次数

Svelte 的 v-show 替代方案

情况是我Loading在获取请求时显示组件。我使用 store 设置$loadingtrue,内部条件是Loading组件。问题是加载组件似乎需要一些时间才能显示。感觉/看起来原因是加载组件的重新渲染。所以,我在 Svelte 中寻找v-show类似的东西,但我在文档中找不到。(如果有的话不要生气,告诉我即可。)

有人可以帮忙解决这个案子吗?

conditional-statements svelte svelte-3

11
推荐指数
1
解决办法
3992
查看次数

如何在预加载功能之外访问 sapper 中的 url 参数?

在 Sapper 中,AFAIK 来自文档。访问 URL 参数的唯一方法是通过preload()函数,从该函数可以在params对象内部使用参数。

问题是我想在preload()函数之外访问这些参数。从文档的鹰眼角度来看。我看不到/看不到我的问题/要求的解决方案。

我试过在里面为 url 参数设置一个属性data()。但它似乎preload()无法获得data是否明智或设置明智。它不是为了那些东西。

parameters url svelte

8
推荐指数
1
解决办法
3496
查看次数

如何在 Svelte 中的组件挂载之前获取数据?

onMount与 SvelteJS 中没有生命周期事件不同beforeMount。那么,我们在挂载之前如何获取页面所依赖的数据呢?onMount获取会产生故障。可以说我可以将依赖 DOM 包装在 if 条件中。但我认为这不是正确的解决方案。与 Sapper 非常相似,有一个preload函数可以在安装之前加载页面相关数据。preloadSvelteJS 中这种(Sapper 的)行为的替代方案是什么?

events lifecycle components mount svelte-3

8
推荐指数
1
解决办法
1万
查看次数

如何关注从 Svelte 组件加载的输入字段?

加载内部有输入文件的组件后。我怎样才能专注于那个特定领域?

TextField.svelte

<script>

  export let label = ''
  export let name = ''
  export let placeholder = ''
  export let value = ''

</script>

<div class="field">
  <label for={name}>{label}</label>
  <input {placeholder} type="text" {name} bind:value={value} >
  <slot></slot>
</div>
Run Code Online (Sandbox Code Playgroud)

App.svelte

<script>
  import TextField from './TextField'
  import {onMount} from 'svete'

  onMount(() => {
    // This line is funny.. I know
    document.querySelector('[name="firstname"]').focus()
  })

</script>

<TextField label="First Name" name="firstname" />
Run Code Online (Sandbox Code Playgroud)

input autofocus svelte

3
推荐指数
2
解决办法
3086
查看次数

onMount 和 ouside onMount 生命周期内的语句有什么区别?

在我看来(我知道我会错)我onMountsvelte 的生命周期函数内所做的事情也可以在它之外完成。有区别吗?或者..我错过了很多点。

<script>

  import {onMount} from 'svelte'

  function doSomething() {
    // ......
    // ..........
  }

  onMount(() => {
    function doSomething() {
      // ......
      // ..........
    }
  })

</script>
Run Code Online (Sandbox Code Playgroud)

lifecycle svelte

2
推荐指数
1
解决办法
288
查看次数

如何阻止 Sapper 在嵌套路由中滚动回顶部?

事情是,我有两个途径 /istifta/istifta/edit

/istifta路线显示istiftas(问题),而/istifta/edit路线开辟了编辑在同一页上,由于同样的问题面板_layout.svelte文件。

唯一的问题是,当我/istifta/edit/istifta. 它不仅会打开编辑面板,还会滚动到页面顶部。我怎样才能阻止这种行为?我想在此导航时保持在相同的滚动位置。istiftas 是一个很长的清单。对于编辑,它应该保持在相同的滚动位置。一次又一次地滚动到底部并找到 id 对用户来说过于复杂。

请解决这个问题。特别是Rich Harris,如果您正在阅读本文。

scroll svelte sapper

2
推荐指数
1
解决办法
701
查看次数

如何在原始HTML中使用绑定?

呈现原始html时如何使用动态属性和绑定。假设:

<script>
let name = 'Joseph'
let test = '<p>{name}</p>'
</script>

{@html test} <!-- Outputs: {name} instead of Joseph -->
Run Code Online (Sandbox Code Playgroud)

我知道,有人会回答,一种更好的方法是创建一个组件。但是我仍然想问,是否有一种在原始html渲染中使用绑定的方法?

javascript binding svelte

0
推荐指数
1
解决办法
53
查看次数