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