欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue.js+element-ui的基礎(chǔ)表單實例代碼

 更新時間：2024年03月27日 10:54:55   作者：流情  
這篇文章主要介紹了vue.js+element-ui的基礎(chǔ)表單實例代碼,技術(shù)棧即html+vue.js+element-ui,而使用它們的方法也很簡單,引入對應(yīng)的js和css文件即可,需要的朋友可以參考下

遇到原生的html小型單頁應(yīng)用時，是脫離了vue框架，而我們又想使用vue的語法和element的組件加快我們的開發(fā)速度，這個時候就需要引用他們的js了。技術(shù)棧即html+vue.js+element-ui。而使用它們的方法也很簡單，引入對應(yīng)的js和css文件即可。下面用一個小例子展示下。

 普普通通的表單頁面：

 html代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表單頁面</title>
  <!-- 引入樣式 --> 
  <link rel="stylesheet"  rel="external nofollow" >
  <!-- 引入組件庫 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script>  
</head>
<style>
    #app {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    margin-top: 10vh;
    }
    html{
    width: 100%;
    height: 100%;
    background: #f0faff;
    }
    .el-form {
    max-width: 600px;
    width: 100%;
    box-shadow: 1px 1px 8px #dedede;
    padding: 30px;
    border-radius: 10px;
    background: #fff;
    }
    .el-row {
    margin-bottom: 20px;
    }
    /* .el-button {
    width: 100%;
    } */
</style>
<body>
  <div id="app">
    <el-form ref="form" :model="formData" :rules="formRules" label-width="80px">
      <el-row>
        <h3>業(yè)務(wù)數(shù)據(jù)導(dǎo)入終端：</h3>
      </el-row>
      <el-row>
        <el-form-item label="郵箱" prop="email">
        <el-input placeholder="請輸入接收通知的郵箱" v-model="formData.email"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="IP地址" prop="ip">
            <el-input v-model="formData.ip"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="端口" prop="port">
            <el-input v-model="formData.port"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="賬號" prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密碼" prop="password">
            <el-input v-model="formData.password" type="password"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="數(shù)據(jù)庫" prop="database">
            <el-input v-model="formData.database"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表名" prop="table">
            <el-input v-model="formData.table"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="上傳文件">
            <el-upload
              class="upload-demo"
              ref="upload"
              :action="uploadUrl"
              :before-upload="beforeUpload"
              accept=".xlsx,.xls"
              :limit="1"
              :auto-upload="false">
              <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
              <div slot="tip" class="el-upload__tip">只能上傳excel文件</div>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24" style="text-align: center; margin-top: 20px;">
          <el-button type="primary" @click="submitForm" :disabled="disabled">{{buttonText }}</el-button>
          <el-button type="danger" @click="clear">清除緩存</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          timer:0,
          limitTime: 1 * 60, // 限制時間為10分鐘
          disabled:false,
          formRules:{
                email:[
                  { required: true, message: '請輸入聯(lián)系郵箱', trigger: 'blur' }
                ],
                ip: [
                    { required: true, message: '請輸入ip', trigger: 'blur' }
                ],
                port: [
                    { required: true, message: '請輸入端口', trigger: 'blur' }
                ],
                username: [
                    { required: true, message: '請輸入賬號', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '請輸入密碼', trigger: 'blur' }
                ],
                database: [
                    { required: true, message: '請輸入數(shù)據(jù)庫', trigger: 'blur' }
                ],
                table: [
                    { required: true, message: '請輸入表名', trigger: 'blur' }
                ],
          },
          formData: {
            email:'',
            ip: '',
            port: '',
            username: '',
            password: '',
            database: '',
            table: '',
          },
          uploadUrl: '/upload'  // 文件上傳的接口地址
        };
      },
      mounted(){
        var obj = localStorage.getItem("formData")||"";
        var timer = localStorage.getItem("disabled")||"";
        if(timer){  //定時還沒結(jié)束，重置
          this.disabled = true;
          this.timer = this.limitTime;
          const countdown = setInterval(() => {
              this.timer--;
              if (this.timer <= 0) {
                localStorage.removeItem("disabled");
                clearInterval(countdown);
                this.disabled = false;
              }
          }, 1000);
        }
        if(obj){
          this.formData = JSON.parse(obj);
        }
      },
      computed: {
        buttonText() {
          if (this.disabled) {
            const minutes = Math.floor(this.timer / 60);
            const seconds = this.timer % 60;
            return `禁用中 (${minutes}:${String(seconds).padStart(2, '0')})`;
          } else {
            return '提交';
          }
        },
      },
      methods: {
        beforeUpload(file) {
          // 上傳文件之前的鉤子函數(shù)，可用于校驗文件類型等
          const isExcel = ((file.type === 'application/vnd.ms-excel')||(file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'));
          return isExcel;
        },
        clear(){
          this.$confirm('該操作會清除本地保存的數(shù)據(jù)信息, 是否繼續(xù)?', '提示', {
          confirmButtonText: '確定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.clear();
          this.$message({
            type: 'success',
            message: '清除成功'
          });
          setTimeout(()=>{window.location.reload();},1000)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          });          
        });
        },
        submitForm() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    // 提交表單的函數(shù)，將表單數(shù)據(jù)和文件一起發(fā)送給后端
                    const formData = new FormData();
                    formData.append('email', this.formData.email);
                    formData.append('ip', this.formData.ip);
                    formData.append('port', this.formData.port);
                    formData.append('access', this.formData.username);
                    formData.append('password', this.formData.password);
                    formData.append('dataName', this.formData.database);
                    formData.append('tableName', this.formData.table);
                    console.log(this.$refs.upload.uploadFiles[0]);
                    if(this.$refs.upload.uploadFiles[0]&&this.beforeUpload(this.$refs.upload.uploadFiles[0].raw)){
                        const file = this.$refs.upload.uploadFiles[0].raw;
                        formData.append('file', file);
                    }else{
                        this.$message.error('請上傳excel文件');
                        return;
                    }
                     localStorage.setItem("formData",JSON.stringify(this.formData));
                     this.disabled = true;
                     localStorage.setItem("disabled",this.disabled)
                     this.timer = this.limitTime;
                     const countdown = setInterval(() => {
                      this.timer--;
                      if (this.timer <= 0) {
                        localStorage.removeItem("disabled");
                        clearInterval(countdown);
                        this.disabled = false;
                      }
                    }, 1000);
                    // 發(fā)送表單數(shù)據(jù)和文件給后端
                    fetch('http://localhost/from/uploadExcel', {
                        method: 'POST',
                        body: formData
                    })
                        .then(response => response.json())
                        .then(data => {
                        console.log('提交成功', data);
                          if(data.code==200){
                            this.$message({
                              message: data.msg,
                              type: 'success'
                            });
                          }else{
                            this.$message({
                              message: data.msg,
                              type: 'warning'
                            });
                          }
                        // 處理后端返回的數(shù)據(jù)
                        })
                        .catch(error => {
                        console.error('提交失敗', error);
                        // 處理提交失敗的情況
                        });
                } else {
                this.$message.error('請將表單補充完整');
                }
            });
        }
      }
    });
  </script>
</body>
</html>

到此這篇關(guān)于vue.js+element-ui的基礎(chǔ)表單的文章就介紹到這了,更多相關(guān)vue.js element-ui表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue如何獲取new Date().getTime()時間戳

    Vue如何獲取new Date().getTime()時間戳

    在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級時間戳,而PHP后端則是秒級時間戳,處理此類問題時,需要將PHP的時間戳乘以1000轉(zhuǎn)換為毫秒級,以保證數(shù)據(jù)的一致性和正確的邏輯判斷
    2024-10-10
  • vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼

    vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼

    今天小編就為大家分享一篇vue組件表單數(shù)據(jù)回顯驗證及提交的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue 怎么創(chuàng)建組件及組件使用方法

    vue 怎么創(chuàng)建組件及組件使用方法

    vue中的核心就是組件，組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼，下面通過本文重點給大家介紹vue 創(chuàng)建組件及組件使用方法，感興趣的朋友一起看看吧
    2017-07-07
  • 基于Vue實現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出

    基于Vue實現(xiàn)HTML轉(zhuǎn)PDF并導(dǎo)出

    這篇文章主要為大家介紹了三種方法，可以實現(xiàn)將HTML頁面轉(zhuǎn)為PDF并實現(xiàn)下載。文中的示例代碼講解詳細，感興趣的小伙伴可以學(xué)習(xí)一下
    2022-04-04
  • 使用Vue?控制元素顯示隱藏的方法和區(qū)別

    使用Vue?控制元素顯示隱藏的方法和區(qū)別

    這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下
    2022-12-12
  • 深入學(xué)習(xí)Vue nextTick的用法及原理

    深入學(xué)習(xí)Vue nextTick的用法及原理

    這篇文章主要介紹了深入學(xué)習(xí)Vue nextTick的用法及原理,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-10-10
  • vue-cli腳手架搭建的項目去除eslint驗證的方法

    vue-cli腳手架搭建的項目去除eslint驗證的方法

    今天小編就為大家分享一篇vue-cli腳手架搭建的項目去除eslint驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue+spring boot實現(xiàn)校驗碼功能

    vue+spring boot實現(xiàn)校驗碼功能

    這篇文章主要為大家詳細介紹了vue+spring boot實現(xiàn)校驗碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-05-05
  • Vue中transition的使用及說明

    Vue中transition的使用及說明

    這篇文章主要介紹了Vue中transition的使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue+Echart實現(xiàn)立體柱狀圖

    vue+Echart實現(xiàn)立體柱狀圖

    這篇文章主要為大家詳細介紹了vue+Echart實現(xiàn)立體柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04

最新評論