近期在用Vue做一个网站建设项目时，在一个数据表单填写页面中项目比较多，为了优化客户的体验度并增加页面的美观，将需要填写的内容做了三个页面，并且在每个页面中都设置了进度动态显示条，客户的反馈效果不错，今天就和大家一起来分享在Vue框架中实现动态显示表单项填写进度功能的具体方法。
首先我们来看具体的效果：
接着是代码内容：
<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: {
// 监听特殊资源变化
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不为空
}
},
}
</script>
<style>
.el-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#app {
height: 100%;
}
</style>好了，以上内容就是今天要和大家分享的关于在Vue国动态显示表单项填写进度的全部内容，喜欢的话记得收藏哦！
