Vue.js微型問卷調查平臺

時間 2019-11-08

原文原文鏈接

使用Vue.js實現一個微型問卷調查管理平臺

入門Vue有幾周時間了，學習過程也只是寫一些小demo，好比TodoList，購物車之類的，瞭解了Vue的一些基礎的特性和使用方法。恰好年後開學就想作個稍微像樣點的東西，因而就找出了16年百度前端學院的任務五十來做爲本次將要實現的項目。廢話很少說，下面看東西。前端

連接地址

項目地址：GitHub
預覽地址：在線預覽vue

任務描述

傳送門：任務地址git

技術棧

Vue.js：使用最新的Vue2的語法
vue-router：單頁應用必備的路由管理
ES6：使用ES6語法實現大部分功能
Sass：CSS預處理
LocalStorage：本地存儲，方便保存用戶的問卷數據

問題及解決

全選狀態的切換好比：
點擊全選切換全部問卷的選中狀態
點擊任意問卷時計算是否所有問卷均選中來實時控制全選按鈕的樣式

/*問卷的check按鈕*/
<li @click="checkItem(item)"><i :class="{'checked': item.checked}"></i></li>

/*全選按鈕*/
<p @click="checkAll(isCheckedAll)"><i :class="{'checked': isCheckedAll}"></i></p>

methods: {
        checkItem(item, flag = null) {
            if (typeof item.checked === 'undefined') {
                Vue.set(item, 'checked', true);
            }
            else if (flag !== null) {
                item.checked = !flag;
            }
            else {
                item.checked = !item.checked;
            }
        },

        checkAll(flag) {
            this.quList.forEach( item => {
                this.checkItem(item, flag)
            });
        }
    },
    
    /*經過ES6的數組every方法來很方便的得知的問卷列表中所有問卷是否爲全選或非全選*/
    computed: {
        isCheckedAll() {
            return this.quList.every( item => item.checked);
        }
    }

操做問卷時提示用戶的彈窗功能
點擊操做按鈕會執行一個Generator函數
用戶可選擇提示框中的肯定/取消來決定是否執行該操做

/*問卷的編輯按鈕*/
        <span v-if="!item.state" @click="iterator = editItem(item); iterator.next()">編輯</span>

        /*提示框的選擇按鈕*/
        <span @click="iterator.next(); isShowPrompt = false">肯定</span>
        <span @click="isShowPrompt = false">取消</span>
        
        /*經過Generator函數來控制是否要進行下一步操做*/
        *editItem(item) {
            yield this.showPrompt(`確認要編輯《${item.title}》？`);
            yield this.$router.push({name: 'Edit', params: {id: item.id}});
        }

用戶回答問卷提交過程的檢查必填項是否已填

/*執行提交操做時，會先調用下面的函數，來檢查用戶是否已經填寫全部必填的項目，不然return false不提交*/
        requireValidate() {
            let textareas = document.querySelectorAll('textarea');
            return [].every.call(textareas, item => {
                if (item.hasAttribute('required') && item.value.trim() === '') {
                    return false;
                }
                return true;
            })
        }

用戶在填寫問卷時會保存一份答案的數據
最後用戶提交時後將全部答案合併在一個對象裏方便提交至服務器
這個項目非真實線上項目因此我只打印在控制檯看看）

/*文本框的答案由一個字符串保存*/
        <textarea v-model="item.answer"></textarea>
        /*單選鈕的答案是選中的選項的索引，也是由字符串保存*/
        <input v-if="item.type === 'radio'" :type="item.type" @change="item.answer = optIndex">
        /*複選框的答案是選中的選項的索引，由一個數組保存*/
        <input v-else :type="item.type" @change="checkboxAnswer($event, optIndex, item.answer)">

問卷編輯頁面裏的坑就比較多了，我就不一一貼出來了，我說說幾個我印象比較深入的

編輯頁面中每一個問題的題目和選項均可以點擊後切換成input來進行修改，我用的是樣式來控制他們的顯示和隱藏，這裏由於編輯選項時會影響處處於其父級元素的題目的input的顯示，因此我在這個部分加了雙重驗證，若是隻是編輯題目就控制一項class，若是是編輯選項就要先隱藏題目的input，而後顯示出選項的input。github
因爲修改問卷可能會修改多處地方，因此不用每修改一處都保存一次，因此我把數據進行了複製而不是引用，在最後由用戶決定是否保存修改後的問卷。
這個頁面的Generator函數有的兩個yield有的是三個yield因此我在執行next()以前加了&&判斷，這樣就不會在控制檯報錯。
使用了一個子組件，就是日曆選擇器，經過$emit()將選擇的日期傳給父組件的input中。
......vue-router