1. 效果演示

2. 主要知识点

  • 使用slot分发内容
  • 动态组件
  • 组件通信
  • 实例的生命周期
  • 表单

3. 遇到的问题

  • bus 通信 第一次 $on 监听不到

    1. // 解决bus 第一次通信 $on 监听不到
    2. this.$nextTick(function () {
    3.       if (_this.totalSize - 1 == _this.order) {
    4.          bus.$emit('submiteDisabled', disabledStatus)
    5.       } else {
    6.          bus.$emit('nextStepDisabled', disabledStatus)
    7.       }
    8.  })

  • bus 通信 $on 多次触发

    1. //  bus传值之后要进行销毁， 尤其是跳转页面进行使用的时候
    2. beforeDestroy() {
    3.      if (this.totalSize - 1 == this.order) {
    4.             bus.$off('submiteDisabled')
    5.       } else {
    6.             bus.$off('nextStepDisabled')
    7.       }
    8. },

4. 代码整理

  • HTML

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>答题卡</title>
    6.     <link rel="stylesheet" href="./css/style.css">
    7. </head>
    8. <body>
    9.     <div id="app">
    10.         <main-component v-for="(question, index) in questions" :key="index" :title="question.title" :order="index"
    11.             v-if="index === currentOrder" :content="question.chooses">
    12.             <template slot="title" slot-scope="props">
    13.                 <span>{{props.order}}. {{props.title}}</span>
    14.             </template>
    15.             <template slot="content" slot-scope="props">
    16.                 <component :is="props.type"
    17.                 :datas="question.chooses.values"
    18.                 :selected = "question.chooses.selected"
    19.                 :order = "index"
    20.                 :total-size = "questions.length"
    21.                 v-if="props.type != ''"></component>
    22.                 <textarea-component :value="question.chooses.value"
    23.                     :order="index"
    24.                     :total-size = "questions.length" v-else></textarea-component>
    25.             </template>
    26.             <template slot="functionalDomain">
    27.                 <button-component :now-order = "currentOrder"
    28.                     :total-elements = "questions.length"
    29.                     :next-step-disabled = "true"
    30.                     ></button-component>
    31.             </template>
    32.         </main-component>
    33.     </div>
    34.     <script src="./js/vue.js"></script>
    35.     <script src="./js/index.js"></script>
    36. </body>
    37. </html>

  • JS

    1. var bus = new Vue();
    2. Vue.component('main-component', {
    3.     props: {
    4.         order: Number,
    5.         title: String,
    6.         content: {
    7.             type: Object
    8.         }
    9.     },
    10.     template: '<div class="main">\
    11.                 <div class="title">\
    12.                     <slot name="title" :title="mytitle" :order="myorder + 1"></slot>\
    13.                 </div>\
    14.                 <div class="content">\
    15.                     <slot name="content" :type="typeSelect"></slot>\
    16.                 </div>\
    17.                 <div class="footer">\
    18.                     <slot name="functionalDomain" ></slot>\
    19.                 </div>\
    20.             </div>',
    21.     data: function () {
    22.         return {
    23.             mytitle: this.title,
    24.             myorder: this.order
    25.         }
    26.     },
    27.     computed: {
    28.         typeSelect: function () {
    29.             let type_co = this.content.type;
    30.             if ('radio' == type_co || 'checkbox' == type_co) {
    31.                 return type_co + '-component';
    32.             }else{
    33.                 return '';
    34.             }
    35.         }
    36.     },
    37. });
    38. Vue.component('radio-component', {
    39.     props:{
    40.         selected: String,
    41.         datas:Array,
    42.         order: Number,
    43.         totalSize: Number
    45.     },
    46.     template: '<div>\
    47.                     <label v-for="(item, index) in mydatas" :key="index"><input type="radio" :value="item.value" v-model="results" />{{item.name}}</label>\
    48.                 </div>',
    49.     data:function (){
    50.         return {
    51.             results: this.selected,
    52.             mydatas: this.datas
    53.         }
    54.     },
    55.     methods: {
    56.         updatNextStepStatus: function (val) {
    58.             let disabledStatus = true;
    59.             let _this = this;
    60.             if (val != '') {
    61.                 disabledStatus = false;
    62.             }
    63.             // 解决bus 第一次通信 $on 监听不到
    64.             this.$nextTick(function () {
    65.                 if (_this.totalSize - 1 == _this.order) {
    66.                     bus.$emit('submiteDisabled', disabledStatus)
    67.                 } else {
    68.                     bus.$emit('nextStepDisabled', disabledStatus)
    69.                 }
    71.             })
    73.         }
    74.     },
    75.     watch: {
    76.         results: function (val) {
    77.             this.updatNextStepStatus(val);
    78.             bus.$emit('valueChange', this.order, val)
    79.         },
    80.         selected: function (val) {
    81.             this.results = val
    82.         }
    83.     },
    84.     mounted() {
    85.         this.updatNextStepStatus(this.results);
    86.     },
    87.     beforeDestroy() {
    88.         if (this.totalSize - 1 == this.order) {
    89.             bus.$off('submiteDisabled')
    90.         } else {
    91.             bus.$off('nextStepDisabled')
    92.         }
    93.     },
    94. });
    95. Vue.component('checkbox-component', {
    96.     props: {
    97.         selected: Array,
    98.         datas: Array,
    99.         order: Number,
    100.         totalSize: Number
    101.     },
    102.     template: '<div>\
    103.                     <label v-for="(item, index) in mydatas" :key="index"><input type="checkbox" :value="item.value" v-model="results" />{{item.name}}</label>\
    104.                 </div>',
    105.     data: function () {
    106.         return {
    107.             results: this.selected,
    108.             mydatas: this.datas
    109.         }
    110.     },
    111.     methods: {
    112.         updatNextStepStatus: function (newValue, oldValue) {
    113.             let disabledStatus = true;
    114.             let _this = this;
    115.             if (oldValue.length < 2 && newValue.length < 2) {
    116.                 return;
    117.             } else if (oldValue.length >= 2 && newValue.length < 2) {
    118.                 disabledStatus = true;
    119.             } else if (newValue.length >= 3){
    120.                 alert("多选，最多选择3个选项")
    121.             }else{
    122.                 disabledStatus = false;
    123.             }
    124.             // 解决bus 第一次通信 $on 监听不到
    125.             this.$nextTick(function () {
    126.                 if (_this.totalSize - 1 == _this.order) {
    127.                     bus.$emit('submiteDisabled', disabledStatus)
    128.                 } else {
    129.                     bus.$emit('nextStepDisabled', disabledStatus)
    130.                 }
    132.             })
    133.         }
    134.     },
    135.     watch: {
    136.         results: function (newValue, oldValue) {
    137.             this.updatNextStepStatus(newValue, oldValue);
    138.             bus.$emit('valueChange', this.order, newValue)
    139.         },
    140.         selected: function (val) {
    141.             this.results = val
    142.         }
    143.     },
    144.     mounted() {
    145.         this.updatNextStepStatus(this.results,[]);
    146.     },
    147.     beforeDestroy() {
    148.         if (this.totalSize - 1 == this.order) {
    149.             bus.$off('submiteDisabled')
    150.         } else {
    151.             bus.$off('nextStepDisabled')
    152.         }
    153.     },
    154. });
    155. Vue.component('textarea-component', {
    156.     props: {
    157.         value: String,
    158.         order: Number,
    159.         totalSize: Number
    160.     },
    161.     template: '<textarea v-model="results" placeholder="不少于100字"></textarea>',
    162.     data: function () {
    163.         return {
    164.             results: this.value,
    165.         }
    166.     },
    167.     methods: {
    168.         updatNextStepStatus: function (newValue, oldValue) {
    170.             let disabledStatus = true;
    171.             let _this = this;
    172.             if (newValue.length > 0 && newValue.length <= 5) {
    173.                 disabledStatus = false;
    174.             }else{
    175.                 disabledStatus = true;
    176.             }
    177.             // 解决bus 第一次通信 $on 监听不到
    178.             this.$nextTick(function () {
    179.                 if (_this.totalSize - 1 == _this.order) {
    180.                     bus.$emit('submiteDisabled', disabledStatus)
    181.                 }else{
    182.                     bus.$emit('nextStepDisabled', disabledStatus)
    183.                 }
    185.             })
    187.         }
    188.     },
    189.     watch: {
    190.         results: function (newValue, oldValue) {
    191.             this.updatNextStepStatus(newValue, '');
    192.             bus.$emit('valueChange', this.order, newValue)
    193.         },
    194.         value: function (val) {
    195.             this.results = val
    196.         }
    197.     },
    198.     mounted() {
    199.         this.updatNextStepStatus(this.results, '');
    200.     },
    201.     beforeDestroy() {
    202.         if (this.totalSize - 1 == this.order) {
    203.             bus.$off('submiteDisabled')
    204.         }else{
    205.             bus.$off('nextStepDisabled')
    206.         }
    208.     },
    209. });
    210. Vue.component('button-component', {
    211.     props: {
    212.         basicClasses: {
    213.             type: Object,
    214.             default: function () {
    215.                 return {
    216.                     'button-white': true
    217.                 }
    218.             }
    219.         },
    220.         nextStepClasses: {
    221.             type: Object,
    222.             default: function () {
    223.                 return {
    224.                     'button-primary': true
    225.                 }
    226.             }
    227.         },
    228.         nextStepDisabled:{
    229.             type: Boolean,
    230.             default: false
    231.         },
    232.         nowOrder: Number,
    233.         totalElements: Number
    234.     },
    235.     template: '<div>\
    236.                     <button class="btn" :disabled="nextStepStatus" :class="primary" \
    237.                         v-if="order  != total - 1" @click="handleNextStep">下一步</button>\
    238.                     <button class="btn" :disabled="submiteStatus" :class="primary" \
    239.                         v-if="order  == total - 1" @click="handleSubmit">提交</button>\
    240.                     <button class="btn" :disabled="false" :class="basic"\
    241.                         v-if= "order  != 0" @click="handleBackStep">上一步</button>\
    242.                     <button class="btn" :disabled="false" @click="handleReset" :class="basic">重置</button>\
    243.                 </div>',
    244.     data() {
    245.         return {
    246.             basic: this.basicClasses,
    247.             primary: this.nextStepClasses,
    248.             nextStepStatus: this.nextStepDisabled,
    249.             order: this.nowOrder,
    250.             total: this.totalElements,
    251.             submiteStatus: true
    252.         }
    253.     },
    254.     methods: {
    255.         handleNextStep: function () {
    256.             bus.$emit('nextStep')
    257.         },
    258.         handleBackStep: function () {
    259.             bus.$emit('backStep')
    260.         },
    261.         handleSubmit: function () {
    262.             bus.$emit('submit')
    263.         },
    264.         handleReset: function () {
    265.             let _this = this;
    266.             bus.$emit('reset', _this.order)
    267.         }
    268.     },
    269.     mounted() {
    270.         let _this = this;
    271.         bus.$on('nextStepDisabled', function (status) {
    272.             _this.nextStepStatus = status
    274.         });
    275.         bus.$on('submiteDisabled', function (status) {
    276.             _this.submiteStatus = status
    278.         })
    279.     },
    281. });
    282. var app = new Vue({
    283.     el: "#app",
    284.     data: {
    285.         currentOrder: 0,
    286.         questions: [
    287.             {
    288.                 title: '请问您的性别是？',
    289.                 chooses: {
    290.                     type: 'radio',
    291.                     values: [{ 'name': '男', 'value': '1' }, { 'name': '女', 'value': '2' }, { 'name': '保密', 'value': '3' }],
    292.                     selected: ''
    293.                 }
    294.             },
    295.             {
    296.                 title: '请选择您的兴趣爱好？',
    297.                 chooses: {
    298.                     type: 'checkbox',
    299.                     values: [{ 'name': '看书', 'value': 'read book' },
    300.                     { 'name': '游泳', 'value': 'swim' },
    301.                     { 'name': '跑步', 'value': 'run' },
    302.                     { 'name': '看电影', 'value': 'see movie' }],
    303.                     selected: []
    304.                 }
    305.             },
    306.             {
    307.                 title: '请介绍一下你自己',
    308.                 chooses: {
    309.                     type: 'text',
    310.                     value: ''
    311.                 }
    312.             },
    314.         ]
    315.     },
    316.     methods: {
    317.         handleNext: function () {
    318.             let current = this.currentOrder;
    319.             if (++current >= this.questions.length) {
    320.                 return;
    321.             }else{
    322.                 this.currentOrder += 1;
    323.             }
    325.         },
    326.         handleBack: function () {
    327.             let currentOrder = this.currentOrder;
    328.             if (-- currentOrder < 0) {
    329.                 return;
    330.             }else{
    331.                 this.currentOrder -= 1;
    332.             }
    333.         },
    334.         handleReset: function (order, val) {
    335.             let currentQuestion = this.questions[order].chooses;
    336.             if (currentQuestion.type == 'radio') {
    337.                 currentQuestion.selected = val === undefined ? '': val;
    338.             } else if (currentQuestion.type == 'checkbox') {
    339.                 currentQuestion.selected = val === undefined ? [] : val;
    340.             } else {
    341.                 currentQuestion.value = val === undefined ? '' : val
    342.             }
    343.         }
    344.     },
    345.     mounted: function () {
    346.         let _this = this;
    347.         bus.$on('nextStep', function (msg) {
    348.             let current = _this.currentOrder;
    349.             if (++current >= _this.questions.length) {
    350.                 return;
    351.             } else {
    352.                 _this.currentOrder += 1;
    353.             }
    354.         });
    355.         bus.$on('backStep', function (msg) {
    356.             let currentOrder = _this.currentOrder;
    357.             if (--currentOrder < 0) {
    358.                 return;
    359.             } else {
    360.                 _this.currentOrder -= 1;
    361.             }
    362.         });
    363.         bus.$on('submit', function (msg) {
    364.             console.log('提交')
    365.         });
    366.         bus.$on('reset', function (order) {
    367.             _this.handleReset(order)
    368.         });
    369.         bus.$on('valueChange', function (order, val) {
    370.             _this.handleReset(order, val)
    371.         });
    372.     }
    373. })

  • CSS

    1. [v-cloak]{
    2.     display: none;
    3. }
    4. .btn {
    5.     border: none;
    6.     outline:none;
    7.     color: white;
    8.     padding: 7px 25px;
    9.     text-align: center;
    10.     text-decoration: none;
    11.     display: inline-block;
    12.     font-size: 16px;
    13.     margin: 4px 2px;
    14.     cursor: pointer;
    15. }
    16. .button-white {
    17.     background-color: rgb(217, 219, 223);
    18.     color: #000000;
    19. }
    20. .button-white:active {
    21.     background-color: rgb(134, 149, 179);
    22.     color: #000000;
    23. }
    24. .button-primary {
    25.     background-color: rgb(39, 126, 228);
    26.     border: none;
    27.     color: white;
    28.     padding: 7px 25px;
    29.     text-align: center;
    30.     text-decoration: none;
    31.     display: inline-block;
    32.     font-size: 16px;
    33.     margin: 4px 2px;
    34.     cursor: pointer;
    35. }
    36. .button-primary:active {
    37.     background-color: rgb(185, 171, 31);
    38. }
    39. .button-primary:disabled {
    40.     background-color: rgb(115, 122, 130);
    41. }

5. 升级

  • 组件重复内容很多，可合并

调查问卷WebApp的更多相关文章

  1. "琳琅满屋"调查问卷 心得体会及结果分析

    ·关于心得体会       当时小组提出这个校园二手交易市场的时候,就确定了对象范围,仅仅是面向在校大学生,而且在我们之前就已经有了很多成功的商品交易的例子可以让我们去借鉴,再加上我们或多或少的有过网 ...

  2. JavasScript实现调查问卷插件

    原文:JavasScript实现调查问卷插件 鄙人屌丝程序猿一枚,闲来无事,想尝试攻城师是感觉,于是乎搞了点小玩意.用js实现调查问卷,实现了常规的题型,单选,多选,排序,填空,矩阵等. 遂开源贴出来 ...

  3. 关于“Durian”调查问卷的心得体会

    这周我们做了项目着手前的客户需求调查,主要以调查问卷的方式进行.其实做问卷调查并不是想象中的那么简单,首先要确定问卷调查的内容,每一个问题都要经过深思熟虑,字字斟酌,既要切合问卷主要目的,又要简洁扼要 ...

  4. 从Adobe调查问卷看原型设计工具大战

    近年国内外原型设计工具新品频出,除了拥趸众多的老牌Axure在RP 8之后没有什么大的动作,大家都拼了命地在出新品.今天 inVision 的 Craft 出了 2.0 的预告视频,明天 Adobe ...

  5. Scrum立会报告+燃尽图（十一月十七日总第二十五次）：设计调查问卷；修复上一阶段bug

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...

  6. <问吧>调查问卷心得体会

    <问吧>调查问卷心得与体会 在这之前,我们已经组成了一个六个人的小团队---“走廊奔跑队”,我们这次做的这个项目的名称是:问吧.在项目实施之前,我们必做的一步就是需求分析,目的就是充分了解 ...

  7. android 实现调查问卷-单选-多选

    非常久没写东西了.今天来总结下有关android调查问卷的需求实现. 转载请加地址:http://blog.csdn.net/jing110fei/article/details/46618229 先 ...

  8. 自动化测试调查问卷送《QTP自动化测试最佳实践》

    自动化测试调查问卷送<QTP自动化测试最佳实践> http://automationqa.com/forum.php?mod=viewthread&tid=2308&fro ...

  9. HDU - 6344 2018百度之星资格赛 1001调查问卷（状压dp）

    调查问卷  Accepts: 1289  Submissions: 5642  Time Limit: 6500/6000 MS (Java/Others)  Memory Limit: 262144 ...

随机推荐

  1. PAT 甲级 1028 List Sorting (25 分)（排序，简单题）

    1028 List Sorting (25 分)   Excel can sort records according to any column. Now you are supposed to i ...

  2. Delphi实现树型结构具体实例

    unit Unit1;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, ...

  3. .Netcore 2.0 Ocelot Api网关教程（7）- 限流

    本文介绍Ocelot中的限流,限流允许Api网关控制一段时间内特定api的总访问次数.限流的使用非常简单,只需要添加配置即可. 1.添加限流 修改 configuration.json 配置文件,对  ...

  4. Intellij IDEA 激活到2100年教程

    1.先看效果   2.下载 JetbrainsCrack-4.2-release-enc.jar,提取码:9os6.并将下载后的文件复制到$ {InstallDir} / bin,$ {Install ...

  5. 【miscellaneous】使用Google语音识别引擎（Google Speech API）[3月5日修改]

    原文:http://blog.csdn.net/dlangu0393/article/details/7214728#comments 近期重写本文,暂时禁止评论. 最近在使用Qt编写一个客户端程序的 ...

  6. 【Qt开发】【ARM-Linux开发】 QT在ARM上显示字体的问题

    在PC机上利用QT开发的应用程序在设置字体时,在PC上运行,可根据自己的设置,字体随之变大或变小.而移植到ARM上运行时发现,显示字体与所设置的字体不用,字体普遍偏小.经过上网搜索发现,是环境变量字库 ...

  7. 三角箭头 css实现

    效果图: 1.html 代码 <div>较昨日 <span class="dot-up"></span> 20%</div> < ...

  8. 编写一个自定义事件类，包含on/off/emit/once方法

    function Event() { this._events = {}; } Event.prototype.on = function(type, fn) { if (!this._events[ ...

  9. kafka2.10集群搭建(一)

    一．kafka集群搭建 1.上传解压 2.配置文件的配置 1.修改 server.properties文件 broker.id=11 #192.168.199.11 #21 一般使用ip后三位 lis ...

  10. 使用jbc查询数据封装成对象的工具类

    适用于获取Connection对象的util package com.briup.myDataSource; import java.io.FileReader; import java.io.Inp ...