在我們使用Vue+Element開發前端的時候，往往涉及到很多界面組件的使用，其中很多直接采用Element官方的案例即可，有些則是在這個基礎上封裝更好利用、更少代碼的組件；另外有些則是直接采用第三方開發好的組件，目的就是實作所需功能外，盡量簡化界面使用代碼，本篇隨筆介紹在我的專案中經常用到的各種界面組件和它的界面效果，以便在實際開發中進行相應的參考，提高開發效率，
我們以幾個常規界面來介紹相關控制元件的使用，如串列界面，包括查詢、表格、分頁等資訊，查詢框中包含一些關鍵欄位的資訊查詢，而表格中則包含重要欄位資訊的展示或者相關操作，
然后編輯界面，簡單的如下所示，
復雜界面中，包含很多錄入資訊的界面組件
另外還可以設計富文本、圖片上傳等操作，
以上就是一些常規界面的錄入情況，其中使用到了很多相關的界面組件，包括文本錄入框、下拉選框、樹串列、標簽、圖片上傳、富文本、日期、省市區串列等等，
下面分別對一些常規的界面組件的使用進行介紹，
1、普通文本輸入框
文本框一般是比較常見的界面組件，一個是內容錄入比較靈活，其次也是因為使用簡單方便，
一般這種錄入界面組件，都是放在表單里面處理比較多，因為可以利用表單的校驗功能實作校驗等操作，也可以利用表單對應的物件屬性一并提交，
使用代碼很簡單，如下所示，
<el-form-item label="姓名" prop="name"> <el-input v-model="searchForm.name" /> </el-form-item>
如果是有些錄入需要有前綴或者后綴的，則可以通過Slot模板進行處理，
<el-col :span="12"> <el-form-item label="身高" prop="height"> <el-input v-model="addForm.height"><span slot="suffix">厘米</span></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="體重" prop="weight"> <el-input v-model="addForm.weight"><span slot="suffix">公斤</span></el-input> </el-form-item> </el-col>
或者我們參考官方Element的案例，也可以看到使用的效果和代碼
<div> <el-input placeholder="請輸入內容" v-model="input1"> <template slot="prepend">Http://</template> </el-input> </div> <div style="margin-top: 15px;"> <el-input placeholder="請輸入內容" v-model="input2"> <template slot="append">.com</template> </el-input> </div> <div style="margin-top: 15px;"> <el-input placeholder="請輸入內容" v-model="input3" class="input-with-select"> <el-select v-model="select" slot="prepend" placeholder="請選擇"> <el-option label="餐廳名" value="1"></el-option> <el-option label="訂單號" value="2"></el-option> <el-option label="用戶電話" value="3"></el-option> </el-select> <el-button slot="append" icon="el-icon-search"></el-button> </el-input> </div>
另外，文本輸入框還包括一個多行的輸入textarea的型別輸入，
<el-input type="textarea" placeholder="請輸入內容" v-model="textarea" maxlength="30" show-word-limit>
有時候，文本框還需要輸入長度的限制，這個在文本框很容易設定，界面效果如下所示，
界面代碼如下所示，
<el-input type="text" placeholder="請輸入內容" v-model="text" maxlength="10" show-word-limit> </el-input> <div style="margin: 20px 0;"></div> <el-input type="textarea" placeholder="請輸入內容" v-model="textarea" maxlength="30" show-word-limit> </el-input>
2、日期輸入范圍選擇
日期我們一般用內置的el-date-picker即可，可以顯示短日期、帶時間的長日期，或者選擇日期范圍多項選擇，
<el-form-item label="出生日期" prop="birthDate"> <el-date-picker v-model="addForm.birthDate" align="right" type="date" placeholder="選擇日期" value-format="yyyy-MM-dd" /> </el-form-item>
而我們在查詢的時候，一般就是一個日期區間，
我們只需要指定type="daterange"即可，
<el-form-item label="創建時間"> <el-date-picker v-model="searchForm.creationTime" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期" :picker-options="pickerOptions" /> </el-form-item>
其中的 pickerOptions 則是我們定義的快捷選擇項，單獨放置一個檔案constantOptions.js里面，需要匯入物件使用即可，這樣可以減少很多頁面的JS代碼，其他常見變數也是這樣的方式處理，
// 選擇時間范圍的快捷選項 export const pickerOptions = { shortcuts: [ { text: '昨天', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 1); picker.$emit('pick', [start, end]); } }, { text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]); } }, { text: '最近一個月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); } }, { text: '最近三個月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', [start, end]); } }] }
日期輸入控制元件，有時候會出現獲得的日期值比實際的值少一天的問題，一般通過設定 value-format="yyyy-MM-dd" 即可解決，
3、標簽顯示和錄入
標簽的顯示和錄入，也是我們很常見的處理，多顏色的標簽可以提高界面的美觀，同時也是對多選值的友好顯示，
我們先來看看官方的案例，
<el-tag>標簽一</el-tag> <el-tag type="success">標簽二</el-tag> <el-tag type="info">標簽三</el-tag> <el-tag type="warning">標簽四</el-tag> <el-tag type="danger">標簽五</el-tag>
其實就是指定type不同就可以實作不同的效果，另外我們還可以通過設定effect屬性來改變主題，默認為 light
標簽的顯示是有了，一般我們還需要一個標簽的錄入操作，雖然官方也提供了一個案例，不過是簡單對Tag標簽組件的使用，代碼還是不少，
實際上，我們在使用組件的時候，系統盡量減少代碼量，因此我們可以參考官方的方式建立一個集標簽顯示和錄入功能一起的組件，不過Github上已經有人開發了，我就直接拿過來用吧，
https://github.com/xiispace/el-input-tag
界面效果如下所示，
使用的時候，界面代碼和普通組件一樣簡單，非常棒，
<el-form-item label="標簽" prop="tags"> <el-input-tag v-model="editForm.tags_array" /> </el-form-item>
JS部分只需要轉換下我們的內容即可，我們tags屬性存盤是逗號分開的字串，那么tags_array這是陣列，我們獲取值的時候，需要進行轉換，把字串轉換為陣列的值，
// 將字串的標簽，轉換為Array集合 if (this.addForm.tags) { this.addForm.tags_array = this.addForm.tags.split(',') }
而修改組件，會引起陣列的改變，為了避免集中轉換，我們可以通過watch函式來統一處理，這樣tags內容就會自動變化了，
watch: { // 對過濾內容進行監控，實作樹串列過濾
// 鍵路徑必須加上引號
'addForm.tags_array': function(val, oldval) {
if (val) {
this.addForm.tags = val.toString()
}
},
'editForm.tags_array': function(val, oldval) {
if (val) {
this.editForm.tags = val.toString()
}
}
},
4、下拉串列和字典串列Select組件
下拉串列或者下拉框是我們常見的選擇方式之一，下拉串列有時候可以是固定串列，如男女、有效/無效， 也可以是多個動態串列供選擇，
或者
或者是一連串聯動的組件構成，
Select組件的使用如下所示，
<el-select v-model="value" placeholder="請選擇"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select>
而其中的JS部分，options就是有value,lable組成的物件陣列，如下代碼所示
<script> export default { data() { return { options: [{ value: '選項1', label: '黃金糕' }, { value: '選項2', label: '雙皮奶' }], value: '' } } } </script>
為el-select設定clearable屬性，則可將選擇器清空，為el-select添加filterable屬性即可啟用搜索功能，
為el-select設定multiple屬性即可啟用多選，此時v-model的值為當前選中值所組成的陣列，默認情況下選中值會以 Tag 的形式展現，你也可以設定collapse-tags屬性將它們合并為一段文字，
縱觀Select組件，其資料源要么是固定串列，要么是從資料庫字典里面獲取的內容，為了簡化界面代碼的呼叫，我們把它作為字典組件進行了定義，可以系結固定串列，也可以系結字典表里面的字典型別名稱，
組件使用很簡單，如下代碼所示，
<el-form-item label="狀態"> <my-dictdata v-model="addForm.status" :options="Status"/> <my-dictdata v-model="addForm.status" type-name="狀態"/> </el-form-item>
創建一個組件，定義好兩個屬性，如下代碼所示，
在組件Mounted的時候，我們對這些內容進行決議，構建為對應組件的資料源即可，
mounted() { var that = this; if (this.typeName && this.typeName !== '') { // 使用字典型別，從服務器請求資料 var params = { dictTypeName: this.typeName }; dictdata.GetListItemByDictType(params).then(data => { var list = data.result; // console.log(list); if (list) { list.forEach(item => { // console.log(item) that.dictItems.push({ text: item.text, value: item.value }); }) } }) } else if (this.options && this.options.length > 0) { // 使用固定字典串列 this.options.forEach(item => { if (item && typeof (item.value) !== 'undefined') { that.dictItems.push(item) } }); } // 設定默認值 this.svalue = https://www.cnblogs.com/wuhuacong/archive/2020/11/03/this.value; },
這樣，使用起來就很方便了，可以直接系結字典型別即可，
<el-col :span="12"> <el-form-item label="民族" prop="nationality"> <my-dictdata v-model="editForm.nationality" type-name="民族" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="學歷" prop="education"> <my-dictdata v-model="editForm.education" type-name="學歷" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="婚姻狀況" prop="marriage"> <my-dictdata v-model="editForm.marriage" type-name="婚姻狀況" /> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="星座" prop="star"> <my-dictdata v-model="editForm.star" type-name="星座" /> </el-form-item> </el-col>
這樣的組件，相對于每次呼叫API去獲取字典資源，然后進行轉換處理，代碼更加簡單易懂了，同時也更加優雅，提高代碼質量，
5、復選框和單選框
復選框和單選框也是經常使用的，對簡單的一些選項進行勾選處理，
多選框有多選框組，單選框也有單選框組，這樣組合起來界面更加美觀，
<template> <el-checkbox-group v-model="checkList"> <el-checkbox label="復選框 A"></el-checkbox> <el-checkbox label="復選框 B"></el-checkbox> <el-checkbox label="復選框 C"></el-checkbox> <el-checkbox label="禁用" disabled></el-checkbox> <el-checkbox label="選中且禁用" disabled></el-checkbox> </el-checkbox-group> </template> <script> export default { data () { return { checkList: ['選中且禁用','復選框 A'] }; } }; </script>
<template> <el-radio-group v-model="radio"> <el-radio :label="3">備選項</el-radio> <el-radio :label="6">備選項</el-radio> <el-radio :label="9">備選項</el-radio> </el-radio-group> </template> <script> export default { data () { return { radio: 3 }; } } </script>
這兩個是官方比較典型的案例說明了，一般我們也是以組合的方式進行使用，
例如我們在產品型別系結品牌串列的時候，就是采用了復選框漢族，通過key/value的集合組合即可實作鍵值對的處理，
<el-col :span="24"> <el-form-item label="品牌關聯" prop="bindBrands"> <el-checkbox-group v-model="addForm.bindBrands" style="padding:10px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"> <el-checkbox v-for="(item, i) in brandList" :key="i" :label="item.id">{{ item.brandName }}</el-checkbox> </el-checkbox-group> </el-form-item> </el-col>
<el-form-item label="虛擬商品" prop="isVirtual"> <el-radio-group v-model="addForm.isVirtual"> <el-radio class="radio" :label="1">是</el-radio> <el-radio class="radio" :label="0">否</el-radio> </el-radio-group> </el-form-item>
5、Switch開關
Switch開關有點類似于單選框的操作，不過提供比較美觀的一個處理，表示兩種相互對立的狀態間的切換，多用于觸發「開/關」，
<el-switch v-model="value1" active-text="按月付費" inactive-text="按年付費"> </el-switch> <el-switch style="display: block" v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付費" inactive-text="按年付費"> </el-switch> <script> export default { data() { return { value1: true, value2: true } } }; </script>
這個組件提供了很多屬性配置，可以自定義激活/未激活的顏色、文本、值的資訊，如下說明，
因此，我們有時候的值如果是0,1的就可以設定一下active-value/inactive-value的值，否則默認是Boolean變數，
如下，有時候我們在查詢中也會增加一個Switch來處理一些屬性查詢，
如果我們這樣用，而isVirtual屬性是0,1的數值的話，那么我們就需要進行轉換了
<el-form-item label="虛擬商品" prop="isVirtual"> <el-switch v-model="searchForm.isVirtual" active-color="#13ce66" inactive-color="gray" /> </el-form-item>
那么我們發起查詢的時候，就需要把布爾變數轉換為0,1的值了，如下代碼所示
getlist() { // 串列資料獲取
var param = { // 構造常規的分頁查詢條件
// 分頁條件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
// 查詢過濾條件
Code: this.searchForm.code,
Name: this.searchForm.name,
IsVirtual: this.searchForm.isVirtual
};
// 使用日期范圍選擇控制元件，在查詢物件增加開始日期CreationTimeStart、結束日期CreationTimeEnd
this.addDateRange(param, this.searchForm.creationTime)
param.IsVirtual = param.IsVirtual ? 1 : 0;// 修改資料型別為int
// console.log(param)
// 獲取串列，系結到模型上，并修改分頁數量
this.listLoading = true
productType.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
或者我們定義active-value、inactive-value來處理會簡單一些，
<el-form-item label="虛擬商品" prop="isVirtual"> <el-switch v-model="searchForm.isVirtual" active-value="1" inactive-value="0" active-color="#13ce66" inactive-color="gray" /> </el-form-item>
那這樣查詢就不需要轉換bool到數值了，因為已經默認是0/1的數值型別了，更改后的查詢代碼如下所示，
getlist() { // 串列資料獲取
var param = { // 構造常規的分頁查詢條件
// 分頁條件
SkipCount: (this.pageinfo.pageindex - 1) * this.pageinfo.pagesize,
MaxResultCount: this.pageinfo.pagesize,
// 查詢過濾條件
Code: this.searchForm.code,
Name: this.searchForm.name,
IsVirtual: this.searchForm.isVirtual
};
// 使用日期范圍選擇控制元件，在查詢物件增加開始日期CreationTimeStart、結束日期CreationTimeEnd
this.addDateRange(param, this.searchForm.creationTime)
// console.log(param)
// 獲取串列，系結到模型上，并修改分頁數量
this.listLoading = true
productType.GetAll(param).then(data => {
this.list = data.result.items
this.pageinfo.total = data.result.totalCount
this.listLoading = false
})
},
6、訊息提示及彈框
在組件或者頁面里面，我們都需要大量使用到提示資訊，確認資訊等資訊提示功能，而Element也提供了這樣不同的組件來使用，
多個不同型別的訊息提示視窗，界面如下所示，
Notification 通知組件，懸浮出現在頁面角落，顯示全域的通知提醒訊息，界面如下所示
我們為了方便，一般先簡單封裝一下，并在全域掛載這些方法，以便在不同的地方簡化呼叫，
// 提示成功資訊 Vue.prototype.msgSuccess = function(msg) { this.$message({ showClose: true, message: msg, type: 'success' }) } // 提示警告資訊 Vue.prototype.msgWarning = function(msg) { this.$message({ showClose: true, message: msg, type: 'warning' }) } // 提示錯誤資訊 Vue.prototype.msgError = function(msg) { this.$message({ showClose: true, message: msg, type: 'error' }) } // 提示資訊 Vue.prototype.msgInfo = function(msg) { this.$message.info({ showClose: true, message: msg }) } // 確認資訊 Vue.prototype.msgConfirm = function(msg = '您確認洗掉選定的記錄嗎?') { return this.$confirm(msg, '操作提示', { type: 'warning' // success，error，info，warning // confirmButtonText: '確定', // cancelButtonText: '取消' }) }
這樣我們在頁面中就可以很方便使用了，如洗掉確認對話框操作，
showDelete(id) { // 洗掉對話框處理
this.msgConfirm().then(() => {
// 洗掉操作處理代碼
var param = { id: id }
productType.Delete(param).then(data => {
// console.log(data)
if (data.success) {
// 提示資訊
this.msgSuccess('洗掉成功!')
// 重繪資料
this.getlist()
} else {
this.msgError('洗掉失敗：' + data.error)
}
})
})
},
由于篇幅有限，下篇在繼續介紹其他組件的使用了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/200890.html
標籤：其他