我正在试用 bulma。我想要的是 show the loading icon over a button当它被点击时。
这是头部部分:
<head>
<meta charset="UTF-8">
<title>Button loading in Bulma</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
</head>
这是正文代码:
<div class="container">
<!--Vue container-->
<div id="app">
<div class="tile notification is-info">
<div class="column">
<h1>Newsletter</h1>
<form>
<!-- Email -->
<div class="field">
<label class="label" for="email">Email</label>
<div class="control">
<input class="input is-small" type="email" id="email" placeholder="you@somewhere.com" autofocus>
</div>
</div>
<!-- Submit button -->
<div class="field">
<div class="control">
<button class="button is-primary" @click="loadingClass = 'is-loading'" :class="{ loadingClass }">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
这是 vue.js 脚本
<script src="https://unpkg.com/vue"></script>
<script>
var app = new Vue({
el: '#app',
data: {
loadingClass: ''
}
})
</script>
我无法让它工作。我错过了什么？
解决方案:
好吧，我找到了解决方法 here in the docs , 所以我按如下方式修复了它:
表格:
<!-- Submit button -->
<div class="field">
<div class="control">
<button class="button is-primary" v-bind:class="{ 'is-loading' : loading }">Submit</button>
</div>
</div>
脚本:
<script>
var app = new Vue({
el: '#app',
data: {
loading: false
}
})
</script>
当我在控制台 app.loading=true; 中更改时，按钮会更改为“正在加载”，反之亦然 app.loading=false;
就是这样。
最佳答案
在您的 data: 中，您想要一个纯粹的页面状态描述，所以输入 clicked : false
然后在您的处理程序中，修改您的状态:@click="clicked = true"
然后在您的动态类列表中，放入 bulma 加载类。
:class="{'button':true, 'is-primary':true, 'is-active':clicked}"
这包括了吗？
关于javascript - 单击按钮时，Vue JS 添加 bulma 类正在加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47458421/