问题标签 [svelte-component]

我想在我的项目中使用Tabulator ，它还没有与 Svelte 集成。是一个非常完整的数据表库，我之前已经用过。但是，当我尝试使用操作按钮（编辑、删除...）创建典型列时，我总是使用他们的自定义格式化程序，将 html 作为字符串返回。

格式化列的函数返回如下内容：

<custom-button />是使用index.html ( )创建<svelte:options>并添加到项目中的自定义元素。<script src="lib/CustomButton.js"></script>

自定义按钮显示在表格中，但无法转发事件。似乎该组件无法在其自身范围之外进行通信。

考虑这个 Svelte 代码：

https://svelte.dev/repl/e3ea17e8e09044999bf7cb4bc882adea?version=3.19.2

我该如何调整它以便每个按钮都可以独立切换？如您所见，它当前切换了所有按钮:(

我尝试将 Svelte 组件编译为 Web 组件。

1. 添加了选项<svelte:options tag="date-picker" immutable={true}/>
2. customElement: true在汇总中添加到plugins: [ svelte()
3. 跑npm run build

但我不断收到消息：

（！）插件苗条：未指定自定义元素“标签”选项。要自动注册自定义元素，请指定带有连字符的名称，例如 . 要隐藏此警告，请使用

我究竟做错了什么？

我的index.js文件：

DatePicker.svelte文件：

汇总文件：

似乎如果您的项目由单个组件组成，则不会出现该消息。在此处查看问题：

https://github.com/sil-vio/svelte-web-components/issues/2

这可能是 Svelte.js 的工作方式，但我很好奇我是否做错了什么，或者是否有解决方法。

如果我设置 compiler option ，传递给组件的属性在该组件内的标记customElement: true中不可用。<script>我使用带有 svelte-loader 的 webpack。这是一个简单的例子：

此外，如果customElement: true未设置，并且框架使用const app = new App(...)构造函数进行实例化，则console.log(foo)可以正常工作，就像$: bar = foo.toUpperCase().

谁能解释为什么 Svelte 会这样工作？谢谢，干杯！

这是我创建苗条上下文的方式：

如果我尝试getContext在子组件中，那么我得到undefined但在父组件中 layoutWidth 总是有价值。

如何offsetHeight在 Svelte 中获取父元素？

我getContext这样使用：

在使用 jest 和 @testing-library/svelte 测试 svelte 组件时，状态在测试之间共享，每次测试后是否可以拆除，所以我有更多独立的单元测试。

商店/主题

因为没有 DI 存储在测试之间共享，所以我可以在 beforeEach 中将值重置为默认值，但尝试查看是否有更好的解决方案。

ThemeSwitcher.spec.js

如果在同一个上下文中多次使用同一个组件，绑定属性是否可以在它们的实例之间共享？

例如，如果我有一个创建复选框的组件，如何将选择 ( bind:group) 组合为字母选择器和数字选择器？

在此示例中，如果选择了多个字母，则选择会正确传播和绑定。但是，如果随后选择了数字，则字母选择将替换为所选数字，而不是将所选数字连接到所选字母。

REPL：https ://svelte.dev/repl/f97f859ea567473b9732b8933db870f7?version=3.20.1

我目前正在学习如何在 Svelte 中使用绑定。我找到了我正在练习的这个例子，并且想稍微改变一下代码。我正在尝试使所选项目出现在同一行的 1 个标记中，而不是为每个选中的选项显示多个 p 标记。

• 如果 Roger 和 Syd 都被选中，那么我不想在一行中列出 Roger，然后在下面的另一行中列出 Syd，我只想拥有 --> Roger, Syd（在单个 p 标签中的同一行上）。

我知道我只需要骑上每个，但我不确定我可以用什么来代替它。我仍然想让这个例子尽可能简单。这是示例：

我想为我的 Svelte 应用程序设置渐变背景。这是我喜欢这个网站的渐变：https ://uigradients.com/#JShine 。我复制了网站给出的十六进制代码并将它们放入我的全局 CSS 文件中，如下所示：

我无法理解为什么渐变在中间有非常明显的颜色过渡。我希望它像梯度提到的名字一样贯穿始终。我不明白我做错了什么，我想要一个均匀的渐变而不是那么刺耳的线条。我附上了我的页面目前的样子。

注意：我的页面上确实有内容，但我不想在图像中包含我的文本，所以我在页面上找到了没有内容要截图的空间。另外我知道这更像是一个 CSS 问题，但我不确定它是否会有所不同，因为我实际上是在使用 Svelte 编写代码，所以我也添加了该标签。

当前的页面是什么样的

我正在尝试在选中和取消选中复选框时更新总数（以防用户改变主意并且不再需要该项目）。但我不确定如何获得分配给每个玩具的实际价值。例如：如果用户选择玩具 1 和 3，他们应该会看到：您订购了玩具 1、玩具 3，您的总金额为 6.00 美元。现在，我为这些值分配了名称本身，这不是我想要的，但我只是把它显示为我正在尝试做的事情。他们是我应该使用的其他东西实际执行操作以获得总数吗？