vuejs前端頁面開發(fā)總結(jié)

1、一、表單：1、常用屬性說明<el-form :model=l,workerform11 :inline=htnue" ref=uworkerform'1 : rules二"outlibrule'1 |class="stan dard11 label-positi on=l,top,>(x):inline="true"行內(nèi)表單模式：每個(gè)屜m橫排(2) 、：廠川亡ubru仏"定義校驗(yàn)規(guī)則，例如必填(3) 、label-'positioi="top"表單域標(biāo)簽的位置為亡op(4) :m

2、o6/e/=nworkform, 表單綁定數(shù)據(jù)源(5) 、表單中el-form-item標(biāo)簽行間距，默認(rèn)行間距比較大，marginbottom: 20px; el-form-item margin-bottom: 3px;2、常用校驗(yàn)注意問題(1) 、trigger: 'blur'h trigger: 'change'使用時(shí)注意。3、自定義校驗(yàn)：(1) input框位數(shù)限制，在el-input中使用，例如:el-input :maxlength="3"即限制最大input框輸入為3.(2) 、為了便于統(tǒng)一管理，口定義的校驗(yàn)均定義到src/co

3、mmon/js/validate.js中，(3) 、自定義校驗(yàn)一定要有callback();回調(diào)函數(shù)，vlaue 般為字符串類型的const checkboxnum = (ruls, value, callback) => settimeout() => if (lvalue) callback(new error(1出庫盒數(shù)不能為空')；if (value * 200 > ruls.maxvalue() callback(new error('岀庫數(shù)量不得大于當(dāng)前系統(tǒng)庫存量');if (!number.isinteger(value * 1) cal

4、lback(new error(1請(qǐng)輸入一個(gè)整數(shù)')； else if (value < 0 | value > 50) callback(new error('岀庫盒數(shù)不得大于50盒')； else callback();export maxvalue minvalue， checknum, x checkboxnum ；使用吋引用如下import checkboxnum from '/common/js/validate'即可使用。4、form表單數(shù)據(jù)情清空容易遇到的問題(1) 、<el-form :model="erro

5、raddform" ref="erroraddform" >(2) 、清除form表單屮的數(shù)據(jù)，需要在 每個(gè)要想被清除內(nèi)容的小組件上注意寫prop=”(3) 、 this.$refsformname.resetfields();二、表格1、常用屬性說明<el-table :data=l,blankcardh ref=l,multipletable,' border select=,handleselection" selectionchangg=”handleselchangg” style二"width:100%; i:r

6、ow-classname="tablerowclassname”>(1) > ref為引用(2) > :row-class-name y樣式處理函數(shù)2、自定義模板(1) 、usednum為數(shù)據(jù)源里面的字段<el-table-column label=h盒數(shù)” width=,l80pxm><template slot-scope=”scope"><p>scope> row.usednum/scope.row.maxnum</p> </templa</el-table-column>(2)

7、 、字典對(duì)應(yīng)a、引入字典 import out_libary_flag from '/common/js/dict'b、聲明字典outlibflag： out_libary_flagjc、使用字典<el-table-column prop=l,permitoutlibflag,1 width=,l80px" label=,f是否可以出庫"><template slot-scope=,scope,>outlibflag scoperow.permitoutlibflag</templa</etable-column>3

8、、表格屮根據(jù)特殊條件做行樣式處理：例如：標(biāo)紅顯示(1) 、定義函數(shù)<el-table :data=,blankcard,' border style="width: 100%;11 : row-class-name="tablerowclassname11 >(2) 、根據(jù)條件做樣式處理tablerowclassname(row) let today = new date();let yesterday = new date(today - 1000 * 60 * 60 * 24);if (row.unreturnednum = 0) return 1

9、info-row1; else if (row.unreturnednum > 0 && row.lastupdatetime < yesterday.gettime() return 'positive-row1;return(3) . css樣式定義 :l廠0司 t>a c icgloui n d : 甘 el - "table positive low bm u rgrou n d : #f f fauo;4、表格勾選的樣式處理。(1) 、全選處理函數(shù)：select-all(2) 、去除勾選 this.$refs.multipletab

10、le.clearselection();其中 multipletable 為表格綁定的 數(shù)據(jù)源的引用 ref二"multipletable"。(3) 、滿足某一條件不可勾選:selectable="handledissel"<el-table-column width=w80pxm type=hselectionm :selectable=,handledissel" :min=,ln :max="l,>handledissel(row) i-f (row.pursenum = row storsgenum) return

11、 false; else return 七rue;三、彈出框設(shè)置dialog框大小(1) 、默認(rèn)設(shè)置:size=wsma i l/la rge/ti nyw(2) 、自定義設(shè)置：.el-dialog-small width: 600px;注意：需要在 css 里面加入 scoped2、自定義設(shè)置footer<div slot=,footerh class=hdialogrighdialog-rightaion"><el-button style=mwidth: 100px;m type="primary,t click=hsubmitlib( 'f

12、orm')">確定</el-button> <el-button style=hwidth:100px;m click=mdialogformvisible = falsem>取消</el-button></div>四、過濾a 統(tǒng)一放在 src/common/js/filters.js 里面；b、引入所需要的過濾:import ymd, splitnum, limitname, speciallength from '/common/js/filters'；c、在 filter 中聲明:filters: s

13、plitnum,ymd,limitname,speciallength,。1、時(shí)間戳過濾(1) >提供dd/mm/yyyy格式過濾的ymd和dd/mm/yyyy h:m:s格式的ymd2過濾方式。(2) 表格自定義模板中使用: scope.row.pursetime | ymd(3) input 輸入框中過濾:<el-input:value="new date() | ymd" readonlyx/el-input>2、數(shù)字過濾(1)、將 1000 過濾成 1,000 使用 splitnum,使用時(shí):scope.row.remainnum | splitn

14、um3序列號(hào)分割(1) >過濾過長(zhǎng)的序列號(hào)：limitboxnum4、分割采集點(diǎn):limitcollection5 分割地址：limitaddres。五、頁面設(shè)計(jì)規(guī)范在src/common/styles/vars.scss文件屮，頁而統(tǒng)一高度設(shè)置，每個(gè)頁面直接引入該樣式。 standard-heigh七 wid七h(yuǎn) : au-toj| heigh七：587pxj f on 七-sine: 14pxjktempla<div class="standard-hei呂ht”> <section>2、提示信息設(shè)置this.$notify（message :

15、9;請(qǐng)選擇條i己錄 ！'丄 type:'warning'»duration: 1000）；3、dialog框設(shè)置(1)、內(nèi)容項(xiàng)較少時(shí)放在dialog框內(nèi)，說明和內(nèi)容上下排列。岀庫曰期:18/12/2017(2)、dialog框內(nèi)容過多時(shí)，用頁面跳轉(zhuǎn)實(shí)現(xiàn)。4、寬度、高度設(shè)置(1) 、放在導(dǎo)航欄操作按鈕：少于7個(gè)字的寬度都設(shè)置為loopxo(2) 、導(dǎo)航欄文本字體樣式設(shè)計(jì) style="font-size:20px;color:#20a0ff;"q(3) 、表格：列表中序號(hào)和勾選框的寬度都為:width="80pxh(4) 、dial

16、og框,一般采用size二"small",字體大小采用默認(rèn)字體。(5) 、輸入框?qū)挾纫话阍O(shè)置為width="220px"(6) 、表格列表數(shù)據(jù)項(xiàng)過多時(shí)采用過濾，只保留一部分，鼠標(biāo)浮上去全部展示在鼠標(biāo)上 而' °5、分頁設(shè)置(1)、頁面設(shè)置<div class="block" style="text-align:right;"<el-pagination size-change二"handlesizechange" current-change二"handl

17、ecunrentchange'1:current-page二"page.currentpage" :pagesize二"page.pagesize" :page-sizes=,10> 20， 30， 40 layout="totai丿 prev, pager, next4 jumper sizes" :total="page.totalcount"></el-pagination></div>(2)、聲明(3)、點(diǎn)擊分頁調(diào)整handlesizechange(val) co

18、nsole.log(' 每頁 $val 條')； 打handlecurrentchange(val) console.log('當(dāng)前頁：$val '); this.page.currentpage = val; this. loaddata();/ 加載數(shù)據(jù)六、頁面數(shù)據(jù)傳輸in頁面間通過sessionstorage傳送數(shù)據(jù)(json字符串)。例如(1)、將所要傳送的value,并將其轉(zhuǎn)為json字符串緩存，即：sessio nstorage.setltem(*work erf orm json.stringify(value);(2)、頁面中獲取 value,即：sessionstorage.getltemcworkerform')2、vuejs中跨頁面?zhèn)鬟f數(shù)據(jù)(只傳id)(1) 、路由傳 id： this.$router.push('/web/inspector/$value.jobld');(反引號(hào))(2) 、index.js 里面 path 后面加/:id (傳 id)(3) 、頁面接收 id： this.$route.