输入之后进度条会加进度，删除后进度条会减回去​​​​​​

 1.引入引入 Element

在 main.js 中加入入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.在views文件夹里创建Wenjuan.vue文件,并在router文件夹的index.js里设置路由

Wenjuan.vue里的内容：

<template>
  <div>
    <div class="wj_box">
      <div class="index">
        <el-progress
          style="margin-left: 1.4rem;"
          :percentage="percentage"
          status="success"
          :color="customColor"
        ></el-progress>
      </div>
      <div class="wj_img">
        <img src="/img/background_4.png" alt="" />
        <div class="wj_count">
          <h3 style="text-align: center">腾讯2022校园招聘宣讲会报名</h3>
          <span
            >同学你好，诚邀你参加腾讯2022校园招聘宣讲会！现场将为你揭秘多面鹅厂，解锁超多应聘干货，更有精美礼品及鹅厂周边等你来拿~欢迎填写问卷报名预约宣讲会（我们将对你的个人信息严格保密）</span
          >
          <div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="你的学校" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  @change="ruleForm.name!==''?increase():decrease()"
                ></el-input>
              </el-form-item>
              <el-form-item label="你的学院" prop="xueyuan">
                <el-input
                  v-model="ruleForm.xueyuan"
                  @change="ruleForm.xueyuan!==''?increase():decrease()"
                ></el-input>
              </el-form-item>
              <el-form-item label="当前学历" prop="type">
                <el-radio-group
                  v-model="ruleForm.type"
                  class="xl"
                  @change="ruleForm.type!==''?increase():decrease()"
                >
                  <el-radio  label="大学本科"></el-radio>
                  <el-radio  label="硕士研究生"></el-radio>
                  <el-radio  label="博士研究生"></el-radio>
                  <el-radio  label="其他＿＿"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="毕业时间" required>
                <el-col :span="11">
                  <el-form-item prop="date1">
                    <el-date-picker
                      @change="ruleForm.date1!==''?increase():decrease()"
                      type="date"
                      placeholder="选则日期"
                      v-model="ruleForm.date1"
                      style="width: 100%"
                    ></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="你的姓名" prop="uname">
                <el-input
                  v-model="ruleForm.uname"
                  @change="ruleForm.uname!==''?increase():decrease()"
                ></el-input>
              </el-form-item>
              <el-form-item label="你的电话" prop="phone">
                <el-input
                  v-model="ruleForm.phone"
                  @change="ruleForm.phone!==''?increase():decrease()"
                ></el-input>
              </el-form-item>
              <el-form-item label="你的邮箱" prop="mailbox">
                <el-input
                  v-model="ruleForm.mailbox"
                  @change="ruleForm.mailbox!==''?increase():decrease()"
                ></el-input>
              </el-form-item>
              <el-form-item class="xj" label="希望内容" prop="desc">
                <el-input
                  type="textarea"
                  v-model="ruleForm.desc"
                  @change="ruleForm.desc!==''?increase():decrease()"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <!-- <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button> -->
                <el-button type="primary" @click="resetForm('ruleForm')"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count:0,
      percentage: 0,
      customColor: "#409eff",
      ruleForm: {
        name: "",
        region: "",
        name1: "",
        date1: "",
        type: [],
        desc: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入学校名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        xueyuan: [
          { required: true, message: "请输入学院名称", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        uname: [
          { required: true, message: "请输入名字", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "请输入电话", trigger: "blur" },
          { min: 11, max: 11, message: "长度在 11 个字符", trigger: "blur" },
        ],
        mailbox: [
          { required: true, message: "请输入你的邮箱", trigger: "blur" },
          {
            min: 9,
            max: 18,
            message: "长度在 9 到 18 个字符",
            trigger: "blur",
          },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        type: [
          {
            required: true,
            message: "请选择学历",
            trigger: "change",
          },
        ],
        desc: [
          { required: true, message: "请输入想要看到的内容", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    increase() {
      this.percentage += 12.5;
      if (this.percentage > 87.5) {
        this.percentage = 100;
      }
    },
    decrease() {
        this.percentage -= 12.5;
        if (this.percentage < 0) {
          this.percentage = 0;
        }
      },
    // submitForm(formName) { //提交事件
    //   this.$refs[formName].validate(valid => {
    //     if (valid) {
    //       alert("submit!");
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    resetForm(formName) {  //重置
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.index {
  position: relative;
  top: 3.5rem;
}
::v-deep i::before{
  color: #409eff;
  /* display: none; */
  }
::v-deep .el-input__inner {
  padding: 0 0 0 22px !important;
}
.xj .el-form-item__label {
  width: 0px !important;
}
.xl {
  width: 6rem;
}
.is-success {
  margin-top: 0rem !important;
}
.wj_box {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: rgba(240, 240, 240, 1);
}
.wj_img img {
  width: 100%;
}
.wj_count {
  position: relative;
  top: -7.7rem;
  width: 80%;
  margin: 0 auto;
  padding: 0 1rem 1rem;
  background-color: rgba(245, 245, 245, 1);
}
.demo-ruleForm {
  margin-top: 1rem;
  margin-left: -1.4rem;
}
</style>

index.js里加入：

{
  path: '/wenjuan',
  component: () => import('../components/Wenjuan.vue'),
},

终端npm run serve运行之后浏览器访问：http://localhost:8080/wenjuan