• vue监听表单项填写完整

    一、序言

            1、业务需求：

                    表单项填写了，进度条就增加相应的比例，表单项未填写，进度条就 减少相应的比例

            2、目标效果：

     

     

     

     

    二、原理

            1、如何监测表单项是否有值，可以专门用对象存储进度条增幅比例。如果表单项有值则存储，没有值则赋值为0，然后表单项使用@change事件监听表单项是否变化，然后调用一个公共的计算进度条的方法，这个方法去遍历calculateIntegrityForm对象的key对应的value值，然后累加这个value值，最后赋值给进度条

    1. form: {    // 存储表单项的表单
    2.     name: '',
    3.     region: '',
    4.     type: [],
    5.     resource: '',
    6. },
    7. calculateIntegrityForm: {    // 存储进度条比例的表单
    8.     name: 0,
    9.     region: 0,
    10.     type: 0,
    11.     resource: 0,
    12. }
    1.     // 监听特殊资源变化
    2.     resourceChangeFn(val) {
    3.       this.form.resource = val;
    4.       this.updateProgress('resource', 25);
    5.     },
    6.     // 监听活动性质变化
    7.     typeChangeFn(val) {
    8.       this.form.type = val;
    9.       this.updateProgress('type', 25);
    10.     },
    11.     // 监听活动区域变化
    12.     regionChangeFn(val) {
    13.       this.form.region = val;
    14.       this.updateProgress('region', 25);
    15.     },
    16.     // 监听活动名称变化
    17.     nameChangeFn(val) {
    18.       this.form.name = val;
    19.       this.updateProgress('name', 25);
    20.     },
    21.     // 监听进度条变化
    22.     updateProgress(key, num) {
    23.       let sum = 0;
    24.       if (this.isEmpty(this.form[key])) {
    25.         // 监听的元素为空
    26.         this.calculateIntegrityForm[key] = 0;
    27.       } else {
    28.         // 监听的元素不为空
    29.         this.calculateIntegrityForm[key] = num;
    30.       }
    31.  
    32.       for (let i in this.calculateIntegrityForm) {
    33.         sum += this.calculateIntegrityForm[i];
    34.       }
    35.       this.percentage = sum;
    36.     },

            2、如何判断对象、数组、字符串为空

    1.     // 判断变量字符串、数组、对象是否为空的公共方法
    2.     isEmpty(str) {
    3.       let thisType = typeof str;
    4.       if (str === '' || str === null || str === undefined) {// null、undefined
    5.         // 这里之所以用全等于，因为：
    6.         // 1.JS里，‘’ == 0 == [],会被判断成相同，而下方针对数字0和空数组做出单独处理，故此处只需要单独判断‘’
    7.         // 2.JS里，typeof null == object,为简化下方object处判断逻辑，故此处需要用全等判断null
    8.         return true;
    9.       } else if (thisType == 'string' && str.replace(/(^\s*)|(\s*$)/g, '').length == 0) {//string
    10.         return true;
    11.  
    12.       } else if (thisType == 'number' && isNaN(str) || str == 0) {//number
    13.         return true;
    14.  
    15.       } else if (thisType == 'object') {
    16.         if (str instanceof Array) {// 数组为空判断
    17.           return str.length == 0;
    18.  
    19.         } else { // 对象为空判断
    20.           return JSON.stringify(str) == '{}';
    21.  
    22.         }
    23.       }
    24.       return false;// 传入str不为空
    25.     }

            3、for in用于对象的遍历，form[key]用于对象赋值

    三、全部代码

            本项目只是一个demo，我全部写在App.vue中，只安装了一个elementui插件

    1. <template>
    2.   <div id="app">
    3.     <el-form :model="form" ref="form" label-width="100px">
    4.       <el-form-item label="活动名称">
    5.         <el-input v-model="form.name" @change="nameChangeFn" clearable>el-input>
    6.       el-form-item>
    7.       <el-form-item label="活动区域">
    8.         <el-select v-model="form.region" placeholder="请选择活动区域" @change="regionChangeFn" clearable>
    9.           <el-option label="区域一" value="shanghai">el-option>
    10.           <el-option label="区域二" value="beijing">el-option>
    11.         el-select>
    12.       el-form-item>
    13.       <el-form-item label="活动性质">
    14.         <el-checkbox-group v-model="form.type" @change="typeChangeFn">
    15.           <el-checkbox label="美食/餐厅线上活动" name="type">el-checkbox>
    16.           <el-checkbox label="地推活动" name="type">el-checkbox>
    17.           <el-checkbox label="线下主题活动" name="type">el-checkbox>
    18.           <el-checkbox label="单纯品牌曝光" name="type">el-checkbox>
    19.         el-checkbox-group>
    20.       el-form-item>
    21.       <el-form-item label="特殊资源">
    22.         <el-radio-group v-model="form.resource" @change="resourceChangeFn">
    23.           <el-radio label="线上品牌商赞助">el-radio>
    24.           <el-radio label="线下场地免费">el-radio>
    25.         el-radio-group>
    26.       el-form-item>
    27.       <el-form-item label="进度条">
    28.         <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage">el-progress>
    29.       el-form-item>
    30.     el-form>
    31.   div>
    32. template>
    33.  
    34. <script>
    35. export default {
    36.   name: 'App',
    37.   data() {
    38.     return {
    39.       percentage: 0, // 百分比
    40.       form: {
    41.         name: '',
    42.         region: '',
    43.         type: [],
    44.         resource: '',
    45.       },
    46.       calculateIntegrityForm: {
    47.         name: 0,
    48.         region: 0,
    49.         type: 0,
    50.         resource: 0,
    51.       }
    52.     }
    53.   },
    54.   methods: {
    55.     // 监听特殊资源变化
    56.     resourceChangeFn(val) {
    57.       this.form.resource = val;
    58.       this.updateProgress('resource', 25);
    59.     },
    60.     // 监听活动性质变化
    61.     typeChangeFn(val) {
    62.       this.form.type = val;
    63.       this.updateProgress('type', 25);
    64.     },
    65.     // 监听活动区域变化
    66.     regionChangeFn(val) {
    67.       this.form.region = val;
    68.       this.updateProgress('region', 25);
    69.     },
    70.     // 监听活动名称变化
    71.     nameChangeFn(val) {
    72.       this.form.name = val;
    73.       this.updateProgress('name', 25);
    74.     },
    75.     // 监听进度条变化
    76.     updateProgress(key, num) {
    77.       let sum = 0;
    78.       if (this.isEmpty(this.form[key])) {
    79.         // 监听的元素为空
    80.         this.calculateIntegrityForm[key] = 0;
    81.       } else {
    82.         // 监听的元素不为空
    83.         this.calculateIntegrityForm[key] = num;
    84.       }
    85.  
    86.       for (let i in this.calculateIntegrityForm) {
    87.         sum += this.calculateIntegrityForm[i];
    88.       }
    89.       this.percentage = sum;
    90.     },
    91.     // 判断变量字符串、数组、对象是否为空的公共方法
    92.     isEmpty(str) {
    93.       let thisType = typeof str;
    94.       if (str === '' || str === null || str === undefined) {// null、undefined
    95.         // 这里之所以用全等于，因为：
    96.         // 1.JS里，‘’ == 0 == [],会被判断成相同，而下方针对数字0和空数组做出单独处理，故此处只需要单独判断‘’
    97.         // 2.JS里，typeof null == object,为简化下方object处判断逻辑，故此处需要用全等判断null
    98.         return true;
    99.       } else if (thisType == 'string' && str.replace(/(^\s*)|(\s*$)/g, '').length == 0) {//string
    100.         return true;
    101.  
    102.       } else if (thisType == 'number' && isNaN(str) || str == 0) {//number
    103.         return true;
    104.  
    105.       } else if (thisType == 'object') {
    106.         if (str instanceof Array) {// 数组为空判断
    107.           return str.length == 0;
    108.  
    109.         } else { // 对象为空判断
    110.           return JSON.stringify(str) == '{}';
    111.  
    112.         }
    113.       }
    114.       return false;// 传入str不为空
    115.     }
    116.   },
    117.  
    118. }
    119. script>
    120.  
    121. <style>
    122. .el-form {
    123.   position: absolute;
    124.   top: 50%;
    125.   left: 50%;
    126.   transform: translate(-50%, -50%);
    127. }
    128.  
    129. #app {
    130.   height: 100%;
    131. }
    132. style>

  • 相关阅读:
    Python服务器监测测试策略与工具：确保应用的高可用性！
    react-redux使用
    Java 漏洞扫描工具之 IDE 插件中墙裂建议修复的漏洞
    图的应用（最小生成树，最短路径，有向无环图）
    从查询语句执行流程看MySQL架构
    基于Python+Tkinter实现一个贪食蛇小游戏
    调试好的超级好用的姓氏正则表达式、姓名正则表达式，百家姓
    【校招VIP】前端校招考点之UDP
    软磁材料种类、特点和应用范围
    逆向实战31——xhs—xs算法分析
  • 原文地址：https://blog.csdn.net/weixin_42375707/article/details/126443077