您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue如何實現(xiàn)表單驗證小功能的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
具體內(nèi)容如下
先點開Vue項目中src目錄配置router文件然后用import暴露你的表單頁名稱并在你的Router實例中中注冊路由表代碼如下
import Create from "@/views/create/create.vue"; //前面是暴露的名字,首字母要用大寫。后面是你的表單頁所在目錄@是..的簡寫即返回上一層 const router=new Router({ mode:"history"//這里是寫路由是什么模式 routes:[ { path: "/create",//默認(rèn)為/多個的話就是/加上路徑 name: "create", component: Create, title: "表單", }, ] })
路由表配置完成之后記得將home頁中的自己router-link標(biāo)簽的to選項配置一下
<router-link :to="{ name: 'create' }" class="collection">表單</router-link>
隨后就是表單頁
效果圖
功能實現(xiàn)代碼如下
插件用的是element.ui可以在終端中使用npm i element-ui 安裝成功之后在package.json中查看并在main.js中引用
安裝完成后就可以使用啦。
<template> <div class="create"> <h3>歡迎發(fā)布新菜譜,先介紹一下你的大作!</h3> <section class="create-introduce"> <h6>標(biāo)題</h6> <el-input v-model="backData.title" class="create-input" placeholder="請輸入內(nèi)容" ></el-input> <h6>屬性</h6> <div> <el-select v-for="item in propertyies" :key="item.parent_name" :placeholder="item.parent_name" v-model="backData.property[item.title]" > <el-option v-for="option in item.list" :key="option.type" :label="option.name" :value="option.type" > </el-option> </el-select> </div> <h6>菜譜分類</h6> <div> <el-select placeholder="請選擇菜譜分類" v-model="backData.classify"> <el-option-group v-for="group in classifies" :key="group.parent_type" :label="group.parent_name" > <el-option v-for="item in group.list" :key="item.type" :label="item.name" :value="item.type" > </el-option> </el-option-group> </el-select> </div> <h6>成品圖 (328*440)</h6> <div class="upload-img-box clearfix"> <div class="upload-img"> <upload-img action="/api/upload?type=product" :img-url="backData.product_pic_url" @res-url=" (data) => { backData, (product_pic_url = data.res); } " ></upload-img> </div> <el-input class="introduce-text" type="textarea" :rows="10" placeholder="請輸入內(nèi)容" > </el-input> </div> </section> <h3>記錄所有原材料</h3> <section class="create-introduce"> <h6>主料</h6> <!--[ { "name": "", "specs": "" }, { "name": "", "specs": "" }, { "name": "", "specs": "" } ]--> <Stuff v-model="backData.raw_material.main_material"></Stuff> <h6>輔料</h6> <Stuff v-model="backData.raw_material.accessories_material"></Stuff> </section> <h3>開始寫步驟了!能否簡單易學(xué)就看你怎么寫了,加油!</h3> <section class="create-introduce"> <Upload v-for="(item, index) in 3" :key="index"></Upload> <el-button class="eaeaea add-step-button" type="primary" size="medium" icon="el-icon-plus" @click="add" >增加一步</el-button > <h6>烹飪小技巧</h6> <el-input class="introduce-text" type="textarea" :rows="8" placeholder="分享下你做這道菜的過程中的心得和小技巧吧!" > </el-input> </section> <el-button class="send" type="primary" size="medium" :icon="icon" >搞定,提交審核</el-button > </div> </template> <script> import Stuff from "./stuff"; import Upload from "./step-upload"; import UploadImg from "@/components/upload-img"; import { getProperty, getClassify, publish } from "@/service/api"; const raw_materia_struct = { name: "", specs: "", }; export default { name: "create", components: { Stuff, Upload, UploadImg }, data() { return { backData: { title: "", property: {}, classify: "", product_pic_url: "", product_story: "", raw_material: { raw_material: Array(3) .fill(1) .map(() => ({ ...raw_materia_struct })), accessories_material: Array(3) .fill(1) .map(() => ({ ...raw_materia_struct })), }, }, propertyies: [], classifies: [], }; }, mounted() { getProperty().then(({ data }) => { console.log(data); this.propertyies = data; this.backData.property = data.reduce((o, item) => { o[item.title] = ""; return o; }, {}); // console.log(data); // console.log(this.backData.property) }); getClassify().then(({ data }) => { console.log(data); this.classifies = data; }); }, methods: { add() { console.log(1); }, }, }; </script> <style lang="stylus"> .create-introduce background-color #fff padding 20px .add-step-button margin-left 100px .create width 100% h3 text-align center margin 20px 0 .send // ff3232() height: 70px; width: 220px; background #ff3232 color #fff border none margin 20px auto display block h6 margin 20px 0 .create-input input width 446px line-height 22px .upload-img-box .upload-img float left .introduce-text float left .el-textarea width 60% margin-left 10px </style>
感謝各位的閱讀!關(guān)于“vue如何實現(xiàn)表單驗證小功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。