我的一个组件订阅了商店中的一个变量。每当该存储变量发生变化时,我想触发一个函数。
商店.js
import { writable } from "svelte/store";
export const comparedProducts = writable([1,2,3]);
Run Code Online (Sandbox Code Playgroud)
组件.svelte
import { comparedProducts } from "../stores.js";
//if there is a change in $comparedProducts trigger this function eg. ([1,2])
const someFunction = () => {
//do something
}
Run Code Online (Sandbox Code Playgroud) 由于某种原因,我的应用程序陷入了内部测试草案。我已完成 Play 管理中心要求我执行的所有步骤,包括提交评分信息、商品详情等。
我在控制台上摆弄了一下,决定从内部测试转向封闭 Alpha 测试,希望草案阶段能够消失,但遗憾的是它没有消失,现在正在接受审查。我的印象是,如果该应用程序是在内部测试下发布的,则不需要进行审查。
我想遍历部分对象并打印出标签中的键h1
和值p
。我可以将它包含在一个数组中。
<script>
const sections =
{"Title 1": "paragraph",
"Title 2": "paragraph",
"Title 3": "paragraph",
"Title 4": "paragraph",
"Title 5": "paragraph"}
</script>
{#each sections as section}
<h1>{title}</h1>
<p>{paragraph}</p>
{/each}
Run Code Online (Sandbox Code Playgroud) 现在,我有一个菜单,只需单击汉堡包按钮就可以展开或折叠。菜单的默认状态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>
Run Code Online (Sandbox Code Playgroud)
这是代码的当前行为:
在页面加载/重新加载时,菜单展开过渡会播放(奇怪的是,这种情况只有时发生),并且单击链接时,菜单折叠过渡会在重定向发生时播放一瞬间。
我不确定这是否是我的实现中的错误或错误。无论哪种情况,如果为此提供解决方法,我们将不胜感激。
提前致谢!
我正在尝试循环遍历数组以呈现具有 值的组件type
。
<script>
import One from './One.svelte';
import Two from './Two.svelte';
import Three from './Three.svelte';
const contents = [
{type: 'One'},
{type: 'Two'},
{type: 'Three'},
{type: 'One'}
]
</script>
{#each contents as content}
<{content.type} />
{/each}
Run Code Online (Sandbox Code Playgroud)
期望的输出:
<One />
<Two />
<Three />
<One />
Run Code Online (Sandbox Code Playgroud)
做这个的最好方式是什么?
我目前知道调整大小手柄出现在带有 css 属性的 div 的右下角:
resizable: horizontal;
我不确定这是否是浏览器独有的,但在 Firefox 中,手柄仅出现在右下角,并且仅在我们拖动该特定部分时才起作用。如果您看到任何网络应用程序,您可能会发现这些应用程序通过使整个侧面(例如:右侧)可拖动来实现相同的效果,并且即使它不在手柄上也没关系。
总而言之,我想要实现的目标:
使用 vanilla html/css 使 div 的整个侧面可调整大小。
对于当前的情况,我无法使用 jQuery,因为这是一个 React 应用程序。想知道这是否可以仅通过 html/css 而不是依赖 javascript,如果不能,我们如何在普通 javascript 中实现这一点。
我有两个组件称为One.svelte
和Two.svelte
One.svelte
看起来是这样的:
<Two class="mt-8 border"/> //example tailwind classes
Run Code Online (Sandbox Code Playgroud)
Two.svelte
看起来如何:
<main class="mt-6 bg-red-500">...</main>
Run Code Online (Sandbox Code Playgroud)
我希望main
的元素Two.svelte
使用从 传递的类,而不删除类似等One.svelte
上的现有类。Two.svelte
mt-6 bg-red-500
我尝试过的:
Two.svelte
<main class="mt-6 bg-red-500 {{$$props.class}}">...</main>
Run Code Online (Sandbox Code Playgroud)
这似乎不起作用,解决这个问题的正确方法是什么?
function sendMessage(){
...
if(file){
sendingMessage = true;
setTimeout(() => {
sendingMessage = false;
messages = [...messages, chatmessage];
}, 3800)
}
chatmessage = '';
inputRef.focus()
updateScroll();
}
Run Code Online (Sandbox Code Playgroud)
现在,当调用此函数时,chatmessage
首先将其设置为空字符串等,然后执行超时函数中的代码,这是正确的行为。但是,有没有办法让setTimeout同步呢?
这是我想要的行为:
if(file)
为true,则设置sendingMessage = true
(发送消息触发旋转轮动画)chatmessage
为空字符串等(其余代码)编辑1:我可以将代码移动到超时函数内,但问题出在我的情况下,如果file
不存在,它应该完全跳过超时函数。然后我必须编写另一个 if 块来检查文件是否不存在以执行相同的命令(重复代码)。解决这个问题的另一种方法是将相同的代码放入一个函数中并在两个地方调用它,但感觉这不是理想的方法,并且创建一个函数来更改三个变量的值似乎有点矫枉过正。