1、級聯選擇器（el-cascader）
先看一下效果吧，這個是選擇的效果，支持多選，根節點禁選
這個是回顯的效果
接下來說一下怎麼實現吧~
//其中platList爲數據源,codeList是綁定選中的值，props爲配置選項，clearable可清空（選完之後後面帶一個刪除的按鈕）,handleToChange是選中值後觸發的，可以在這個方法中綁定值
<el-cascader :options="platList" v-model="codeList" :props="props" clearable @change="handleToChange"></el-cascader>
接下來處理數據，首先需要回顯的話，我這邊是和後端小哥哥協調了一下，把所有的數據都返回給我了，也就是說返回的是一個樹形結構的數據（嘻嘻~）
<script>
export default {
data () {
return {
codeList: [],
props: {
multiple: true,
expandTrigger: 'click', //下一級展開的方式（hover/click）
value: 'code', //value和label是後端返給數據中你需要綁定的值
label: 'name'
},
platList: [],
}
},
created () {
this.getPlatList()
},
methods: {
//這裏this.$api.GetList是封裝了一個axios請求，也可以用axios.get
getPlatList () {
this.$api.GetList('請求的接口').then(res => {
this.platList = res.map(row => {
row.disabled = true //根節點禁選
})
})
},
handleToChange (value) {
console.log(value)
//這裏處理選中的數據，如給後端提交的數據的格式等等
}
}
}
</script>
這時候應該可以顯示第一個圖的效果了，接下來說一下回顯的問題,通過請求後端的接口，回來後賦值給codeList，就OK了。
2、時間選擇器（el-date-picker）
先看下效果,這個比較簡單直接上代碼
//直接上代碼，這個是一個時間段的選擇，value-format是時間的格式，expireTimeOption這個方式我是處理時間的禁用狀態
<el-date-picker v-model="sortTime" type="datetimerange" range-separator="至" start-placeholder="開始日期" end-placeholder="結束日期" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="expireTimeOption"></el-date-picker>
<script>
export default{
data () {
return {
info: {
pushTime: '',
endTime: ''
},
sortTime: [],//這個時間段的選擇是一個數組
expireTimeOption: {
disabledDate (date) {
return date.getTime() < Date.now() - 8.64e7
}
}
}
},
watch: {
//由於後端的開始日期和結束日期是兩個字段，所以這裏做了處理
sortTime (newVal, oldVal) {
if (newVal !== null) {
this.info.pushTime = moment(newVal[0]).format('YYYY-MM-DD HH:mm:ss')
this.info.endTime = moment(newVal[1]).format('YYYY-MM-DD HH:mm:ss')
}
}
}
}
</script>
3、上傳圖片（el-upload）
//封裝的一個組件
<el-upload
:disabled="isView"
:list-type="uploadType"
:action="baseUrl"
:data="uploadData"
:before-upload="beforeUpload"
:file-list="fileList"
:on-success="handelSuccess"
:on-preview="viewImage"
:on-remove="handleRemove">
<i v-show="uploadType != 'text'" class="el-icon-circle-plus"></i>
<el-button size="small" type="primary" v-show="uploadType == 'text'">點擊上傳
</el-button>
</el-upload>
<el-dialog title="圖片查看" :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl">
</el-dialog>
<script>
export default {
props: {
'fileList': {
type: Array
},
//是否可用
'isView': {
default: false
},
//上傳圖片的數量
'uploadSize': {
defalut: 1
},
// 上傳圖片的時候需要傳給後端的數據
'uploadData': {},
// 上傳類型-圖片picture-card,文件上傳爲text
'uploadType': {
default: 'picture-card'
}
},
data () {
return {
baseUrl: '上傳圖片的接口',
dialogVisible: false
}
},
methods: {
//上傳之前的處理
beforeUpload (file) {
console.log(file)
//可以做一些上傳圖片的處理,（如圖片的格式，圖片的大小，圖片的數量等）
},
//成功後的賦值
handelSuccess (response, file) {
console.log(response)
},
//預覽
viewImage (file) {
//預覽就是一個簡單的賦值過程
},
//刪除
handleRemove (file) {
//刪除就是從fileList中刪除當前的這一項
}
}
}
</script>
4、走馬燈（el-carousel）
走馬燈照着element官網的例子，可以實現，就是一個小問題，如果是兩張圖片的時候，循環的方向會有點問題，具體可以這樣處理(或者其他人有好方法可以分享下)
<div class="banner">
<el-carousel trigger="click" height="980px" indicator-position="none" @change="changeImage" arrow="never">
<el-carousel-item v-for="(item,index) in changeBannerList" :key="index">
<img :src="item.image" alt="banner">
</el-carousel-item>
</el-carousel>
<ul id="item-carousel" class="el-carousel__indicators el-carousel__indicators--horizontal">
<li v-for="(item, index) in bannerList" :key="index" :class="[index === indexActive? 'is-active': '','el-carousel__indicator','el-carousel__indicator--horizontal']">
<button class="el-carousel__button"></button>
</li>
</ul>
</div>
<script>
export default {
data () {
return {
indexActive: 0, // 處理banner循環問題
bannerList: [], //指示器的循環列表（如果你的走馬燈不需要指示器的話可以省略這一步）
changeBannerList: [] //圖片的循環列表
}
},
created () {
this.getBannerList()
},
methods: {
getBannerList () {
//原理就是把原來的值拼成4個（如原來是12,循環就是1212,現在需要把數據改成2121這樣的形式）
this.$api.GetList('請求後端的接口').then(res => {
this.bannerList = JSON.parse(JSON.stringify(res))
if (res.length === 2) {
this.changeBannerList = res
this.changeBannerList.push(res[0])
this.changeBannerList.unshift(res[1])
} else {
this.changeBannerList = res
}
})
},
changeImage (index) {
if (this.bannerList.length === 2) {
index === 2 ? this.indexActive = 0 : index === 3 ? this.indexActive = 1 : this.indexActive = index
} else {
this.indexActive = index
}
}
}
}
</script>
5、時間線（el-timeline）
先看下效果圖,這裏放一下主要的樣式
//timestamp 時間戳（可隱藏）,這個主要是橫向的樣式
<el-timeline>
<el-timeline-item v-for="(row,rIndex) in childInfo" :key="rIndex" :timestamp="row.name" placement="top">
<span class="icon-img"></span>
</el-timeline-item>
</el-timeline>
<script>
export default {
data () {
return {
childInfo: [{
name: '2019-03-02'
}, {
name: '2019-02-05'
}, {
name: '2019-01-15'
}]
}
}
}
</script>
<style lang="less">
.el-timeline-item {
float: left;
position: relative;
width: 140px;
padding-bottom: 20px;
}
.el-timeline-item__tail {
position: absolute;
left: 4px;
top: 5px;
height: 2px;
width: 100%;
border-top: 2px solid #E4E7ED;
}
</style>
6、步驟條（el-steps）
步驟條的這個我這邊的案例只要是結合定位做的一個效果，直接上代碼
這裏重點說一下定位的功能（頁面上在每一個需要定位的模塊前面加一個標籤（<div class="step-jump"></div>）），下面的js處理可以看代碼 ,說明一下這裏的isFixed是爲了處理步驟條的定位問題（剛開始固定，滾到到某一個高度的時候再懸浮）
//direction步驟條的方向（水平、垂直）, active這個是用來設置到哪一步的顏色
<div :class="['location-slide', isFixed ? 'location_fix': '' ]">
<el-steps direction="vertical" :active="activeStep" finish-status="wait">
//這裏的icon可以用來設置步驟條的圖標
<el-step v-for="(item,index) in list" :key="index" icon="el-icon-web-dian" :title="item.name" @click.native="jump(index)">
</el-step>
</el-steps>
</div>
<script>
export default{
data () {
return {
activeStep: 0,
scrollTop: 0,
isFixed: false,
list: [{
name: '智慧社區解決方案'
}, {
name: '方案應用'
}, {
name: '方案優勢'
}, {
name: '實際案例'
}, {
name: '讓生活更智慧'
}]
}
},
methods: {
onScroll () {
let itemList = document.querySelectorAll('.step-jump')
this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
if (this.scrollTop >= 600) {
this.isFixed = true
} else {
this.isFixed = false
}
for (let i = 0; i < itemList.length; i++) {
if (this.scrollTop >= itemList[i].offsetTop) {
this.activeStep = i
}
}
},
// 滾動定位的方法
jump (index) {
this.activeStep = index
let jump = document.querySelectorAll('.step-jump')
let total = jump[index].offsetTop + 500 //這裏加500是爲了調整定位的位置，你們可以自行調整
let distance = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
let step = total / 50
if (total > distance) {
smoothDown()
} else {
let newTotal = distance - total
step = newTotal / 50
smoothUp()
}
function smoothDown () {
if (distance < total) {
distance += step
document.body.scrollTop = distance
document.documentElement.scrollTop = distance
setTimeout(smoothDown, 10)
} else {
document.body.scrollTop = total
document.documentElement.scrollTop = total
}
}
function smoothUp () {
if (distance > total) {
distance -= step
document.body.scrollTop = distance
document.documentElement.scrollTop = distance
setTimeout(smoothUp, 10)
} else {
document.body.scrollTop = total
document.documentElement.scrollTop = total
}
}
}
}
}
</script>
<style lang="less" scoped>
.location-slide {
position: absolute;
top: 0;
left: 7%;
height: 240px;
.el-timeline-item {
padding-bottom: 47px;
}
}
.location_fix {
position: fixed !important;
top: 120px !important;
}
</style>