Vue3?+?elementplus實(shí)現(xiàn)表單驗(yàn)證+上傳圖片+?防止表單重復(fù)提交功能
首先,上官網(wǎng)地址
首先頁面上面用了彈窗的形式,做完之后長這樣,有全屏,關(guān)閉等按鈕,上效果圖和完整代碼!?。。?!
<!--點(diǎn)擊新增按鈕 --> <div class="addbtn" @click="fundOperation()"> ? <span>+</span> 新增 </div> <el-dialog v-model="datadialog" :show-close="true" :close-on-click-modal="false" width="746px" :title="dialogtitle" :fullscreen="fullscreen" :destroy-on-close="true" @close="closeDialog" > <!--是否全屏--> <div class="fullicon" @click="fullscreen = !fullscreen"> <img src="../../assets/info_open.png" alt=""></div> <div class="box-title"> <img src="../../assets/info_basic.png" alt=""> <span>基本信息</span> </div> <el-form :model="ruleForm" :rules="rules" label-width="120px" label-position="right" class="demo-ruleForm" :size="formSize" ref="ruleFormRef" > <el-form-item label="標(biāo)題" prop="title"> <el-input v-model="ruleForm.title" placeholder="請輸入80個(gè)字符以內(nèi)標(biāo)題" :clearable="true" label-width="100%" maxlength="80" autocomplete="off" /> </el-form-item> <el-form-item prop="img" class="upload" label="上傳圖片" v-loading="loading" > <el-upload class="upload-demo" :limit="1" action="/api/v1/upload/file" name="multipartFile" :on-success="uploadSucceed" :on-error = "uploadError" :file-list="fileList" list-type="picture" :before-upload="beforeUpload" :on-remove="fileRemoved" accept=".jpg,.jpeg,.png,.JPG,.JPEG" ref="upload" > <el-button size="small" type="primary">點(diǎn)擊上傳</el-button> </el-upload> <div class="el-upload__tip">圖片尺寸:600*200,圖片5MB以內(nèi),圖片格式支持JPG、JPEG、PNG</div> </el-form-item> <!-- 是否推薦 0不推薦 1推薦--> <el-form-item prop="recommend" label="是否推薦" > <el-select v-model="ruleForm.recommend" placeholder="請選擇是否推薦" > <el-option label="是" :value="1" ></el-option> <el-option label="否" :value="0" ></el-option> </el-select> </el-form-item> <el-form-item label="特殊資源" prop="share"> <el-radio-group v-model="ruleForm.share"> <el-radio label="線上品牌商贊助"></el-radio> <el-radio label="線下場地免費(fèi)"></el-radio> </el-radio-group> </el-form-item> <el-form-item label="活動(dòng)性質(zhì)" prop="type"> <el-checkbox-group v-model="ruleForm.type"> <el-checkbox label="美食/餐廳線上活動(dòng)" name="type"></el-checkbox> <el-checkbox label="地推活動(dòng)" name="type"></el-checkbox> <el-checkbox label="線下主題活動(dòng)" name="type"></el-checkbox> <el-checkbox label="單純品牌曝光" name="type"></el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item label="活動(dòng)形式" prop="content"> <el-input type="textarea" v-model="ruleForm.content"></el-input> </el-form-item> </el-form> <template #footer> <span class="dialog-footerData" > <!-- 當(dāng)使用指令方式時(shí),全屏遮罩需要添加fullscreen修飾符(遮罩會(huì)插入至 body 上),此時(shí)若需要鎖定屏幕的滾動(dòng),可以使用lock修飾符;當(dāng)使用服務(wù)方式時(shí),遮罩默認(rèn)即為全屏,無需額外設(shè)置。--> <el-button ?class="bai" @click="dataCancel" >取消</el-button> ? ? ? ? ? ? <el-button type="primary" @click="dataConfirm(1)" v-loading.fullscreen.lock="fromloading">發(fā)布</el-button> </span> </template> </el-dialog>
表單校驗(yàn) 和數(shù)據(jù)提交
<script> import { useRoute } from 'vue-router' import { toRefs, reactive, ref, unref} from 'vue' import axios from '../../api/news' // axios 接口求情 import router from '../../router'; import {ElMessage} from 'element-plus'; ? export default { ? setup() { ? ? const route = useRoute(); ? ? const datadialog = ref(false) // 新增彈窗 ? ? const upload = ref("");? ?//上傳 ? ? const ruleFormRef = ref(null); //表單 ? ? let formSize = 'default'; ? ? let ruleForm = reactive({ ? ? ? title:'',// 標(biāo)題 ? ? ? img:'',//圖片 ? ? ? recommend: '',//是否推薦 ? ? ? ? share: '',// 特殊資源 ? ? ? type: '',// 活動(dòng)性質(zhì) ? ? ? content:'' ,// 內(nèi)容 ? ? }); ? ? //表單校驗(yàn) ? ? const rules = reactive({ ? ? ? title: {required: true, message: '請輸入標(biāo)題', trigger: 'blur'}, ? ? ? img: {required: true, message: '請上傳圖片', trigger: 'blur'}, ? ? ? content: {required: true, message: '請?zhí)顚懟顒?dòng)形式', trigger: 'blur'}, ? ? ? ? recommend: {required: true, message: '請選擇特殊資源 ', trigger: 'change'}, ? ? ? share: {required: true, message: '請選擇是否允許分享', trigger: 'change'}, ? ? ? type: [{ type: 'array', required: true, message: '請至少選擇一個(gè)活動(dòng)性質(zhì)', trigger: 'change' }], ? ? }) ? ? const data = reactive({ ? ? ? ? infoData:[], ? ? ? fileList:[], ? ? ? loading: false, ? ? ? dialogtitle:'',//彈窗標(biāo)題 ? ? ? fullscreen:false, ? ? ? fromloading:false, ? ? })? ? ? //? 新增彈窗? ? ? function fundOperation(){ ? ? ? data.fullscreen = false ? ? ? ruleForm.img = ""; // 清空文件圖片地址 ? ? ? data.fileList = []; ? ? ? // 清空表單數(shù)據(jù) ? ? ? Object.keys(ruleForm).map(key => { ? ? ? ? delete ruleForm[key] ? ? ? }) ? ? ? data.dialogtitle = '新增' ? ? ? datadialog.value = true; ?// ?顯示彈窗 ? ? } ? ? // 上傳圖片方法 ? ? function beforeUpload(file, fileList) { ? ? ? ?data.loading = true; ? ? ? ? const isLt10M = file.size / 1024 / 1024 < 5; ? ? ? ? if (!isLt10M) { ? ? ? ? ? ElMessage('上傳頭像圖片大小不能超過 5MB!'); ? ? ? ? ? data.loading = false; ? ? ? ? } ? ? ? ?return isLt10M; ? ? ? ? ? } ? ? ? // 圖片被移除 ? ? function fileRemoved(file, fileList) { ? ? ? if (file && file.status === "success") { ? ? ? ? //移除前方法 ? ? ? ? ruleForm.img = ""; // 清空文件圖片地址 ? ? ? } ? ? } ? ? // 文件上傳成功 ? ? function uploadSucceed(res) { ? ? ? if (res.code == 200) { ? ? ? ? data.loading = false; ? ? ? ? ruleForm.img = res.data.url; // 圖片鏈接 ? ? ? }else{ ? ? ? ? ruleForm.img = ''; // 圖片鏈接 ? ? ? } ? ? ? ? ? } ? ? function uploadError(){ ? ? ? data.loading = false; ? ? ? ElMessage.error("圖片上傳失敗"); ? ? ? ruleForm.img = ''; // 圖片鏈接 ? ? } ? ? // 編輯數(shù)據(jù) 取消 ? ? function dataCancel(){ ? ? ? data.fileList = []; ? ? ? ? Object.keys(ruleForm).map(key => { ? ? ? ? delete ruleForm[key] ? ? ? }) ? ? ? data.loading = false; ? ? ? datadialog.value = false; ? ? ? data.fullscreen = false; ? ? } ? ? async function dataConfirm(){ ? ? ? ? data.fromloading = true; // ? ? ? const form = unref(ruleFormRef); ? ? ? if (!form) return; ? ? ? try { ? ? ? ? ? ?await ruleFormRef.value.validate((valid) => { ? ? ? ? ? ? // 驗(yàn)證通過 請求接口 ? ? ? ? ? ? ? if (valid) { //寫自己的接口地址哦 ? ? ? ? ? ? ? ? ?axios.addApi(ruleForm).then(res => { ? ? ? ? ? ? ? ? ? ? if (res.code == 200) { ? ? ? ? ? ? ? ? ? ? ? data.fileList = [];? ? ? ? ? ? ? ? ? ? ? ? data.loading = false; ? ? ? ? ? ? ? ? ? ? ? datadialog.value = false; ? ? ? ? ? ? ? ? ? ? ? data.fullscreen = false; ? ? ? ? ? ? ? ? ? ? ? data.fromloading = false;? ? ? ? ? ? ? ? ? ? ? ? // ElMessage.success('操作成功'); ?//默認(rèn)時(shí)間 方式 ? ? ? ? ? ? ? ? ? ? ? ElMessage.success({ ? ? ? ? ? ? ? ? ? ? ? ? message:'操作成功', ? ? ? ? ? ? ? ? ? ? ? ? duration:2500 ? ? ? ? ? ? ? ? ? ? ? }); ? ? ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? ? data.fromloading = false; ? ? ? ? ? ? ? ? ? ? ? ElMessage.error(res.message); ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? // 驗(yàn)證失敗 取消loading, ? ? ? ? ? ? ? ? data.fromloading = false; ? ? ? ? ? ? ? ? return; ? ? ? ? ? ? ? } ? ? ? ? ? ? }) ? ? ? ? ? ? ? ? ? ? ? } catch (error){ ? ? ? ? ? ?// 驗(yàn)證失敗 取消loading, ? ? ? ? ? data.fromloading = false; ? ? ? ? } ? ? ? } ? ? ? ? ? return { ? ? ? ...toRefs(data),? ? ? ? fundOperation, ? ? ? datadialog, ? ? ? dataCancel, ? ? ? dataConfirm, ? ? ? ruleForm, ? ? ? formSize, ? ? ? rules, ? ? ? ? fileRemoved, ? ? ? uploadSucceed, ? ? ? uploadError, ? ? ? upload, ? ? ? beforeUpload,?? ? ? ? ruleFormRef ? ? } ? }, } </script>
到此這篇關(guān)于Vue3 + elementplus 表單驗(yàn)證+上傳圖片+ 防止表單重復(fù)提交的文章就介紹到這了,更多相關(guān)Vue3 elementplus表單驗(yàn)證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue常用傳值方式、父傳子、子傳父及非父子實(shí)例分析
這篇文章主要介紹了Vue常用傳值方式、父傳子、子傳父及非父子,結(jié)合實(shí)例形式分析了vue.js常見的傳值方式及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2020-02-02vue學(xué)習(xí)筆記之指令v-text && v-html && v-bind詳解
這篇文章主要介紹了vue學(xué)習(xí)筆記之指令v-text && v-html && v-bind詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了Nuxt.js SSR與權(quán)限驗(yàn)證的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11