Блог

Это просто SPA с javascript svelte framework.

У меня есть кнопки, использующие фреймворк bulma CSS. Как вы можете видеть в предварительном просмотре, когда я нажимаю кнопку и курсор покидает кнопку, состояние стиля кнопки все еще находится в состоянии щелчка.

как это решить? итак, после нажатия кнопка возвращается в нормальное состояние стиля?

Я пишу это снова в svelte

вы можете проверить в этом 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>
  

Я не думаю, что эта проблема не имеет ничего общего с моим кодом, но я пытаюсь поделиться некоторыми в svelte. потому что у него такая же проблема. желаю, чтобы вы помогли мне решить эту проблему.

Спасибо