标签: svelte-3

Svelte 组件存储 - 加载状态到 - 来自 URL 哈希参数

如果我们有一个小号英格尔P年龄建有pplication斯维尔特与一群组件和我们保持我们当前的应用程序状态的店,有没有存放商店状态变化到一个推荐的方式当前URL的#散列部和能够从完整的 URL 重新加载相同的状态吗?

可以通过解析当前 URL 来手动完成location.search()

参数的存储可以通过location.search("key", "value").

一些问题:

  • 何时从 URL 加载状态?App init 入口点是什么?
  • 何时将状态从商店存储到 URL?有没有通用的方法来做到这一点?

javascript svelte svelte-3

3
推荐指数
1
解决办法
1288
查看次数

如何在 svelte 中呈现 html

我曾尝试通过将 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>”

html render svelte svelte-3

3
推荐指数
2
解决办法
3358
查看次数

将 MaterialCSS 或 Bulma 的 Sass 版本集成到 Svelte 中

我正在寻找有关如何将 Materializecss 或 Bulma 的 sass 版本集成到 Svelte 的说明。我的目标是能够将单个组件(如按钮组件或卡片组件)导入到单个 svelte 组件中。此外,我希望能够利用 Bulma 提供的 sass 变量。

我已经寻找了一些关于如何做到这一点的教程,但我还没有找到任何东西。

有任何想法吗?

materialize bulma svelte svelte-component svelte-3

3
推荐指数
1
解决办法
2724
查看次数

苗条如何使组件变脏

下面的代码片段是我们npm run devsvelte应用程序上执行时生成的内容。

    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)

谢谢

javascript bit-manipulation bit-shift svelte-3

3
推荐指数
1
解决办法
339
查看次数

带有 svelte 的 Google 验证码

所以我对 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>\n
Run 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)

javascript google-apps-script svelte-3

3
推荐指数
1
解决办法
3607
查看次数

Svelte 商店未在屏幕上更新

我是 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 svelte-store svelte-3

3
推荐指数
1
解决办法
4157
查看次数

Svelte v3 以编程方式创建一个带有 props 和事件监听器的组件

是否可以创建一个组件并以编程方式将事件侦听器附加到它?

我知道这对于<svelte:component/>通过传播使用道具很容易实现{ ...props }。我想知道是否可以实现类似的东西来附加事件侦听器。

例如,在下面的例子中,我想以编程方式连接on:messageAon:countB

<!-- 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)

svelte svelte-3

3
推荐指数
1
解决办法
1623
查看次数

Svelte 自定义元素 API

我对如何创建自定义元素 API 有疑问。我已按照文档进行操作,但收到以下警告:

生成自定义元素时使用 'tag' 选项。您是否忘记了 'customElement: true' 编译选项?(Link.svelte: 1:16)

复制代码

我在编译器选项中标记了customElement: true

我迷路了……有人可以帮助我吗?

svelte svelte-component svelte-3

3
推荐指数
1
解决办法
3361
查看次数

如何区分 Svelte 开发模式和构建模式?

开发模式使用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)

svelte svelte-3

3
推荐指数
5
解决办法
776
查看次数

插件打字稿:@rollup/plugin-typescript TS2307:找不到模块“./App.svelte”或其相应的类型声明

我的苗条项目有以下问题

主文件

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)

rollup typescript rollupjs svelte svelte-3

3
推荐指数
1
解决办法
916
查看次数