vue element组件实现表单、联动进度条（好用）

最新推荐文章于 2023-12-22 14:40:26 发布

原创

最新推荐文章于 2023-12-22 14:40:26 发布 · 置顶 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #大前端 #elementui #前端 #javascript

本文介绍了如何在Vue项目中结合ElementUI实现表单操作与进度条联动的效果。通过在main.js中引入ElementUI，创建Wenjuan.vue组件，并在router的index.js中配置路由，当进行输入操作时，进度条会根据操作动态更新，删除操作则使进度条回退。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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"