发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

Vue实现动态显示表单项填写进度功能

小鱼会游泳

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
显示全部楼层
一、序言


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.       for (let i in this.calculateIntegrityForm) {
  32.         sum += this.calculateIntegrityForm[i];
  33.       }
  34.       this.percentage = sum;
  35.     },
复制代码
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.       } else if (thisType == 'number' && isNaN(str) || str == 0) {//number
  12.         return true;
  13.       } else if (thisType == 'object') {
  14.         if (str instanceof Array) {// 数组为空判断
  15.           return str.length == 0;
  16.         } else { // 对象为空判断
  17.           return JSON.stringify(str) == '{}';
  18.         }
  19.       }
  20.       return false;// 传入str不为空
  21.     }
复制代码
3、for in用于对象的遍历，form[key]用于对象赋值

三、全部代码

本项目只是一个demo，我全部写在App.vue中，只安装了一个elementui插件
  1. <template>  <div id="app">    <el-form :model="form" ref="form" label-width="100px">      <el-form-item label="活动名称">        <el-input v-model="form.name" @change="nameChangeFn" clearable></el-input>      </el-form-item>      <el-form-item label="活动区域">        <el-select v-model="form.region" placeholder="请选择活动区域" @change="regionChangeFn" clearable>          <el-option label="区域一" value="shanghai"></el-option>          <el-option label="区域二" value="beijing"></el-option>        </el-select>      </el-form-item>      <el-form-item label="活动性质">        <el-checkbox-group v-model="form.type" @change="typeChangeFn">          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>          <el-checkbox label="地推活动" name="type"></el-checkbox>          <el-checkbox label="线下主题活动" name="type"></el-checkbox>          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>        </el-checkbox-group>      </el-form-item>      <el-form-item label="特殊资源">        <el-radio-group v-model="form.resource" @change="resourceChangeFn">          <el-radio label="线上品牌商赞助"></el-radio>          <el-radio label="线下场地免费"></el-radio>        </el-radio-group>      </el-form-item>      <el-form-item label="进度条">        <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage"></el-progress>      </el-form-item>    </el-form>  </div></template><script>export default {  name: 'App',  data() {    return {      percentage: 0, // 百分比      form: {        name: '',        region: '',        type: [],        resource: '',      },      calculateIntegrityForm: {        name: 0,        region: 0,        type: 0,        resource: 0,      }    }  },  methods: {    // 监听特殊资源变化
  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.       for (let i in this.calculateIntegrityForm) {
  32.         sum += this.calculateIntegrityForm[i];
  33.       }
  34.       this.percentage = sum;
  35.     },    // 判断变量字符串、数组、对象是否为空的公共方法
  36.     isEmpty(str) {
  37.       let thisType = typeof str;
  38.       if (str === '' || str === null || str === undefined) {// null、undefined
  39.         // 这里之所以用全等于，因为：
  40.         // 1.JS里，‘' == 0 == [],会被判断成相同，而下方针对数字0和空数组做出单独处理，故此处只需要单独判断‘'
  41.         // 2.JS里，typeof null == object,为简化下方object处判断逻辑，故此处需要用全等判断null
  42.         return true;
  43.       } else if (thisType == 'string' && str.replace(/(^\s*)|(\s*$)/g, '').length == 0) {//string
  44.         return true;
  45.       } else if (thisType == 'number' && isNaN(str) || str == 0) {//number
  46.         return true;
  47.       } else if (thisType == 'object') {
  48.         if (str instanceof Array) {// 数组为空判断
  49.           return str.length == 0;
  50.         } else { // 对象为空判断
  51.           return JSON.stringify(str) == '{}';
  52.         }
  53.       }
  54.       return false;// 传入str不为空
  55.     }  },}</script><style>.el-form {  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}#app {  height: 100%;}</style>
复制代码
到此这篇关于Vue实现动态显示表单项填写进度功能的文章就介绍到这了,更多相关Vue动态显示表单项填写进度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/284497jfm.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: JavaScript中的纯函数与偏函数你了解吗

下一篇: Vue 实现轮播图功能的示例代码

发表于 2023-5-17 10:21:49

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4