这只是带有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>
我认为这个问题与我的代码无关,但是我尝试共享一些技巧。因为它有同样的问题。希望您能帮助我解决这个问题。
谢谢