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

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

@ -4,9 +4,9 @@
<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">
<text class="fui-dpk_btn-cancel"
@ -19,8 +19,7 @@
@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']">
<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"
@ -34,8 +33,8 @@
: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'}">
<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>
@ -45,14 +44,14 @@
: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'}">
<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'}">
<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>
@ -62,20 +61,20 @@
: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'}">
<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'}">
<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'}">
<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>
@ -85,26 +84,26 @@
: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'}">
<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'}">
<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'}">
<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'}">
<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>
@ -114,26 +113,26 @@
: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'}">
<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'}">
<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'}">
<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'}">
<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>
@ -149,8 +148,8 @@
: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'}">
<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>
@ -166,8 +165,8 @@
: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'}">
<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>
@ -211,23 +210,19 @@
: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"
<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"
<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"
<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"
<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">
@ -395,7 +390,11 @@
param: {
type: [Number, String],
default: 0
}
},
top: {
type: [Number, String],
default: undefined
},
},
created() {
this.initialize()
@ -460,6 +459,13 @@
maskStyl() {
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}`
},
@ -1181,6 +1187,28 @@
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 {