一、序言
1、业务需求
表单项填写了，进度条就增加相应的比例，表单项未填写，进度条就 减少相应的比例
2、目标效果
二、原理
1、如何监测表单项是否有值，可以专门用对象存储进度条增幅比例。如果表单项有值则存储，没有值则赋值为0，然后表单项使用@change事件监听表单项是否变化，然后调用一个公共的计算进度条的方法，这个方法去遍历calculateIntegrityForm对象的key对应的value值，然后累加这个value值，最后赋值给进度条
1 2 3 4 5 6 7 8 9 10 11 12 | form: { // 存储表单项的表单 name: '', region: '', type: [], resource: '',},calculateIntegrityForm: { // 存储进度条比例的表单 name: 0, region: 0, type: 0, resource: 0,} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | // 监听特殊资源变化resourceChangeFn(val) { this.form.resource = val; this.updateProgress('resource', 25);},// 监听活动性质变化typeChangeFn(val) { this.form.type = val; this.updateProgress('type', 25);},// 监听活动区域变化regionChangeFn(val) { this.form.region = val; this.updateProgress('region', 25);},// 监听活动名称变化nameChangeFn(val) { this.form.name = val; this.updateProgress('name', 25);},// 监听进度条变化updateProgress(key, num) { let sum = 0; if (this.isEmpty(this.form[key])) { // 监听的元素为空 this.calculateIntegrityForm[key] = 0; } else { // 监听的元素不为空 this.calculateIntegrityForm[key] = num; } for (let i in this.calculateIntegrityForm) { sum += this.calculateIntegrityForm[i]; } this.percentage = sum;}, |
2、如何判断对象、数组、字符串为空
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | // 判断变量字符串、数组、对象是否为空的公共方法isEmpty(str) { let thisType = typeof str; if (str === '' || str === null || str === undefined) {// null、undefined // 这里之所以用全等于，因为： // 1.JS里，‘' == 0 == [],会被判断成相同，而下方针对数字0和空数组做出单独处理，故此处只需要单独判断‘' // 2.JS里，typeof null == object,为简化下方object处判断逻辑，故此处需要用全等判断null return true; } else if (thisType == 'string' && str.replace(/(^s*)|(s*$)/g, '').length == 0) {//string return true; } else if (thisType == 'number' && isNaN(str) || str == 0) {//number return true; } else if (thisType == 'object') { if (str instanceof Array) {// 数组为空判断 return str.length == 0; } else { // 对象为空判断 return JSON.stringify(str) == '{}'; } } return false;// 传入str不为空} |
3、for in用于对象的遍历，form[key]用于对象赋值
三、全部代码
本项目只是一个demo，我全部写在App.vue中，只安装了一个elementui插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <div id="app"> </div>export default { name: 'App', data() { return { percentage: 0, // 百分比 form: { name: '', region: '', type: [], resource: '', }, calculateIntegrityForm: { name: 0, region: 0, type: 0, resource: 0, } } }, methods: { // 监听特殊资源变化 resourceChangeFn(val) { this.form.resource = val; this.updateProgress('resource', 25); }, // 监听活动性质变化 typeChangeFn(val) { this.form.type = val; this.updateProgress('type', 25); }, // 监听活动区域变化 regionChangeFn(val) { this.form.region = val; this.updateProgress('region', 25); }, // 监听活动名称变化 nameChangeFn(val) { this.form.name = val; this.updateProgress('name', 25); }, // 监听进度条变化 updateProgress(key, num) { let sum = 0; if (this.isEmpty(this.form[key])) { // 监听的元素为空 this.calculateIntegrityForm[key] = 0; } else { // 监听的元素不为空 this.calculateIntegrityForm[key] = num; } for (let i in this.calculateIntegrityForm) { sum += this.calculateIntegrityForm[i]; } this.percentage = sum; }, // 判断变量字符串、数组、对象是否为空的公共方法 isEmpty(str) { let thisType = typeof str; if (str === '' || str === null || str === undefined) {// null、undefined // 这里之所以用全等于，因为： // 1.JS里，‘' == 0 == [],会被判断成相同，而下方针对数字0和空数组做出单独处理，故此处只需要单独判断‘' // 2.JS里，typeof null == object,为简化下方object处判断逻辑，故此处需要用全等判断null return true; } else if (thisType == 'string' && str.replace(/(^s*)|(s*$)/g, '').length == 0) {//string return true; } else if (thisType == 'number' && isNaN(str) || str == 0) {//number return true; } else if (thisType == 'object') { if (str instanceof Array) {// 数组为空判断 return str.length == 0; } else { // 对象为空判断 return JSON.stringify(str) == '{}'; } } return false;// 传入str不为空 } },}.el-form { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}#app { height: 100%;} |
到此这篇关于Vue实现动态显示表单项填写进度功能的文章就介绍到这了,更多相关Vue动态显示表单项填写进度内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
