COMPONENTS
Vue CleaveJS Component
- Features
- Reactive v-model value
- You can change input value programmatically
- Reactive options, read caveats below
- You can change config options dynamically
- Component will watch for any changes and redraw itself
- You are suggested to modify config via Vue.set
- Compatible with Bootstrap, Bulma or any other CSS framework
- Works with validation libraries
- Option to disable raw mode to get masked value
- Reactive v-model value
<template>
<div>
<cleave v-model="cardNumber" :options="options" class="form-control" name="card"></cleave>
</div>
</template>
<script>
import Cleave from 'vue-cleave-component';
export default {
components: { Cleave },
data () {
return {
cardNumber: null,
options: {
creditCard: true,
delimiter: '-',
}
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Vue-poll
A Twitter-like vote component, made with Vue.js 2. DEMO
<template>
<div>
<vue-poll v-bind="options" @addvote="addVote"/>
</div>
</template>
<script>
import VuePoll from 'vue-poll'
export default {
data() {
return {
options: {
question: 'What\'s your favourite <strong>JS</strong> framework?',
answers: [
{ value: 1, text: 'Vue', votes: 53 },
{ value: 2, text: 'React', votes: 35 },
{ value: 3, text: 'Angular', votes: 30 },
{ value: 4, text: 'Other', votes: 10 }
]
}
}
},
components: {
VuePoll
},
methods: {
addVote(obj){
console.log('You voted ' + obj.value + '!');
}
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
VueNut
Vuenut is a component to develop faster and more fluently.
Vue-loading
<loader-dots :color="'#f5cd79'" :background="'#ea8685'" :duration="1" :size="15" />
1