在我的代码中,我想导入一个在多个组件中通用的外部javascript文件.但是,当汇总构建组件时,它无法解析导入的依赖项,因此它永远不会包含在输出包中.注意,我正在尝试构建一个苗条的组件(而不是一个苗条的应用程序),虽然我不确定是否有所作为.这是我的rollup.config.js:
import svelte from 'rollup-plugin-svelte';
import pkg from './package.json';
const name = pkg.name
.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
.replace(/^\w/, m => m.toUpperCase())
.replace(/-\w/g, m => m[1].toUpperCase());
export default {
input: 'src/Radar.html',
output: [
{ sourcemap: true, file: pkg.module, 'format': 'es' },
{ sourcemap: true, file: pkg.main, 'format': 'umd', name }
],
plugins: [
svelte({
cascade: false,
store: true
})
]
};
我有一个包含以下数据的可写存储
let array= writable({
skills: [{
id: 1,
name: "Wordpress",
knowledge: 0.9
},
{
id: 2,
name: "Js",
knowledge: 0.8
} ]
})
我想根据知识对进度条进行动画处理，我在 {#each } 循环中访问知识，但进度条没有动画，因为我必须传递补间存储对象并设置它的值。那么如何为栏制作动画呢？如何将知识值传递给循环中的补间对象 set() 方法？
我尝试使用 onChange 处理程序将asYouType函数添加libphonenumber-js到我的 svelte 输入中，因为我不确定如何通过 2 路绑定来完成此操作。
我已经设法实现了这一点，但它只会在 onBlur 上格式化数字，而不是在用户键入输入时按照预期的行为，如此处libphonenumber-js所示
如何更改我的输入，使其在用户输入时格式化？
<script>
import { AsYouType } from "libphonenumber-js";
export let value = "";
export let label = "";
let isFocused = false;
let isTooltipVisible = false;
const onBlur = () => {
isFocused = false;
isTooltipVisible = false;
};
const handleChange = val => {
if (localeKey === "dfc.removal_form.phone") {
const asYouType = new AsYouType("US");
value = new AsYouType("US").input(val);
}
};
</script>
<div class="input-container input__row …我会尽量简短。我有主要组件 app.svelte。在其中我使用了一个名为 Course.svelte 的子组件。我使用 {#each} 块多次重复同一组件。问题是我希望 app.svelte 知道每当单个组件打开时：单击。现在我正在处理 Course.svelte 组件中的 on:click 事件。这样，App.svelte 将永远不会知道这一点。我应该怎么办？
Course.svelte 的片段以及我如何处理 on:click 事件：
<script>
function handleClick() {
if (state == courseStates.CLOSED) {
//Handle closed course
} else {
if (state === courseStates.READY) {
passCourse();
} else if (state === courseStates.PASS) {
failCourse();
}
}
}
function passCourse() {
state = courseStates.PASS;
}
function failCourse() {
state = courseStates.READY;
}
</script>
<div on:click={handleClick} class="text-center course btn {buttonClass}">
<h1>{name}</h1>
<h4>{code} - {credit} Credit Hours - Term {term}</h4>
</div> …我正在开发一个以图形方式呈现树结构的应用程序。树中有各种节点类型，每种类型都有一个相应的 Svelte 组件来渲染它。
该应用程序的功能之一是您可以单击并拖动树中的节点，并将其移动到不同的父节点。当将节点放到新位置时，底层数据结构会相应地转换，并且 Svelte 会更新视图。
问题是，被移动节点的组件实例被破坏（连同它的所有后代，可能是数百个节点），然后无论节点移动到哪里，整个事物都会从头开始重新创建。这是很多不必要的工作，并且有非常明显的滞后，而它本应该能够立即移动现有的组件实例和关联的 DOM 节点。
有什么方法可以提示 Svelte 应该重用该实例吗？
（每个节点上都有一个唯一的 ID，如果有帮助的话。）
我有几个 Svelte 组件和一个自定义可写存储。存储有一个init函数，async它用一些 REST API 的数据库表的数据填充存储的值。我的组件都必须使用自动订阅来订阅该商店。订阅时，init必须调用。总体想法是在数据库上实现 CRUD 操作，在存储上实现 CRUD 操作（有助于显示存储的值，即数据库的表，具有反应性）。
按init原样async，因此返回一个承诺，我需要await在我的组件中使用它。但由于我使用自动订阅（通过在商店名称前加上前缀$），我该怎么做？
例如：（App.svelte组件）：
<script>
import { restaurant_store } from './Restaurant.js'
export let name
</script>
<main>
<!--- I need to handle the promise and rejection here -->
{#each $restaurant_store as restaurant}
<li>
{restaurant.name}
</li>
{/each}
</main>
Restaurant.js（商店）：
import { writable } from 'svelte/store'
export function createRestaurantsStore() {
const { subscribe, update } = …我尝试将 Svelte 组件编译为 Web 组件。
<svelte:options tag="date-picker" immutable={true}/>customElement: true到汇总中plugins: [ svelte()npm run build但我一直收到这样的消息：
(!) 插件 svelte：未指定自定义元素“标签”选项。要自动注册自定义元素，请指定一个带有连字符的名称，例如 。要隐藏此警告，请使用
我究竟做错了什么？
我的index.js文件：
export { default as default } from './DatePicker.svelte';
DatePicker.svelte文件：
<svelte:options tag="date-picker" immutable={true}/>
<script>
/* code */
汇总文件：
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';
const name = pkg.name
.replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
.replace(/^\w/, m => m.toUpperCase())
.replace(/-\w/g, m => m[1].toUpperCase());
export default {
input: 'src/index.js',
output: [ …我正在尝试https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql人所做的令人惊叹的作品。
直到今天问题为止一切正常。
我正在使用下面的代码，它给了我这个错误：
Error: Function called outside component initialization
at get_current_component (index.mjs:615)
at getContext (index.mjs:648)
at getClient (urql-svelte.mjs:55)
at query (urql-svelte.mjs:81)
at Players.svelte:41
代码：
<script>
import { query } from '@urql/svelte'
import { myQuery } from './myQuery'
let players
let myVars
function sleep (ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
$: (async () => {
await sleep(2000) // this gives me the error; removing it make it work
players = query({
query: myQuery,
variables: { ...myVars }, …我有两个组件在组件树中距离很远，我对如何在两者之间进行通信存有疑问。我有搜索组件、listItems 和商店。
商店.svelte
<script context="module" lang="ts">
import type {Items} from '../../Models/Items.model';
import { writable } from 'svelte/store';
export const dataItems = writable<Items[]>([]);
const filterInfo = (term:string) => {
dataItems.update(item => {
item.filter(x => {
return x.name.toLowerCase().includes(term.toLowerCase())
|| x.description.toLowerCase().includes(term.toLowerCase());
})
return dataItems;
})
}*/
export const dispatcher = {filterInfo};
</script>
搜索组件
<script lang="ts">
import { dispatcher } from './ViewI/store.svelte';
let value:any;
const handleChange = () => {
dispatcher.filterInfo(value)
console.log(value)
}
</script>
<Search>
<input bind:value
on:input={handleChange}>
</Search>
列表项组件
import type {Items} from …我在我的项目中使用 Svelte i18n，它在我的 Svelte 组件中完美运行。
但我有一些 JS 文件（例如常量），我想使用 i18n 来翻译一些键，例如 (in /services/constants.js) ：
import { _ } from 'svelte-i18n'
export const STATUS_OK = 1;
export const STATUS_PENDING = 2;
export const STATUS_ERROR = 3;
export const STATUS_INACTIVE = 4;
export const STATUS_PRICE_NOT_FOUND = 5;
export const STATUTES = {
[STATUS_OK]: {
text: _('urls.statutes.ok'),
class: 'text-green-500',
},
但我得到一个错误，我可以_在 JS 文件中使用函数吗？或者我应该创建一种简洁的组件来处理我的常量？