Vue.js投票组件– vue-poll

Vue.js投票组件– vue-poll
插件名称 vue-poll
发布时间 2020年9月8日
插件作者 ppietris

Vue.js 2应用程序的类似Twitter的表决组件。

范例(NPM)

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>

范例(CDN)

<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>

选项

  • question(必填)(字符串html)投票的问题。
  • 答案(必填)(数组)投票答案的数组。值(必填)(整数) 每个答案的唯一值answers (必填)(string-html) 答案的文字投票(必填)(整数) 答案的投票选择(当倍数为true时需要)(布尔值) 答案的选择状态custom_class(可选)(字符串) answer元素的定制CSS类
  • showResults(可选)(布尔值)(默认值:false)将此设置为true可跳过投票并显示投票结果
  • finalResults(可选)(布尔值)(默认值:false)将此设置为true可跳过投票并显示投票结果。优胜者将突出显示
  • 多个(可选)(布尔值)(默认值:false)将此设置为true可进行多次投票
  • SubmitButtonText(可选)(字符串)(默认值:Submit)多次投票提交按钮的文本
  • customId(可选)(数字)一个自定义ID,将通过addvote方法返回

方法

addvote(返回对象)

添加投票回调。它返回一个对象,其中包括:答案的值,答案的票数,民意调查的总票数和自定义ID