<template>
<transition name="slide">
<div class="picker-wrap">
<mt-header class="header" title="Picker" :fixed="headerConf.fixed">
<div slot="left">
<mt-button icon="back" @click="back">返回</mt-button>
</div>
</mt-header>
<div class="content" ref="content">
<div class="row">
<div class="title">普通示例</div>
<mt-picker :slots="pickerConf1.slot"
:visibleItemCount="pickerConf1.visibleItemCount"
:itemHeight="pickerConf1.itemHeight"
@change="onValuesChange"
></mt-picker>
</div>
<div class="row">
<div class="title">两级</div>
<mt-picker :slots="pickerConf2.slot" @change="onValuesChange"></mt-picker>
</div>
<div class="row">
<div class="title">多级</div>
<mt-picker :slots="pickerConf3.slot" @change="onValuesChange"></mt-picker>
</div>
<div class="row">
<div class="title">多级联动</div>
<mt-picker :slots="pickerConf4.slot" @change="linkage"></mt-picker>
<div class="result">选择的是:{{pickerConf4.value}}</div>
</div>
<div class="row">
<div class="title">滚动展示</div>
<mt-picker class="dynamic" :slots="pickerConf5.slot" ref="dynamic"></mt-picker>
</div>
<div class="row">
<mt-button class="pickerBtn" type="default" @click="pickerBtn">点击弹出</mt-button>
</div>
<div class="from-bottom" ref="bottomWrap" v-show="pickerConf6.flag">
<div>
<mt-button class="close-pop" type="danger" @click="closePop">关闭</mt-button>
<mt-picker :slots="pickerConf6.slot" @change="linkage"></mt-picker>
</div>
</div>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
import { Button, Picker } from 'mint-ui'
import { headerMixin } from 'assets/js/mixins'
import { prefixStyle } from 'assets/js/utils'
const transform = prefixStyle('transform')
export default {
mixins: [headerMixin],
data () {
return {
pickerConf1: {
slot: [
{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'center'
}
],
visibleItemCount: 3, // 选项可见个数
showToolbar: false, // 是否在组件顶部显示一个 toolbar，内容自定义(组件内部写该插槽)
itemHeight: 50, // 选项高度
},
pickerConf2: {
slot: [
{
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot1',
textAlign: 'right'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015-01', '2015-02', '2015-03', '2015-04', '2015-05', '2015-06'],
className: 'slot3',
textAlign: 'left'
}
],
},
pickerConf3: {
slot: [
{
flex: 1,
values: ['2015', '2016', '2017', '2018', '2019', '2020'],
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: ['2015', '2016', '2017', '2018', '2019', '2020'],
className: 'slot3',
textAlign: 'center'
},
{
divider: true,
content: '-',
className: 'slot4'
}, {
flex: 1,
values: ['2015', '2016', '2017', '2018', '2019', '2020'],
className: 'slot5',
textAlign: 'center'
}
]
},
pickerConf4: {
value: '四川省成都市区',
slot: [
{
flex: 1,
values: ['四川省', '北京市'],
className: 'slot1',
textAlign: 'center'
},
{
divider: true,
content: '-',
className: 'slot2'
},
{
flex: 1,
values: ['成都', '雅安'],
className: 'slot3',
textAlign: 'center'
},
{
divider: true,
content: '-',
className: 'slot4'
},
{
flex: 1,
values: ['市区', '双流'],
className: 'slot5',
textAlign: 'center'
}
]
},
pickerConf5: {
slot: [
{
flex: 1,
values: ['1', '2', '3', '4', '5', '6'],
className: 'slot1',
textAlign: 'center'
}
],
timer: null
},
pickerConf6: {
flag: false,
value: '四川省成都市区',
slot: [
{
flex: 1,
values: ['四川省', '北京市'],
className: 'slot1',
textAlign: 'center'
},
{
divider: true,
content: '-',
className: 'slot2'
},
{
flex: 1,
values: ['成都', '雅安'],
className: 'slot3',
textAlign: 'center'
},
{
divider: true,
content: '-',
className: 'slot4'
},
{
flex: 1,
values: ['市区', '双流'],
className: 'slot5',
textAlign: 'center'
}
]
},
}
},
mounted () {
let dynamicLen = this.pickerConf5.slot[0].values.length
let jumpLen = 36
let initPosition = 72
let currentPositon = 72
let count = 0
this.pickerConf5.timer = setInterval(() => {
this.$refs.dynamic.$children[0].$refs.wrapper.style[transform] = `translate(0px, ${currentPositon}px) translateZ(0px)`
currentPositon -= jumpLen
count++
if (count === dynamicLen) {
currentPositon = initPosition
count = 0
}
}, 1000)
},
beforeDestroy () {
clearInterval(this.pickerConf5.timer)
this.pickerConf5.timer = null
},
methods: {
onValuesChange (picker, values) { // 这里log与vconsole冲突会导致内存溢出，这里看log需要先移除vconsole
},
linkage (picker, values) { // 这里log与vconsole冲突会导致内存溢出，这里看log需要先移除vconsole
switch (values[0]) {
case "四川省":
picker.setSlotValues(1, ['成都', '雅安'])
break
case "北京市":
picker.setSlotValues(1, ['市辖区'])
break
}
switch (values[1]) {
case "成都":
picker.setSlotValues(2, ['市区', '双流'])
break
case "雅安":
picker.setSlotValues(2, ['市区', '名山'])
break
case "市辖区":
picker.setSlotValues(2, ['市区'])
break
}
this.pickerConf4.value = values.join('')
},
pickerBtn () {
this.pickerConf6.flag = true
setTimeout(() => {
this.$refs.bottomWrap.style[transform] = `translate(0px, -200px) translateZ(0px)`
}, 500)
},
closePop () {
setTimeout(() => {
this.pickerConf6.flag = false
}, 500)
this.$refs.bottomWrap.style[transform] = `translate(0px, 0px) translateZ(0px)`
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~assets/css/variable.styl"
@import "~assets/css/transition.styl"
@import "~assets/css/flex.styl"
.picker-wrap {
position absolute
z-index 100
top 0
left 0
right 0
bottom 0
background-color $color-background
.content {
padding-top 50px
padding-bottom 20px
.row {
position relative
width 90%
margin 10px auto
.title {
height 30px
line-height 30px
padding 5px 10px
margin-top 20px
font-weight bold
font-size $font-size-medium-x
letter-spacing 1px
}
.result {
height 40px
line-height 40px
padding 5px 0
text-align center
}
.picker {
background-color white
}
.pickerBtn {
display block
width 80%
height 40px
line-height 40px
margin 50px auto
}
}
.from-bottom {
z-index 999999
position fixed
top 100%
left 0
width 100%
height 200px
background-color white
border-top 1px solid $color-shadow
transition all .5s
.close-pop {
z-index 1000
position absolute
right 10px
top 10px
width 100px
height 30px
}
}
}
}
</style>
