插件名称 | vue-poll |
---|---|
发布时间 | 2020年9月8日 |
插件作者 | ppietris |
Vue.js 2应用程序的类似Twitter的表决组件。
vue-poll
在自定义组件中定义组件标记。
例如在您的my-poll.vue
:
<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>
<body>
<div id="app">
<vue-poll v-bind="options" @addvote="addVote"/>
</div>
<script src="https://unpkg.com/vue-poll/dist/vue-poll.min.js"></script>
<script>
Vue.use(VuePoll);
new Vue({
el: '#app'
data: function() {
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 }
]
}
}
},
methods: {
addVote: function(obj){
console.log('You voted ' + obj.value + '!');
}
}
});
</script>
</body>
添加投票回调。它返回一个对象,其中包括:答案的值,答案的票数,民意调查的总票数和自定义ID