第一次使用vue，很多不會(huì)做。沒有用npm安裝一整套的vue丈攒，都是引用鏈接，用了element-ui + vue-router + axios授霸。感覺這樣麻煩更多了巡验，做的一個(gè)很基礎(chǔ)的后臺(tái)管理系統(tǒng)，里面的組件都寫在了一個(gè)頁面里碘耳，很混亂显设，還是得去試下用整套的vue。
- breadcrumb
vue-router el-menu 與 breadcrumb 結(jié)合使用
el-menu 中的index="/index"里的內(nèi)容即指向路由
getBreadcrumb () {
let matched = this.$route.matched.filter(item => item.name);
const first = matched[0];
if (first && first.path == '/index/mining') {
matched = [{ path: '/index', name: '交易挖礦'}].concat(matched)
} else if (first && first.path == '/detail') {
matched = [{ path: '/invite', name: '邀請(qǐng)好友'}].concat(matched)
}
_this.levelList = matched;
}
- el-form
el-form 要加上ref="miningForm":model="miningForm"辛辨，要做表單驗(yàn)證要加上:rules="miningrules"敷硅，并在data里寫驗(yàn)證。
el-form-item 要加上prop="AccessID"
el-input 寫法<el-input v-model="miningForm.AccessID" :disabled="disabled"></el-input>
<el-form
ref="miningForm"
:model="miningForm"
:rules="miningrules"
:label-position="labelPosition"
label-width="150px">
<el-form-item label="交易平臺(tái) 交易ID" prop="AccessID">
<div class="col-xs-12">
<el-input v-model="miningForm.AccessID" :disabled="disabled"></el-input>
</div>
</el-form-item>
<el-form-item label="交易平臺(tái) 交易密鑰" prop="SecretKey">
<div class="col-xs-12">
<el-input v-model="miningForm.SecretKey" :disabled="disabled"></el-input>
</div>
</el-form-item>
<el-form-item label="交易對(duì)">
<div class="col-xs-12">
<el-select v-model="value"
:disabled="disabled"
@change="changeOrder">
<el-option
v-for="item in ordertype"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</el-form-item>
<el-form-item label="最大運(yùn)行次數(shù)" label-suffix="次" prop="maxruntime">
<div class="col-xs-10">
<el-input v-model="miningForm.maxruntime" :disabled="disabled"></el-input>
</div>
<label class="col-xs-2">次</label>
</el-form-item>
<el-form-item label="交易間隔時(shí)間" prop="dealtime">
<div class="col-xs-10">
<el-input v-model="miningForm.dealtime" :disabled="disabled"></el-input>
</div>
<label class="col-xs-2">秒</label>
</el-form-item>
<el-form-item label="撤單時(shí)間" prop="intervaltime">
<div class="col-xs-10">
<el-input v-model="miningForm.intervaltime" :disabled="disabled"></el-input>
</div>
<label class="col-xs-2">秒</label>
</el-form-item>
<el-form-item>
<div class="col-xs-12">
<template v-if="disabled==false">
<el-button type="success" @click="start('miningForm')">啟動(dòng)</el-button>
</template>
<template v-else>
<el-button type="success" plain disabled>啟動(dòng)中</el-button>
</template>
<el-button type="danger" @click="stop" :disabled="!disabled">停止</el-button>
</div>
</el-form-item>
</el-form >
- 有一處在表格中點(diǎn)某一行的明細(xì)進(jìn)去看不會(huì)寫愉阎，先這么強(qiáng)行做一下绞蹦。
主要是this.bus.$emit和this.bus.$on不太會(huì)用，this.bus.$on中可以打印出接收到的數(shù)據(jù)但是不能綁到data里去榜旦。
//html
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="detailClick"><span class="hide">{{scope.$index}}</span>明細(xì)</el-button>
</template>
//js
detailClick: function(event){
var _this = this
var el = event.currentTarget
var detailIndex = el.children[0].children[0].innerHTML
var username = _this.inviter[detailIndex].username
this.$router.push({path:"/detail", query: {username: username}})
}
在 /detail 組件內(nèi)接收 var username = _this.$route.query.username
