svelte-5 相关问题


为什么我的 vite.config 文件中会出现此过载错误以及如何修复它?

我的 vite.config 支持 Svelte 5 应用程序 使用“@”解析./src 支持像 vitest 这样的测试(或者 jest 如果我需要改变的话) 从“vite”导入{defineConfig}; 从'@svelt...


带有 Tailwind 风格的 Sveltekit 套件

我正在尝试使用 svelte 打包库创建一个 Svelte 组件包(您可以使用 npm create svelte@latest 并选择 svelte 库进行设置。然后我在


Svelte 中的单例

我正在尝试制作一个 Svelte 应用程序,其中我有一个类(不是 Svelte 组件)来创建音频源并管理它。 我想跨多个组件获取此类实例。 现在...


如何在 svelte 中创建 cookie 并访问它?

我正在尝试在 svelte 中创建一个 cookie(我也在使用 svelte 套件)并访问它。我想使用 cookie 进行身份验证,更具体地说,是存储 JWT 令牌。 我已经试过了


在 Svelte 中保持页面的页面滚动位置

我正在使用 Svelte,并尝试将滚动位置保持在单个页面上,例如当用户导航到另一个页面然后导航回(通过浏览器或导航栏返回)页面时...


为什么我无法使用 use:action Svelte 添加/删除主体类

我有这个功能 const bodyClass = (节点) => { if (open && !node.classList.contains("is-search-show")) { node.classList.add("is-search-show&quo...


Svelte 似乎对分配的变量更改有反应

假设我将此作为主页: 从“./Child.svelte”导入子项; 让人 = { 名字: "" }; 还有这个...


在组件中添加传单的map.on('click', ...)会导致参数列表后出现语法错误:缺少 )

我在使用Leaflet和Svelte时遇到了一些奇怪的错误,我不确定这是否是我的错误。 我有一个封装我的 Leaflet 地图的组件,位于 Svelte 的 $lib 目录中。随时...


MSAL AcquireSilent 始终获取新令牌

我有一个使用@azure/msal-browser的svelte应用程序:^3.22.0 实际上调用 acquireTokenSilent 应该从缓存中检索我的有效 accessToken,并且仅当它无效或过期时......


在@html中使用svelte css类

我有一个返回带有类的html的api,我想知道如何为它们使用svelte样式定义。 应用程序.Svelte 让字符串 = `<span class="status">ok</span>...</desc> <question vote="7"> <p>我有一个返回带有类的 html 的 api,我想知道如何为它们使用 svelte 样式定义。</p> <p>应用程序.Svelte</p> <pre><code>&lt;script&gt; let string = `&lt;span class=&#34;status&#34;&gt;ok&lt;/span&gt;`; &lt;/script&gt; &lt;p&gt;{@html string}&lt;/p&gt; &lt;style&gt; .status { color: red } &lt;/style&gt; ... {@html marked} </code></pre> <p>退货 <pre><code>Unused CSS selector (8:1)</code></pre></p> </question> <answer tick="true" vote="10"> <p>Svelte 将删除它在标记中找不到的所有 CSS,这就是它删除示例中的 <pre><code>status</code></pre> 类的原因。 然而,有一种方法可以告诉 Svelte 不要管这些类,那就是简单地声明它们 <em>global</em>:</p> <p><pre><code>:global(.status) { }</code></pre></p> <p>请注意,这会将这些样式应用于应用程序中的 <strong>ALL</strong> <em>.status</em> 类,为了仍然具有一些范围,您可以以某种方式将其设为子选择器</p> <pre><code> &lt;style&gt; .wrapper &gt; :global(.status) { } &lt;/style&gt; &lt;div class=&#34;wrapper&#34;&gt; {@html marked} &lt;/div&gt; </code></pre> <p>这样它只会应用于<em>wrapper</em>内的<em>status</em>类。</p> </answer> <answer tick="false" vote="0"> <p>我试图使用 h2 标签来做到这一点,因为我正在使用“flowbite-svelte”的 svelte 应用程序中集成tincyMCE。 对我有用的是:</p> <pre><code> :global(.content h2) { font-size: 1.5em; } </code></pre> <p>“内容”是我的 div 类。</p> </answer> <answer tick="false" vote="0"> <p>根据您的情况,您可能会发现一种比 :global() 更有吸引力的替代方案。</p> <p>您可以选择导入 CSS 并使其仅向下流动到项目中的子页面。</p> <p>例如,如果您有这样的结构:</p> <pre><code>routes/app +layout.svelte /subpages /portal +layout.svelte /subpages /marketing +layout.svelte /subpages </code></pre> <p>您可以将 CSS 导入到上述任一布局中的布局部分,并且仅将其应用于其下方的所有子页面。</p> <pre><code>&lt;script&gt; import &#34;../styles/marketing.styl&#34; &lt;/script&gt; </code></pre> </answer> </body></html>


如何测量 Svelte 组件的像素高度?

我正在尝试测量组件的高度,但始终未定义。如果我在组件周围放置一个 html 容器,它会起作用,但这对我来说似乎不是正确的解决方案。 这是我的


如何以 Svelte 方式设置导出和开槽零件的样式?

Svelte slot 的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。 在 html/js 中我可以这样做: 身体{颜色:红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。</p> <p>在 html/js 中我可以做:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>&lt;style&gt; body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} &lt;/style&gt; &lt;h1&gt;Hello World&lt;/h1&gt; &lt;my-element&gt; &lt;div slot=&#34;header&#34;&gt;&lt;strong&gt;Header&lt;/strong&gt;&lt;/div&gt; &lt;div slot=&#34;body&#34;&gt;Body&lt;/div&gt; &lt;/my-element&gt; &lt;script&gt; customElements.define(&#39;my-element&#39;, class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: &#39;open&#39;}); shadowRoot.innerHTML = ` &lt;style&gt; .container { border: solid 1px blue; padding: 5px; position: relative; &amp;:after { content: &#34;my-element&#34;; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part=&#34;body&#34;] ::slotted(div) { background-color: lightyellow; } &lt;/style&gt; &lt;div class=&#34;container&#34;&gt; &lt;header part=&#34;header&#34;&gt;&lt;slot name=&#34;header&#34;&gt;&lt;/slot&gt;&lt;/header&gt; &lt;hr&gt; &lt;div part=&#34;body&#34;&gt;&lt;slot name=&#34;body&#34;&gt;&lt;/slot&gt;&lt;/div&gt; &lt;/div&gt; `; } }); &lt;/script&gt;</code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色,标有 <pre><code>part=&#34;header&#34;</code></pre> 的元素从外部设置为绿色,插入 <pre><code>slot=&#34;body&#34;</code></pre> 的内容从内部(shadow dom)设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种(受控)跨界样式? (例如,当使用 <pre><code>AppShell::part(content)</code></pre> 时,我收到错误:</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | &lt;style&gt; 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. &lt;div class=&#34;private-parent&#34;&gt; &lt;slot /&gt; &lt;/div&gt; &lt;style&gt; div.private-parent { color: blue; } &lt;/style&gt; </code></pre> <p>然后,您使用该组件:</p> <pre><code>&lt;script&gt; import Test from &#39;./Test.svelte&#39;; &lt;/script&gt; &lt;Test&gt; &lt;!-- This is the slot&#39;s content --&gt; &lt;p class=&#34;outside-style&#34;&gt;Hello!&lt;/p&gt; &lt;/Test&gt; &lt;style&gt; p.outside-style { color: darkred; } &lt;/style&gt; </code></pre> </answer> </body></html>


如何处理 Vite 项目中同一个库的 3 个版本冲突?

我有以下奇怪的情况:我正在使用 Vite 和 svelte-ts 模板设置开发一个网络应用程序。在此应用程序中,我必须为基于 WebXR 的增强现实使用不同的库,这样您就可以


如何在页面加载时为 Svelte 组件设置动画而不导致布局移位

问题 我想在加载 SvelteKit 应用程序的登陆页面后对标题进行动画处理,导致标题的每个字母稍微出现在另一个之后,但我所提供的所有解决方案...


Yarn 安装导致错误:“401 未经授权”

当尝试运行yarn install时,我得到: [1/5] 验证 package.json... [2/5] 正在解析包... [3/5] 正在获取包裹... 错误错误:http://------------.int:8080/tfs/-------/_packagin...


定义一个索引,每次在r数据表中的某一列中找到相同值时该索引增加

我有一个如下所示的data.table: 例子 <- data.table(time = 1:30, A = c(rep("a", 5), rep("b", 5), rep("a", 5), r...


对数组的每 N 个元素进行排序的排序算法

我正在寻找一种对数组的每个 N 元素进行排序的算法。 例如,数组为 7 8 6 4 5 1 4 3 5,N 为 3。 我希望排序后的数组为 6 7 8 1 4 5 3 4 5 请注意...


Entity Framework .NET 8 将数据保存为 JSON 对象

我想像这样在SQL Server中保存数据: 准备 : [ "访问前查看客户数据": "5", “setSmartObjectivesForVisit”:“5”,...


JSF java.lang.IllegalArgumentException:无法将 5 类型的 class java.lang.Integer 转换为 class

我收到转换器的新错误 javax.faces.component.UpdateModelException:java.lang.IllegalArgumentException:无法将 5 类型类 java.lang.Integer 转换为类 com.jpa.entity.Groups 在


部署期间MongoDB身份验证错误,本地运行时没有错误

部署过程中出现以下错误: 5:30:38 PM:[nodemon] 启动 `node server.js` 5:30:39 PM:服务器监听 http://localhost:3000 5:30:39 PM:/opt/build/repo/node_modules/mongodb...


扩大 pandas 数据框中值之间的距离

如何扩大pandas数据框中值之间的距离? A 1 3 2 5 3 6 5 5 6 9 我想将相邻元素之间的距离增加x倍,例如两倍。 预期输出: ...


如果 Ada 中的表达式逻辑上不正确?

我有以下代码: 与 Ada.Text_IO;使用 Ada.Text_IO; 程序主要是 FiveIsLessThanZero :布尔值; 开始 FiveIsLessThanZero := (如果 5 < 0 then 0 > 5); Put_Line (


为什么 svelte 派生存储总是在 get() 上重新创建?

现在我想这更针对 Svelte 作者,但我最近才完全意识到派生商店是在获取时不断重新创建的。 例子 导入{导出、获取、写入...</desc> <question vote="0"> <p>现在我想这更针对 Svelte 作者,但我最近才完全意识到派生商店会在 <pre><code>get</code></pre> 上不断重新创建。</p> <p><a href="https://svelte.dev/repl/142e6716b65647f69f660613b39d0386?version=4.2.12" rel="nofollow noreferrer">示例</a></p> <pre><code>&lt;script&gt; import { derived, get, writable } from &#39;svelte/store&#39; const store = writable(0) const derivedA = derived(store, s =&gt; { console.log(&#39;derivedA recreated!&#39;) return { name: &#39;A&#39;, s } }) const derivedB = derived(derivedA, d =&gt; { console.log(&#39;derivedB recreated!&#39;) return { name: &#39;B&#39;, s: d.s } }) function getB() { console.log(get(derivedB)) } &lt;/script&gt; &lt;section class=&#34;mx-4 md:mx-0&#34;&gt; &lt;button on:click={getB}&gt;GetB&lt;/button&gt; &lt;/section&gt; </code></pre> <p>我认为它们只会在输入发生变化时才会重新创建 - 而不是每次调用 <pre><code>get</code></pre> 时都会重新创建。特别奇怪的是,如果派生存储被链接,则整个树都会被遍历。我假设 <pre><code>get</code></pre> 返回了对值的引用,当然,如果你那么愚蠢,你可能会变异并导致各种错误。</p> <p>我确实知道派生存储应该始终为相同的输入返回完全相同的值,但是如果<em>某人</em>没有时间深入思考它,则依赖于派生存储仅在原始存储更改时重新计算它会导致相当奇怪的错误。</p> </question> <answer tick="true" vote="1"> <p>来自文档</p> <blockquote> <p>从一个或多个其他商店派生出一个商店。 <strong>回调最初在第一个订阅者订阅时运行</strong>,然后每当存储依赖项发生变化时运行。</p> </blockquote> <blockquote> <p>...您可能需要检索您未订阅的商店的值。 <strong>get</strong> 允许您这样做。 <strong>这可以通过创建订阅</strong>、读取值,然后取消订阅来实现。</p> </blockquote> <p>在您的示例中,派生值未在任何地方使用,因此调用 <pre><code>get</code></pre> 创建第一个订阅者。添加时</p> <pre><code>{$derivedA} {$derivedB} </code></pre> <p>日志将在组件初始化时运行,而在调用 <pre><code>get</code></pre></p> 时不再运行 </answer> </body></html>


尽可能快地进行嵌套循环

spatial_data = [[1,2,3,4,5,6], ....., [1,2,3,4,50,60]] #长度1000万 参考 = [[9, 39, 22, 28, 25, 5], ...... , [5, 16, 12, 34, 3, 9]] # 长度 100 对于参考中的 x: 结果 = [c 为...


R:模拟正态分布中的点

我正在使用 R 编程语言。 考虑以下情况 - 对于均值为 5 且 sigma=5 的正态分布: A) 基于数值积分,


类方差权威变体允许“空”值,但不应该

我这样使用cva: 导出 const checkboxVariants = cva('边框 ...', { 变体:{ 尺寸: { sm: 'h-4 w-4', md: 'h-5 w-5', lg: 'h-6 w-6', }, },


pinescript 中的版本 1 到版本 5

我正在尝试将下面的固定脚本从版本 1 转换为版本 5。我陷入了突出显示的步骤。我需要版本 5 中的此代码,因为我必须将此代码与我的另一个版本合并...


Spring 5 中机密客户的 PKCE(非反应式)

我正在尝试在 Spring Boot 5 中的 oAuth 客户端上启用 PKCE。我能找到的示例适用于反应式客户端,如下所示: SecurityWebFilterChain springSecurityFilterChain(


如何修复ggplot中的纵横比?

我正在尝试调整绘图大小以适合我的文档,但我很难将绘制的图表变成正方形。 例子: pdf(文件=“./out.pdf”,宽度=5,高度=5) <- ggplot(


svelte:第一次加载时窗口内部宽度未定义

我有这个组件来检查设备大小 从“$lib/stores”导入{deviceSize}; 让内部宽度; $:如果(内部宽度> = 1652){ ...</desc> <question vote="0"> <p>我有这个组件来检查设备尺寸</p> <pre><code>&lt;script lang=&#34;ts&#34;&gt; import { deviceSize } from &#34;$lib/stores&#34;; let innerWidth; $: if (innerWidth &gt;= 1652) { $deviceSize = { xl: true, lg: false, md: false, dsm: false, sm: false, }; } else if (innerWidth &gt;= 1240 &amp;&amp; innerWidth &lt; 1652) { $deviceSize = { xl: false, lg: true, md: false, dsm: false, sm: false, }; } else if (innerWidth &gt;= 794 &amp;&amp; innerWidth &lt; 1240) { $deviceSize = { xl: false, lg: false, md: true, dsm: false, sm: false, }; } else if (innerWidth &gt;= 640 &amp;&amp; innerWidth &lt; 794) { $deviceSize = { xl: false, lg: false, md: false, dsm: true, sm: false, }; } else { $deviceSize = { xl: false, lg: false, md: false, dsm: false, sm: true, }; } $: console.log(innerWidth); &lt;/script&gt; &lt;svelte:window bind:innerWidth /&gt; </code></pre> <p>和像这样的应用程序组件</p> <p><App.svelte></p> <pre><code>&lt;script&gt; const { lg, xl } = $deviceSize; $: isDesktop = xl || lg; &lt;/script&gt; {#if isDesktop} &lt;DesktopComponent/&gt; {/if} {#if !isDesktop} &lt;MobileComponent/&gt; {/if} </code></pre> <p><a href="https://i.stack.imgur.com/6iNXn.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tLzZpTlhuLnBuZw==" alt="enter image description here"/></a></p> <p>我的问题是innerWidth在初始加载中总是未定义。所以 isDesktop = false,那么即使我使用桌面,也始终渲染 MobileComponent。请帮我解决这个问题。</p> <p>我尝试为 <pre><code>deviceSize</code></pre> 商店设置默认值,但无法按我想要的方式工作,它始终呈现为我使用的任何设备(PC、移动设备)的默认条件。</p> </question> <answer tick="false" vote="0"> <p>根据<a href="https://svelte.dev/docs/svelte-components#:%7E:text=Reactive%20statements%20run%20after%20other%20script%20code%20and%20before%20the%20component%20markup%20is%20rendered%2C" rel="nofollow noreferrer">svelte 文档</a>:</p> <blockquote> <p>反应式语句在其他脚本代码之后、渲染组件标记之前运行</p> </blockquote> <p>意味着 if-else 块在创建 <pre><code>svelte:window</code></pre> 绑定之前运行一次,此时 <pre><code>innerWidth</code></pre> 未定义。</p> <p>为了避免这种情况,您可以将 <pre><code>innerWidth</code></pre> 初始化为正确的值,例如更换</p> <pre><code>let innerWidth; </code></pre> <p>与</p> <pre><code>let innerWidth = window.innerWidth; </code></pre> <p>也就是说,通过使用 <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries" rel="nofollow noreferrer">CSS 媒体查询</a>(而不是 JavaScript)来显示和隐藏标记,您可能会让您的生活变得更轻松。</p> </answer> </body></html>


鼠标进入,每秒缩小图像尺寸5%

我将图像放入 div 中。当我将鼠标移入 div 时,图像每秒应减小 5%。我已经完成了这个脚本,但没有任何反应。 document.addEventListener("DOMContentLoaded...


对数组进行排序。输入--> [3,4,5,1,2]预期输出--->[5,2,3,1,4]

输入:nums = [3, 4, 5, 1, 2] 输出:nums = [5, 2, 3, 1, 4] 解释:在此示例中,偶数 [4, 2] 位于位置 [1, 4]。 它们按升序排序并放置在...


如何读取wc -l命令的值

我有一个要求,我需要读取 wc -l 命令的值。基本上我运行以下命令来获取值 5: bash-3.2$ wc -l 样本.tcl 5 样本.tcl 现在使用 tcl 和 e...


FVM 安装错误 FormatException:无效的 UTF-8 字节(偏移量 5)

我尝试通过fvm下载flutter sdk,但是不允许出现此错误 C:\>fvm install stable 创建本地镜像...未处理的异常:FormatException: Invalid UTF-8 byte (at offset 5) #...


Excel 按升序排序不包括对角线元素

如果 $C$5="Y",下面的公式返回至少 10 个值(如果包括对角线值)。如果 $C$5="Y",我们如何才能获得非对角线值。 =VSTACK({"V1","V...


RGB888 至 RGB565 / 位移位

我想使用位移位将三个字符组合成一个短片。这是为了实现 RGB565 调色板(其中 5 位用于红色,6 位用于绿色,5 位用于蓝色)。 这是我的例子


Java 应用程序中索引::5、jdbc 和 oracle 处缺少 IN 或 OUT 参数

尽管我只有 4 个占位符,但我收到错误 Missing IN or OUT parameter at index:: 5 下面是 jpql 和我正在使用 setParameters 的方法。 私有静态最终字符串


如何释放C中的调用堆栈?

我创建了一个使用 RDP(递归下降解析器)的计算器来解析和评估数学表达式“例如:5cos(30) -5(3+5)”。问题是我也尝试过包含通讯...


如何显示倒计时5分钟的计时器?

我在form1设计器中添加了一个计时器。 在form1的顶部: 私有 int countdownSeconds = 300; // 5分钟 私有秒表秒表=新秒表(); form1 构造函数: 公共表格1() {


django-ckeditor-5 无法在本地上传文件

我使用 django-ckeditor-5 包成功显示了 ckeditor5,但无法上传图像,并且无法在结果页面上显示 youtube 视频。 这是我在后端控制台上遇到的错误...


如何在 mac m1 中安装.net 5 sdk [已关闭]

无法在我的 mac m1 中安装 .net 5 sdk。我正在尝试编译一个 C# 项目及其要求 .net 5.0 sdk。 我尝试从官方网站下载它,但arm64不存在...


js中反转数组元素后半部分

这里,我写了一个程序,遍历并反转数组元素的最后一部分,就像数组是[5, 17, 11, 10, 12, 6],我想要输出像[5, 17 , 11, 6, 12, 10],所以我有


Django 5 的 MultiSelectField 库有哪些替代品?

角色 = [ (“管理员”,“Администратор”), (“用户”,“Пользователь”), ] 类权限(模型.模型): 标题 = models.CharField(max_length=100)


如何使用axios在vuejs中渲染easydatatable

我使用 axios 获取这些数据 { “qtp1459016715-18382027”:{ “姓名”:“qtp1459016715-18382027”, “状态”:“5”, “优先”...


在JMETER中设计以下场景

从 5 个并发用户每秒运行 5 个请求开始,然后增加到 10 个用户,然后每秒运行 10 个请求。 您能帮忙介绍一下如何在 JMeter 中设计上述场景吗?


C++ std::array 迭代器保证是类似指针的吗?

我有一个 C++ 数组。 std::array arr { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 }; 我想反转最后五个元素,最终得到 { 0, 1, 2, 3, 4, 9, 8, 7, 6, 5 }。我知道 std::array 给出...


带有 while 循环的成绩计算器

我需要创建一个成绩计算器,将5次测试的结果放入其中并求平均值,并给出5个成绩的结果,我制作了最终成绩结果程序,但我不知道...


Bootstrap 5使用js切换折叠不起作用

出于某种原因,我想在没有ID的情况下使用折叠。我在 stackoverflow 上找到了一个旧答案,它似乎在 Bootstrap 5 中不起作用。 错误:未捕获类型错误:c.nextElementSibling.collapse i...


使用前缀和后缀递增

有人可以解释为什么警报在 postfix 下仍然显示 5 吗?我知道前缀标识最后一次迭代是假的,但是使用后缀,它仍然会返回 i 作为 5。 // 前缀代码: 让我= 0;


如何在网格布局中实现顶部对齐?

我正在尝试制作网格布局。网格中有 7 个项目。 我想要显示的布局如下。 1 3 6 2 4 7 5 上面代码显示的实际布局是 1 2 3 4 5 6 ...


© www.soinside.com 2019 - 2024. All rights reserved.