组件用.vue还是.js_用Vue.js 2制作的类似Twitter的投票组件-CSDN博客

组件用.vue还是.js

投票 (Vue-poll)

A Vue.js component for voting.

用于投票的Vue.js组件。

View demo 查看演示 Download Source 下载源

先决条件 (Prerequisites)

Vue.js 2
Vue.js 2

正在安装 (Installing)

Using npm:

使用npm：

$ npm install vue-poll

Using cdn:

使用cdn：

<script src="https://unpkg.com/vue-poll/dist/vue-poll.min.js"></script>

范例(NPM) (Example (NPM))

Define vue-poll component markup inside your custom component.

在自定义组件内定义vue-poll组件标记。

For example in your my-poll.vue:

例如在您的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) (Example (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>

选件 (Options)

问题(必填)(字符串html) (question (required) (string-html))

The question of the poll.

投票的问题。
答案(必填)(数组) (answers (required) (array))

An array of the answers of the poll.

一组民意测验的答案。

value (required) (integer) A unique value for each answer

值(必填)(整数)每个答案的唯一值

text (required) (string-html) Answer's text

文字(必填)(string-html)答案的文字

votes (required) (integer) Answer's votes

投票(必填)(整数)答案的投票

custom_class (optional) (string) Custom css class for the answer element

custom_class(可选)(字符串) answer元素的定制CSS类
showResults(可选)(布尔值)(默认值：false) (showResults (optional) (boolean) (default: false))

Set this to true to skip the votting and show the results of the poll

将此设置为true可跳过投票并显示投票结果
finalResults(可选)(布尔值)(默认值：false) (finalResults (optional) (boolean) (default: false))

Set this to true to skip the votting and show the results of the poll. Winner will be highlighted

将其设置为true可跳过投票并显示投票结果。优胜者将突出显示