小白分享：我的一次Vue学习非寻常之路（章二）

导读：坦白讲，我是Java服务端研发，只知道Vue这么个前端编程语言，未曾任何学习过，仅仅是个小白。但为何突然学习Vue呢，这得益于一次需求研发，无奈前端资源紧张，恰这次需求实现是面向运营端，非C端用户，产品可以接受自己自测，毕竟初期也仅是他负责这个模块的间断性周期数据维护。鉴于此，我尝试着是否可以自己实现这个模块，毕竟虽然不懂，但是可以模仿其他模块，有示例可以参考，实在搞不定也可以请教前端指教一番。鉴于此，花费几天完成该模块的功能实现（包括表格、表单、表单验证、弹出框等等），鉴于此，写此篇回顾自己的非寻常学习路线。

1、实践案例

在实现相关功能中，总会遇到相关交互上的体验设计，譬如联动效果、表单验证等等，借助于毕竟java出身，有一定编程语言基础，况且曾经也业余的开发过相关前端，毕竟那都是早期的jQuery，或者Bootstrap了，那就顺便介绍相关实践案例吧。

1.1、联动效果

譬如实现，倘若选择【否】那就隐藏下面两个元素。怎么搞呢，想必传统我们采取把下面两行放在一个div中，然后设置其display:none，既然思路有了，那就搞呗。

<template lang="jade">
    .amount-config
        el-form(label-width='180px', :model="formData", :rules="rules", ref="form")
            el-form-item(label="是否限额", prop="amountLimited")
                    el-radio-group(v-model="formData.amountLimited")
                        el-radio(v-for="item in amountLimitedList", :key="item.code", :label="item.code") {{item.desc}}
            div(v-if="formData.amountLimited == 1")
                el-form-item(label="单笔限额", prop="singleLimit")
                    el-input(type="text", v-model.trim="formData.singleLimit", placeholder="仅支持正整数", :maxlength="11")
                el-form-item(label="单日限额", prop="dailyLimit")
                    el-input(type="text", v-model.trim="formData.dailyLimit", placeholder="仅支持正整数", :maxlength="11")                  
            el-form-item
                el-button(type="primary", @click="submitForm") 保存
                el-button(type="default", @click="closeDialog") 关闭
</template>

如上代码，我们可以发现，我们可以借助于vue的v:if指令，通过对formData.amountLimited的值改变从而控制div的display属性值。而formData.amountLimited的值，通过v-model指令注册给上面的radio元素绑定值，从而实现radio切换控制formData.amountLimited值的变化，进一步控制div的display属性。

1.2、form自定义校验

从上图我们可以看到，我们想要实现数字校验。

通过查看Element UI文档，照着示例，摸索。代码如下：

data() {
  var checkNumber = (rule, value, callback) => {
      console.log(value)
      if (!value) {
          return callback(new Error(rule.name + '不能为空'));
      }else if(!(/^\d*$/.test(value))){
          return callback(new Error(rule.name + '仅支持正整数'))
      }else{
          return callback()
      }
  };
  return {
      formData: {
          amountLimited: "",
          singleLimit: "",
          dailyLimit: "",
      },
      rules: {
          amountLimited: [
              {
                  required: true,
                  message: "请选择",
              }
          ],
          singleLimit: [
              {
                  required: true,
                  message: "仅支持正整数",
                  trigger: "blur"
              },
              {
                  name:"单笔限额",
                  validator: checkNumber,
                  trigger: "blur"
              }
          ],
          dailyLimit: [
              {
                  required: true,
                  message: "仅支持正整数",
                  trigger: "blur"
              },
              {
                  name:"单日限额",
                  validator: checkNumber,
                  trigger: "blur"
              }
          ],
      },
      amountLimitedList: []
  };

我们通过定义rules，设置每个字段的校验属性，其中required控制字段小红星效果，通过validator函数，自定义检验。

扩展阅读：https://element.eleme.cn/#/zh-CN/component/form

1.3、TimePicker组件默认值

如上图，当我们选择时间维度时，时间范围有默认值。

<template lang="jade">
    .time-config
        el-form(label-width='180px', :model="formData", :rules="rules", ref="form")
            el-form-item(label="是否限时", prop="timeLimited")
                el-radio-group(v-model="formData.timeLimited")
                    el-radio(v-for="item in timeLimitedList", :key="item.code", :label="item.code") {{item.desc}}
            div(v-if="formData.timeLimited == 1")
                el-form-item(label="时间维度", prop="timeClassify")
                    el-radio-group(v-model="formData.timeClassify")
                        el-radio(v-for="item in timeClassifyList", :key="item.code", :label="item.code" @change="changeTimeClassify(item.code)") {{item.desc}}
                el-form-item(label="时间范围")
                    <el-time-select v-model="formData.timeRangeStart" :picker-options="{start: '00:00',step: '00:01',end: '24:00'}" placeholder="选择时间"></el-time-select>  ~  
                    <el-time-select v-model="formData.timeRangeEnd" :picker-options="{start: '00:00',step: '00:01',end: '24:00'}" placeholder="选择时间"></el-time-select>
            el-form-item
                el-button(type="primary", @click="submitForm") 保存
                el-button(type="default", @click="closeDialog") 关闭
</template>

我们通过@change 指令为radio绑定事件

changeTimeClassify(code){
                this.formData.timeRangeStart = '00:00';
                this.formData.timeRangeEnd = '24:00';
            }

其实对于TimePicker ，倘若我们设置步长比如15分钟，但是就会导致无法定义自己的时间，无奈只得设置步长为00:01。

拓展阅读：https://element.eleme.cn/#/zh-CN/component/time-picker

2、归纳总结

总而言之，如果理解了Vue的设计思想，我们就可以很容易实现自己的功能，这相对于jQuery的操作Dom元素，差异还是蛮大的，最主要区别在于我们通过为HTML元素，借助于Vue的相关指令，控制HTML的属性值变化，从而实现HTML元素的相关交互效果，如果理解了数据的双向绑定思想，我们就可以快速实现一个自己模块了。

下面的是我的公众号二维码图片，欢迎关注，或公众号搜索【秋夜无霜】。