如果我们有一个小号英格尔P年龄一建有pplication斯维尔特与一群组件和我们保持我们当前的应用程序状态的店,有没有存放商店状态变化到一个推荐的方式当前URL的#散列部和能够从完整的 URL 重新加载相同的状态吗?
可以通过解析当前 URL 来手动完成location.search()。
参数的存储可以通过location.search("key", "value").
一些问题:
我曾尝试通过将 html 存储在变量中来呈现 html 但它不起作用,我也尝试了三重花括号
<script>
let name = 'world';
let val = ""
let ans2 = ""
let ans3;
import showdown from 'showdown';
import validity from 'validity-checker';
function dataSubmit(e){
e.preventDefault();
//ans = validity.isEmoji("ggg");
ans2 = new showdown.Converter();
ans3 = ans2.makeHtml(val)
}
</script>
<div>
<textarea bind:value={val} on:change={dataSubmit}></textarea>
<div>
{{{ans3}}}
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
ans3 变量的返回类型类似于“<h1>Hello</h1>”
我正在寻找有关如何将 Materializecss 或 Bulma 的 sass 版本集成到 Svelte 的说明。我的目标是能够将单个组件(如按钮组件或卡片组件)导入到单个 svelte 组件中。此外,我希望能够利用 Bulma 提供的 sass 变量。
我已经寻找了一些关于如何做到这一点的教程,但我还没有找到任何东西。
有任何想法吗?
下面的代码片段是我们npm run dev在svelte应用程序上执行时生成的内容。
function make_dirty(component, i) {
if (component.$$.dirty[0] === -1) {
dirty_components.push(component);
schedule_update();
component.$$.dirty.fill(0);
}
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
}
Run Code Online (Sandbox Code Playgroud)
任何人都可以解释下面的声明发生了什么吗?为什么数字 31 是硬编码的?
component.$$.dirty[(i / 31) | 0] |= (1 << (i % 31));
Run Code Online (Sandbox Code Playgroud)
谢谢
所以我对 svelte 和 google Recaptcha API 有疑问。
\n\n我的主要 HTML 文件
\n\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset=\'utf-8\'>\n <meta name=\'viewport\' content=\'width=device-width,initial-scale=1\'>\n\n <title>Svelte app</title>\n\n <link rel=\'icon\' type=\'image/png\' href=\'/favicon.png\'>\n <link rel=\'stylesheet\' href=\'/global.css\'>\n <link rel=\'stylesheet\' href=\'/build/bundle.css\'>\n <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">\n <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">\n <link rel="stylesheet" href="/css/styles.min.css">\n\n <script defer src=\'/build/bundle.js\'></script>\n <script src="https://www.google.com/recaptcha/api.js" async defer></script>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>\n <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>\n <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>\n</head>\n\n<body>\n</body>\n</html>\nRun Code Online (Sandbox Code Playgroud)\n\n我的 main.svelte
\n\n<script>\n import swal from "sweetalert";\n\n function verifyUser() {\n swal({\n title: "Please wait a minute!",\n text: "Do not close or exit this tab, …Run Code Online (Sandbox Code Playgroud) 我是 Svelte 的新手,犯了一个菜鸟错误。我有一个到服务器的 websocket 连接,我正在记录数百条消息并将它们添加到商店,但页面根本不更新。
应用程序.svelte
<script>
import Socket from "./Socket.svelte"
import msgs from './stores'
</script>
<main>
<Socket items="{$msgs}"/>
</main>
Run Code Online (Sandbox Code Playgroud)
Socket.svelte
<script>
export let items
</script>
{items.length}
{#if items}
{#each items as msg, i}
<p>{i} {msg}</p>
{/each}
{:else}
<p class="loading">waiting...</p>
{/if}
Run Code Online (Sandbox Code Playgroud)
套接字.js
import { readable, writable } from 'svelte/store';
let msgs = []
const msgStore = readable(msgs)
export default msgStore
const socket = new WebSocket("ws://localhost:8080/socket");
socket.binaryType = "arraybuffer";
socket.onopen = function (event) {
msgs = [...msgs, "Connected"];
};
socket.onmessage = …Run Code Online (Sandbox Code Playgroud) 是否可以创建一个组件并以编程方式将事件侦听器附加到它?
我知道这对于<svelte:component/>通过传播使用道具很容易实现{ ...props }。我想知道是否可以实现类似的东西来附加事件侦听器。
例如,在下面的例子中,我想以编程方式连接on:message到A和on:count到B:
<!-- App.svelte -->
<script>
import A from './A.svelte';
import B from './B.svelte';
let message = 'Hi there ';
let count = 0;
const components = [{
component: A,
props: { message },
listeners: { message: (m) => { console.log(`They say "${m}"`); } }
}, {
component: B,
props: { count },
listeners: { click: () => { count++; } }
}];
</script>
{#each …Run Code Online (Sandbox Code Playgroud) 我对如何创建自定义元素 API 有疑问。我已按照文档进行操作,但收到以下警告:
生成自定义元素时使用 'tag' 选项。您是否忘记了 'customElement: true' 编译选项?(Link.svelte: 1:16)
我在编译器选项中标记了customElement: true。
我迷路了……有人可以帮助我吗?
开发模式使用npm run dev,发布模式使用npm build
我怎么知道它当前是建立在开发模式上还是不在代码中,例如:
<script>
import {onMount} from 'svelte';
onMount(function(){
if(DEVMODE) { // --> what's the correct one?
console.log('this is x.svelte');
}
})
</script>
Run Code Online (Sandbox Code Playgroud) 我的苗条项目有以下问题
主文件
import App from './App.svelte';
const app = new App({
target: document.body,
});
export default app;
Run Code Online (Sandbox Code Playgroud)
第一行返回警告
插件打字稿:@rollup/plugin-typescript TS2307:找不到模块“./App.svelte”或其相应的类型声明。
但我的配置看起来没问题我确实安装并添加"@tsconfig/svelte": "^2.0.1",到我的 tsconfig
汇总配置文件
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';
import css from 'rollup-plugin-css-only';
import preprocess from 'svelte-preprocess';
import alias from '@rollup/plugin-alias';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
} …Run Code Online (Sandbox Code Playgroud) svelte-3 ×10
svelte ×8
javascript ×3
bit-shift ×1
bulma ×1
html ×1
materialize ×1
render ×1
rollup ×1
rollupjs ×1
svelte-store ×1
typescript ×1