Svelte SPA按钮单击不会恢复到正常样式状态

时间:2020-11-01 00:47:43

标签: javascript css single-page-application svelte bulma

这只是带有javascript苗条框架的SPA。

我有使用bulma CSS框架的按钮。正如您在预览中看到的那样,当我单击按钮,并且光标离开按钮时,按钮样式状态仍处于单击状态。

该如何解决?所以点击后,按钮又回到了正常样式状态?

我再次用苗条写法

您可以签入此svelte REPL

<svelte:head>
    <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Bulma!</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</svelte:head>
<script>
    let stepIndex = 0;
    let steps = [
        {
            text: 'Welcome to the 100 days project to help us better',
            buttonText: 'Next'
        },
        {
            text: 'We believe biological conditions influence psychological situations',
            buttonText: 'Next'
        },
        {
            text: 'Life begins with us thinking that we are alive',
            buttonText: 'Next'
        },
        {
            text: 'Experience a better life after 100 days commitment',
            buttonText: 'Next'
        },
        {
            text: 'Do you want have a better life',
            buttonText: 'Yes!!!'
        }
    ];
    function next(data){
        stepIndex++;
    }
</script>

<div>
    <i class="fa fa-quote-left fa-2x fa-pull-left fa-border" aria-hidden="true"></i>
    <p class="is-size-4 has-text-grey has-text-weight-semibold">{steps[stepIndex].text}</p>
    <hr />
    <div class="columns is-mobile">
          <div class="column">
                <button class="button is-danger is-medium is-fullwidth is-outlined" on:click={()=>alert("Don't back, Just go forward!!!")}>
            <span class="icon"><i class="fa fa-arrow-left"></i></span><span>Back</span>
            </button>
            </div>
        <div class="column">
            <button class="button is-primary is-medium is-fullwidth is-outlined" on:click={()=>next()}>
                <span>{steps[stepIndex].buttonText}</span> <span class="icon"><i class="fa fa-arrow-right"></i></span>
            </button>
        </div>
    </div>
</div>

我认为这个问题与我的代码无关,但是我尝试共享一些技巧。因为它有同样的问题。希望您能帮助我解决这个问题。

谢谢

Example

0 个答案:

没有答案