mirror of
https://gitee.com/TSpecific/tuniao-ui.git
synced 2026-03-07 16:24:01 +08:00
304 lines
8.8 KiB
Vue
304 lines
8.8 KiB
Vue
<template>
|
|
|
|
<view class="components-picker">
|
|
|
|
<!-- 顶部自定义导航 -->
|
|
<tn-nav-bar fixed>Picker选择器</tn-nav-bar>
|
|
|
|
<!-- 页面内容 -->
|
|
<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
|
|
|
|
<dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="false" @click="click">
|
|
<view class="tn-flex tn-flex-row-center"><tn-button backgroundColor="#01BEFF" fontColor="tn-color-white" @tap="showPicker">弹出Picker</tn-button></view>
|
|
<view class="picker-result tn-border-dashed">
|
|
{{ result }}
|
|
</view>
|
|
</dynamic-demo-template>
|
|
|
|
</view>
|
|
|
|
<!-- picker -->
|
|
<tn-picker
|
|
v-model="show"
|
|
:mode="mode"
|
|
:params="params"
|
|
:range="range"
|
|
:rangeKey="rangeKey"
|
|
:defaultSelector="defaultSelector"
|
|
:showTimeTag="showTimeTag"
|
|
:startYear="startYear"
|
|
:endYear="endYear"
|
|
:defaultTime="defaultTime"
|
|
:defaultRegin="defaultRegion"
|
|
:areaCode="areaCode"
|
|
:maskCloseable="maskCloseable"
|
|
@cancel="cancelPicker"
|
|
@confirm="confirmPicker"
|
|
>
|
|
</tn-picker>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
|
|
|
|
export default {
|
|
name: 'componentsPicker',
|
|
components: {dynamicDemoTemplate},
|
|
data() {
|
|
return {
|
|
result: 'Picker结果',
|
|
show: false,
|
|
mode: 'selector',
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: false,
|
|
minute: false,
|
|
second: false,
|
|
province: true,
|
|
city: true,
|
|
area: true,
|
|
timestamp: true
|
|
},
|
|
showTimeTag: false,
|
|
startYear: 2000,
|
|
endYear: 2100,
|
|
defaultTime: '2021/10/01 12:00:00',
|
|
defaultRegion: ['广东省','广州市','天河区'],
|
|
areaCode: [],
|
|
maskCloseable: true,
|
|
range: ['哆啦A梦','大熊','小夫','静香','胖虎'],
|
|
rangeKey: '',
|
|
defaultSelector: [0],
|
|
|
|
tips: ['无需依赖额外的样式文件','使用tn-picker组件'],
|
|
sectionList: [
|
|
{
|
|
name: '参数切换',
|
|
section: [
|
|
{
|
|
title: '模式',
|
|
optional: ['单列','多列','时间','地区'],
|
|
methods: 'modeChange'
|
|
},
|
|
{
|
|
title: '显示时分秒',
|
|
optional: ['隐藏','显示'],
|
|
methods: 'timeSecondChange',
|
|
show: false
|
|
},
|
|
{
|
|
title: '显示时间单位',
|
|
optional: ['隐藏','显示'],
|
|
methods: 'showTimeTagChange',
|
|
show: false
|
|
},
|
|
{
|
|
title: '指定起始年份',
|
|
optional: ['2000-2100','2020-2030'],
|
|
methods: 'timeRangeChange',
|
|
show: false
|
|
},
|
|
{
|
|
title: '默认时间',
|
|
optional: ['2021/10/01 12:00:00','2021-10-01 17:00:00'],
|
|
methods: 'defaultTimeChange',
|
|
show: false
|
|
},
|
|
{
|
|
title: '默认地区',
|
|
optional: ['广东省-广州市-天河区','44-4401-440107'],
|
|
methods: 'defaultRegionChange',
|
|
show: false
|
|
},
|
|
{
|
|
title: '点击遮罩关闭',
|
|
optional: ['是','否'],
|
|
methods: 'maskCloseableChange'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
click(event) {
|
|
this[event.methods] && this[event.methods](event)
|
|
},
|
|
// 弹出Picker
|
|
showPicker(event) {
|
|
this.openPicker()
|
|
},
|
|
// 切换模式
|
|
modeChange(event) {
|
|
switch(event.index) {
|
|
case 0:
|
|
this.mode = 'selector'
|
|
this.range = ['哆啦A梦','大熊','小夫','静香','胖虎']
|
|
this.defaultSelector = [0]
|
|
this.rangeKey = ''
|
|
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
|
|
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
|
break
|
|
case 1:
|
|
this.mode = 'multiSelector'
|
|
this.range = [
|
|
[
|
|
{
|
|
id: 1,
|
|
name: '哆啦A梦'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '大熊'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '小夫'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '静香'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: '胖虎'
|
|
},
|
|
],
|
|
[
|
|
{
|
|
id: 1,
|
|
name: '家'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '学校'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '操场'
|
|
}
|
|
]
|
|
]
|
|
this.defaultSelector = [0,0]
|
|
this.rangeKey = 'name'
|
|
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
|
|
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
|
break
|
|
case 2:
|
|
this.mode = 'time'
|
|
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], true)
|
|
this.$refs.demoTemplate.updateSectionBtnsState(5, false)
|
|
break
|
|
case 3:
|
|
this.mode = 'region'
|
|
this.$refs.demoTemplate.updateSectionBtnsState([1,2,3,4], false)
|
|
this.$refs.demoTemplate.updateSectionBtnsState(5, true)
|
|
break
|
|
}
|
|
this.openPicker()
|
|
},
|
|
// 切换显示时分秒
|
|
timeSecondChange(event) {
|
|
this.params = {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true,
|
|
province: true,
|
|
city: true,
|
|
area: true,
|
|
timestamp: true
|
|
}
|
|
this.openPicker()
|
|
},
|
|
// 切换显示时间单位
|
|
showTimeTagChange(event) {
|
|
this.showTimeTag = event.index === 0 ? false : true
|
|
this.openPicker()
|
|
},
|
|
// 切换起始年份
|
|
timeRangeChange(event) {
|
|
if (event.index === 0) {
|
|
this.startYear = 2000
|
|
this.endYear = 2100
|
|
} else if (event.index === 1) {
|
|
this.startYear = 2020
|
|
this.endYear = 2030
|
|
}
|
|
this.openPicker()
|
|
},
|
|
// 切换默认时间
|
|
defaultTimeChange(event) {
|
|
this.defaultTime = event.name
|
|
this.openPicker()
|
|
},
|
|
// 切换默认地区
|
|
defaultRegionChange(event) {
|
|
if (event.index === 0) {
|
|
this.defaultRegion = ['广东省','广州市','天河区']
|
|
this.areaCode = []
|
|
} else if (event.index === 1) {
|
|
this.defaultRegion = []
|
|
this.areaCode = ['44','4401','440111']
|
|
}
|
|
this.openPicker()
|
|
},
|
|
// 切换点击遮罩关闭
|
|
maskCloseableChange(event) {
|
|
this.maskCloseable = event.index === 0 ? true : false
|
|
this.openPicker()
|
|
},
|
|
|
|
// 点击取消按钮
|
|
cancelPicker(event) {
|
|
this.$t.message.toast('点击了取消按钮')
|
|
},
|
|
// 点击确认按钮
|
|
confirmPicker(event) {
|
|
switch (this.mode) {
|
|
case 'selector':
|
|
this.result = this.range[event[0]]
|
|
this.defaultSelector = event
|
|
break
|
|
case 'multiSelector':
|
|
this.result = `${this.range[0][event[0]][this.rangeKey]} - ${this.range[1][event[1]][this.rangeKey]}`
|
|
this.defaultSelector = event
|
|
break
|
|
case 'time':
|
|
this.result = `${event.year}-${event.month}-${event.day} ${this.params.hour ? event.hour+':' : ''}${this.params.minute ? event.minute+':' : ''}${this.params.second ? event.second : ''}`
|
|
this.defaultTime = this.result
|
|
break
|
|
case 'region':
|
|
this.result = `${event.province.label}-${event.city.label}-${event.area.label}`
|
|
break
|
|
}
|
|
},
|
|
|
|
// 打开Picker
|
|
openPicker() {
|
|
this.show = true
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.picker-result {
|
|
margin-top: 20rpx;
|
|
padding: 10rpx 30rpx;
|
|
background-color: $tn-font-holder-color;
|
|
text-align: center;
|
|
}
|
|
</style>
|