thzxcx/FirstUI-vue
1
0
Fork 0
Code Pull Requests Packages Releases Activity

chore: fui-date-picker 增加top配置

Browse Source
This commit is contained in:
Hefeng
2023-08-30 19:38:54 +08:00
parent 298499fae5
commit 590e7cd83e
1 changed files with 1325 additions and 1297 deletions
Download Patch File Download Diff File Expand all files Collapse all files

460
components/firstui/fui-date-picker/fui-date-picker.vue
View File

@ -1,244 +1,239 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号： 1 8 61 40 7254 9，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-date__picker-wrap" @touchend="stop">
<view class="fui-date__picker-mask" @touchmove.stop.prevent="stop" :class="{'fui-dpk__mask-show':isShow}"
<view class="fui-date__picker-mask" @touchmove.stop.prevent="stop" :class="{ 'fui-dpk__mask-show': isShow }"
:style="maskStyl" ref="fui_dpkm_ani" @tap.stop="maskClick"></view>
<!-- fix：此处key值可解决Nvue端动态切换背景不生效的问题 -->
<view :key="theme" class="fui-date__picker-content"
:class="{'fui-dpk__content-dark':theme==='dark','fui-dpk__content-light':theme!=='dark','fui-dpk__content-show':isShow,'fui-date__picker-radius':radius}"
:style="{zIndex:zIndex}" ref="fui_dpk_ani">
<view :style="topBottom" :key="theme"
:class="{ 'fui-dpk__content-dark': theme === 'dark', 'fui-dpk__content-light': theme !== 'dark', 'fui-dpk__content-show': isShow, 'fui-date__picker-radius': radius,'fui-date__picker-content_top':top || top===0, 'fui-date__picker-content':!top && top!==0}"
ref="fui_dpk_ani">
<view class="fui-date__picker-header"
:class="{'fui-dpk__header-dark':theme==='dark','fui-date__picker-radius':radius}" :style="headerStyl">
:class="{ 'fui-dpk__header-dark': theme === 'dark', 'fui-date__picker-radius': radius }" :style="headerStyl">
<text class="fui-dpk_btn-cancel"
:class="[theme==='dark'?'fui-dpk__cancel-color_dark':'fui-dpk__cancel-color']" :style="cancelStyl"
@tap.stop="btnCancel">{{cancelText}}</text>
:class="[theme === 'dark' ? 'fui-dpk__cancel-color_dark' : 'fui-dpk__cancel-color']" :style="cancelStyl"
@tap.stop="btnCancel">{{ cancelText }}</text>
<text class="fui-date__picker-title"
:class="[theme==='dark'?'fui-dpk__title-color_dark':'fui-dpk__title-color']"
:style="titleStyl">{{title}}</text>
<text class="fui-dpk__btn-sure" :class="{'fui-dpk__sure-color':!confirmColor}" :style="confrimStyl"
@tap.stop="btnConfirm">{{confirmText}}</text>
:class="[theme === 'dark' ? 'fui-dpk__title-color_dark' : 'fui-dpk__title-color']"
:style="titleStyl">{{ title }}</text>
<text class="fui-dpk__btn-sure" :class="{ 'fui-dpk__sure-color': !confirmColor }" :style="confrimStyl"
@tap.stop="btnConfirm">{{ confirmText }}</text>
</view>
<view class="fui-dpk__range-wrap" v-if="range">
<view class="fui-dpk__range-inner"
:class="[theme==='dark'?'fui-dpk__range-dark':'fui-dpk__range-light']">
<text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==1}" :style="startStyl"
@tap.stop="rangeChange($event,1)">{{startDate.result || start}}</text>
<text class="fui-dpk__range-text" :class="{'fui-dpk__range-active':isActive==2}" :style="endStyl"
@tap.stop="rangeChange($event,2)">{{endDate.result || end}}</text>
<view class="fui-dpk__range-inner" :class="[theme === 'dark' ? 'fui-dpk__range-dark' : 'fui-dpk__range-light']">
<text class="fui-dpk__range-text" :class="{ 'fui-dpk__range-active': isActive == 1 }" :style="startStyl"
@tap.stop="rangeChange($event, 1)">{{ startDate.result || start }}</text>
<text class="fui-dpk__range-text" :class="{ 'fui-dpk__range-active': isActive == 2 }" :style="endStyl"
@tap.stop="rangeChange($event, 2)">{{ endDate.result || end }}</text>
</view>
</view>
<view @touchstart.stop="pickerstart">
<!--支付宝小程序不支持动态切换 picker-view-column ... 设置高度也不行-->
<!-- #ifdef MP-ALIPAY -->
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==1">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 1">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'年':''}}
<view :style="contentStyl" v-for="(item, index) in years" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '年' : '' }}
</view>
</picker-view-column>
</picker-view>
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==2">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 2">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'年':''}}
<view :style="contentStyl" v-for="(item, index) in years" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '年' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in months" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'月':''}}
<view :style="contentStyl" v-for="(item, index) in months" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '月' : '' }}
</view>
</picker-view-column>
</picker-view>
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==3">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 3">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'年':''}}
<view :style="contentStyl" v-for="(item, index) in years" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '年' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in months" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'月':''}}
<view :style="contentStyl" v-for="(item, index) in months" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '月' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in days" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'日':''}}
<view :style="contentStyl" v-for="(item, index) in days" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '日' : '' }}
</view>
</picker-view-column>
</picker-view>
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==4">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 4">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'年':''}}
<view :style="contentStyl" v-for="(item, index) in years" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '年' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in months" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'月':''}}
<view :style="contentStyl" v-for="(item, index) in months" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '月' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in days" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'日':''}}
<view :style="contentStyl" v-for="(item, index) in days" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '日' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in hours" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'时':''}}
<view :style="contentStyl" v-for="(item, index) in hours" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '时' : '' }}
</view>
</picker-view-column>
</picker-view>
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==5">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 5">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'年':''}}
<view :style="contentStyl" v-for="(item, index) in years" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '年' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in months" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'月':''}}
<view :style="contentStyl" v-for="(item, index) in months" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '月' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in days" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'日':''}}
<view :style="contentStyl" v-for="(item, index) in days" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '日' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in hours" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'时':''}}
<view :style="contentStyl" v-for="(item, index) in hours" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '时' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in minutes" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'分':''}}
<view :style="contentStyl" v-for="(item, index) in minutes" :key="index"
class="fui-date__picker-text" :class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '分' : '' }}
</view>
</picker-view-column>
</picker-view>
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==6">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 6">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in hours" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'时':''}}
<view :style="contentStyl" v-for="(item, index) in hours" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '时' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in minutes" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'分':''}}
<view :style="contentStyl" v-for="(item, index) in minutes" :key="index"
class="fui-date__picker-text" :class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '分' : '' }}
</view>
</picker-view-column>
</picker-view>
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==7">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 7">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in hours" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'时':''}}
<view :style="contentStyl" v-for="(item, index) in hours" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '时' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in minutes" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'分':''}}
<view :style="contentStyl" v-for="(item, index) in minutes" :key="index"
class="fui-date__picker-text" :class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '分' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in seconds" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'秒':''}}
<view :style="contentStyl" v-for="(item, index) in seconds" :key="index"
class="fui-date__picker-text" :class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '秒' : '' }}
</view>
</picker-view-column>
</picker-view>
<picker-view :mask-style="theme==='dark'?darkStyle:''"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :value="vals" @change="pickerChange" v-if="type==8">
<picker-view :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :value="vals" @change="pickerChange" v-if="type == 8">
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in minutes" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'分':''}}
<view :style="contentStyl" v-for="(item, index) in minutes" :key="index"
class="fui-date__picker-text" :class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '分' : '' }}
</view>
</picker-view-column>
<picker-view-column>
<view :style="contentStyl" v-for="(item,index) in seconds" :key="index"
class="fui-date__picker-text" :class="{'fui-dpk__color-dark':theme==='dark'}">
{{formatVal(item)}}{{unit?'秒':''}}
<view :style="contentStyl" v-for="(item, index) in seconds" :key="index"
class="fui-date__picker-text" :class="{ 'fui-dpk__color-dark': theme === 'dark' }">
{{ formatVal(item) }}{{ unit ? '秒' : '' }}
</view>
</picker-view-column>
</picker-view>
<!-- #endif -->
<!-- #ifndef MP-ALIPAY -->
<picker-view :mask-top-style="theme==='dark'?darkStyle:''"
:mask-bottom-style="theme==='dark'?darkBottomStyle:''" :mask-style="theme==='dark'?darkStyle:''"
:indicator-style="theme==='dark'?indicatorStyl:'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'"
:indicator-class="theme==='dark'?'fui-date__picker-indicator':''" class="fui-date__picker-view"
:style="{height:height+'rpx'}" :key="theme+type" :value="vals" :immediate-change="immediate"
<picker-view :mask-top-style="theme === 'dark' ? darkStyle : ''"
:mask-bottom-style="theme === 'dark' ? darkBottomStyle : ''" :mask-style="theme === 'dark' ? darkStyle : ''"
:indicator-style="theme === 'dark' ? indicatorStyl : 'height: 44px;border-top-width:0.5px;border-bottom-width:0.5px;'"
:indicator-class="theme === 'dark' ? 'fui-date__picker-indicator' : ''" class="fui-date__picker-view"
:style="{ height: height + 'rpx' }" :key="theme + type" :value="vals" :immediate-change="immediate"
@change="pickerChange">
<picker-view-column v-if="type==1 || type==2 || type==3 || type==4 || type==5">
<text :style="contentStyl" v-for="(item,index) in years" :key="index"
class="fui-date__picker-text"
:class="{'fui-dpk__color-dark':theme==='dark'}">{{formatVal(item)}}{{unit?'年':''}}</text>
<picker-view-column v-if="type == 1 || type == 2 || type == 3 || type == 4 || type == 5">
<text :style="contentStyl" v-for="(item, index) in years" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">{{ formatVal(item) }}{{ unit ? '年' : '' }}</text>
</picker-view-column>
<picker-view-column v-if="type==2 || type==3 || type==4 || type==5">
<text :style="contentStyl" v-for="(item,index) in months" :key="index"
class="fui-date__picker-text"
:class="{'fui-dpk__color-dark':theme==='dark'}">{{formatVal(item)}}{{unit?'月':''}}</text>
<picker-view-column v-if="type == 2 || type == 3 || type == 4 || type == 5">
<text :style="contentStyl" v-for="(item, index) in months" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">{{ formatVal(item) }}{{ unit ? '月' : '' }}</text>
</picker-view-column>
<picker-view-column v-if="type==3 || type==4 || type==5">
<text :style="contentStyl" v-for="(item,index) in days" :key="index"
class="fui-date__picker-text"
:class="{'fui-dpk__color-dark':theme==='dark'}">{{formatVal(item)}}{{unit?'日':''}}</text>
<picker-view-column v-if="type == 3 || type == 4 || type == 5">
<text :style="contentStyl" v-for="(item, index) in days" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">{{ formatVal(item) }}{{ unit ? '日' : '' }}</text>
</picker-view-column>
<picker-view-column v-if="type==4 || type==5 || type==6 || type==7">
<text :style="contentStyl" v-for="(item,index) in hours" :key="index"
class="fui-date__picker-text"
:class="{'fui-dpk__color-dark':theme==='dark'}">{{formatVal(item)}}{{unit?'时':''}}</text>
<picker-view-column v-if="type == 4 || type == 5 || type == 6 || type == 7">
<text :style="contentStyl" v-for="(item, index) in hours" :key="index" class="fui-date__picker-text"
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">{{ formatVal(item) }}{{ unit ? '时' : '' }}</text>
</picker-view-column>
<picker-view-column v-if="type==5 || type==6 || type==7 || type==8">
<text :style="contentStyl" v-for="(item,index) in minutes" :key="index"
<picker-view-column v-if="type == 5 || type == 6 || type == 7 || type == 8">
<text :style="contentStyl" v-for="(item, index) in minutes" :key="index"
class="fui-date__picker-text"
:class="{'fui-dpk__color-dark':theme==='dark'}">{{formatVal(item)}}{{unit?'分':''}}</text>
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">{{ formatVal(item) }}{{ unit ? '分' : '' }}</text>
</picker-view-column>
<picker-view-column v-if="type==7 || type==8">
<text :style="contentStyl" v-for="(item,index) in seconds" :key="index"
<picker-view-column v-if="type == 7 || type == 8">
<text :style="contentStyl" v-for="(item, index) in seconds" :key="index"
class="fui-date__picker-text"
:class="{'fui-dpk__color-dark':theme==='dark'}">{{formatVal(item)}}{{unit?'秒':''}}</text>
:class="{ 'fui-dpk__color-dark': theme === 'dark' }">{{ formatVal(item) }}{{ unit ? '秒' : '' }}</text>
</picker-view-column>
</picker-view>
<!-- #endif -->
@ -248,10 +243,10 @@
</template>
<script>
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
// #ifdef APP-NVUE
const animation = uni.requireNativePlugin('animation');
// #endif
export default {
name: "fui-date-picker",
emits: ['change', 'cancel'],
props: {
@ -282,19 +277,19 @@
},
hourRange: {
type: Array,
default () {
default() {
return [0, 23]
}
},
minuteRange: {
type: Array,
default () {
default() {
return [0, 59]
}
},
secondRange: {
type: Array,
default () {
default() {
return [0, 59]
}
},
@ -395,7 +390,11 @@
param: {
type: [Number, String],
default: 0
}
},
top: {
type: [Number, String],
default: undefined
},
},
created() {
this.initialize()
@ -445,7 +444,7 @@
styles += `color:${this.color};`
} else {
// #ifdef MP-ALIPAY
styles += `color:${this.theme==='dark'?'#d1d1d1':'#181818'};`
styles += `color:${this.theme === 'dark' ? '#d1d1d1' : '#181818'};`
// #endif
}
return styles
@ -458,7 +457,14 @@
return styles
},
maskStyl() {
return `background:${this.maskBackground};z-index:${Number(this.zIndex-10)};`
return `background:${this.maskBackground};z-index:${Number(this.zIndex - 10)};`
},
topBottom() {
if (top || Number(top) ===0)
return `top:${this.top}rpx;zIndex: ${Number(this.zIndex)}`
else
return `zIndex: ${Number(this.zIndex)}`
},
initChange() {
return `${this.type}_${this.value}_${this.minDate}_${this.maxDate}`
@ -1129,11 +1135,11 @@
// #endif
}
}
}
}
</script>
<style scoped>
.fui-date__picker-mask {
.fui-date__picker-mask {
position: fixed;
top: 0;
left: 0;
@ -1150,16 +1156,16 @@
transition-duration: .25s;
opacity: 0.001;
/* #endif */
}
}
.fui-dpk__mask-show {
.fui-dpk__mask-show {
/* #ifndef APP-NVUE */
visibility: visible;
/* #endif */
opacity: 1;
}
}
.fui-date__picker-content {
.fui-date__picker-content {
/* #ifndef APP-NVUE */
width: 100%;
visibility: hidden;
@ -1180,10 +1186,32 @@
/* #endif */
transform-origin: center center;
flex-direction: column;
}
}
.fui-date__picker-content_top {
/* #ifndef APP-NVUE */
width: 100%;
visibility: hidden;
/* #endif */
position: fixed;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
transform: translate3d(0, -100%, 0);
transition: all 0.25s ease-in-out;
/* #endif */
/* #ifdef APP-NVUE */
transition-property: transform;
transition-duration: .25s;
transform: translateY(-100%);
/* #endif */
transform-origin: center center;
flex-direction: column;
}
.fui-dpk__content-show {
.fui-dpk__content-show {
/* #ifndef APP-NVUE */
transform: translate3d(0, 0, 0);
visibility: visible;
@ -1191,24 +1219,24 @@
/* #ifdef APP-NVUE */
transform: translateY(0);
/* #endif */
}
}
.fui-dpk__content-light {
.fui-dpk__content-light {
background-color: #fff;
}
}
.fui-dpk__content-dark {
.fui-dpk__content-dark {
background-color: #222;
opacity: 1;
}
}
.fui-date__picker-radius {
.fui-date__picker-radius {
border-top-left-radius: 24rpx;
border-top-right-radius: 24rpx;
overflow: hidden;
}
}
.fui-date__picker-header {
.fui-date__picker-header {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
@ -1228,15 +1256,15 @@
border-bottom-color: #eee;
border-bottom-style: solid;
/* #endif */
}
}
.fui-dpk__header-dark {
.fui-dpk__header-dark {
background: #222;
border-bottom-color: #333;
}
}
/* #ifndef APP-NVUE */
.fui-date__picker-header::after {
/* #ifndef APP-NVUE */
.fui-date__picker-header::after {
content: '';
position: absolute;
border-bottom: 1px solid #eee;
@ -1244,15 +1272,15 @@
bottom: 0;
right: 0;
left: 0;
}
}
.fui-dpk__header-dark::after {
.fui-dpk__header-dark::after {
border-bottom-color: #333;
}
}
/* #endif */
/* #endif */
.fui-dpk__range-wrap {
.fui-dpk__range-wrap {
/* #ifndef APP-NVUE */
width: 100%;
display: flex;
@ -1263,9 +1291,9 @@
align-items: center;
justify-content: center;
padding: 16rpx 32rpx;
}
}
.fui-dpk__range-inner {
.fui-dpk__range-inner {
/* #ifndef APP-NVUE */
display: flex;
box-sizing: border-box;
@ -1277,17 +1305,17 @@
border-radius: 16rpx;
overflow: hidden;
padding: 2px;
}
}
.fui-dpk__range-light {
.fui-dpk__range-light {
background: #fff;
}
}
.fui-dpk__range-dark {
.fui-dpk__range-dark {
background: #333;
}
}
.fui-dpk__range-text {
.fui-dpk__range-text {
/* #ifndef APP-NVUE */
display: block;
display: flex;
@ -1308,18 +1336,18 @@
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
}
.fui-dpk__range-active {
.fui-dpk__range-active {
color: #fff;
/* #ifndef APP-NVUE */
background: var(--fui-color-primary, #465CFF);
/* #endif */
}
}
.fui-dpk_btn-cancel,
.fui-dpk__btn-sure {
.fui-dpk_btn-cancel,
.fui-dpk__btn-sure {
font-weight: normal;
height: 88rpx;
padding: 0 24rpx;
@ -1337,17 +1365,17 @@
/* #ifdef H5 */
cursor: pointer;
/* #endif */
}
}
.fui-dpk_btn-cancel:active {
.fui-dpk_btn-cancel:active {
opacity: .5;
}
}
.fui-dpk__btn-sure:active {
.fui-dpk__btn-sure:active {
opacity: .5;
}
}
.fui-date__picker-title {
.fui-date__picker-title {
font-weight: normal;
font-size: 28rpx;
flex: 1;
@ -1363,32 +1391,32 @@
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
}
.fui-dpk__title-color {
.fui-dpk__title-color {
color: #333333;
}
}
.fui-dpk__title-color_dark {
.fui-dpk__title-color_dark {
color: #A3A3A3;
}
}
.fui-dpk__cancel-color {
.fui-dpk__cancel-color {
color: #181818;
}
}
.fui-dpk__cancel-color_dark {
.fui-dpk__cancel-color_dark {
color: #D1D1D1;
}
}
/* #ifndef APP-NVUE */
.fui-dpk__sure-color {
/* #ifndef APP-NVUE */
.fui-dpk__sure-color {
color: var(--fui-color-primary, #465CFF) !important;
}
}
/* #endif */
.fui-date__picker-view {
/* #endif */
.fui-date__picker-view {
/* #ifndef APP-NVUE */
width: 100%;
/* #endif */
@ -1396,9 +1424,9 @@
flex: 1;
/* #endif */
height: 520rpx;
}
}
.fui-date__picker-text {
.fui-date__picker-text {
/* #ifndef APP-NVUE */
width: 100%;
display: block;
@ -1419,27 +1447,27 @@
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4rpx;
}
}
.fui-dpk__color-dark {
.fui-dpk__color-dark {
color: #D1D1D1;
}
}
/* #ifndef APP-NVUE*/
::v-deep .fui-date__picker-indicator {
/* #ifndef APP-NVUE*/
::v-deep .fui-date__picker-indicator {
position: relative;
border-color: transparent;
}
}
::v-deep .fui-date__picker-indicator::before {
::v-deep .fui-date__picker-indicator::before {
border-color: #333;
}
}
::v-deep .fui-date__picker-indicator::after {
::v-deep .fui-date__picker-indicator::after {
border-color: #333;
}
}
/* #endif */
/* #endif */
</style>