Edited at

Vue.js と Bulma でボタンにアクションつけるやつ


今日は、これをやりました

Bulma と Vue.js でボタンのべたなアクションどうやんのかなと


  • マウスの Hoover でボタンが反応するやつ

  • 入力値をAPIに渡して返ってくるまで待つみたいなやつ

button-action.gif

Bulma が用意してくれている class を Vue でいじるだけで簡単にできた


HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">

<div id="button" class="section">
<div class="field has-addons has-addons-right">
<div class="control">
<input class="input is-large" type="text" v-model="name" placeholder="wassap?">
</div>
<div class="control">
<a
class="button is-large is-danger"
v-bind:class="buttonStatus"
v-on:mouseover="mouseover"
v-on:mouseleave="mouseleave"
@click="loading(); api()">
Hey!
</a>
</div>
</div>
</div>


JS

var vm = new Vue({

el: '#button',
data: {
name: '',
buttonStatus: {
'is-focused': false,
'is-loading': false,
}
},
methods: {
mouseover: function () {
this.buttonStatus["is-focused"] = true
},
mouseleave: function () {
this.buttonStatus["is-focused"] = false
},
loading: function () {
this.buttonStatus["is-loading"] = true
},
api: function() {
// pretending api call which takes 5sec.
setTimeout(function() {
console.log(vm.name)
vm.buttonStatus["is-loading"] = false
}, "5000");
}
}
});

これだけで、なんとなくアプリがいい感じになってくるので不思議。UI 結構大事やな


CODEPEN

CODEPENで動くやつをここに貼っときます

Cheers,