chen
/
flying-monkey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

提交

master
chen 2022-04-01 08:55:06 +08:00
parent f4f2042106
commit bbece21ba4
1 changed files with 270 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
components/dates/yy-mm-dd-hh-ss.vue
View File

@ -1,11 +1,6 @@
<template> <template>
<view class="datetime-picker"> <view class="datetime-picker">
<view <view class="mask" :class="{ show: open }" @touchmove.stop.prevent catchtouchmove="true"></view>
class="mask"
:class="{ show: open }"
@touchmove.stop.prevent
catchtouchmove="true"
></view>
<view class="wrap" :class="{ show: open }"> <view class="wrap" :class="{ show: open }">
<view class="picker-header" @touchmove.stop.prevent catchtouchmove="true"> <view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
<view class="btn-picker cancel" @click="open = false">取消</view> <view class="btn-picker cancel" @click="open = false">取消</view>
@ -45,7 +40,7 @@
</template> </template>
<script> <script>
export default { export default {
name: "buuug7-simple-datetime-picker", name: "buuug7-simple-datetime-picker",
props: { props: {
startYear: { startYear: {
@ -179,7 +174,14 @@ export default {
}, },
_onSubmit() { _onSubmit() {
const { year, month, day, hour, minute, formatNum } = this; const {
year,
month,
day,
hour,
minute,
formatNum
} = this;
const result = { const result = {
year: formatNum(year), year: formatNum(year),
month: formatNum(month), month: formatNum(month),
@ -195,19 +197,21 @@ export default {
return num < 10 ? "0" + num : num + ""; return num < 10 ? "0" + num : num + "";
}, },
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
$transition: all 0.3s ease; $transition: all 0.3s ease;
$primary: #488ee9; $primary: #488ee9;
.datetime-picker { .datetime-picker {
position: relative; position: relative;
z-index: 999; z-index: 999;
picker-view { picker-view {
height: 100%; height: 100%;
} }
.mask { .mask {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
@ -219,11 +223,13 @@ $primary: #488ee9;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
transition: $transition; transition: $transition;
&.show { &.show {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
} }
.wrap { .wrap {
z-index: 1001; z-index: 1001;
position: fixed; position: fixed;
@ -232,10 +238,12 @@ $primary: #488ee9;
width: 100%; width: 100%;
transition: $transition; transition: $transition;
transform: translateY(100%); transform: translateY(100%);
&.show { &.show {
transform: translateY(0); transform: translateY(0);
} }
} }
.picker-header { .picker-header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -245,12 +253,14 @@ $primary: #488ee9;
background-color: darken(#fff, 2%); background-color: darken(#fff, 2%);
background-color: #fff; background-color: #fff;
} }
.picker-body { .picker-body {
width: 100%; width: 100%;
height: 420rpx; height: 420rpx;
overflow: hidden; overflow: hidden;
background-color: #fff; background-color: #fff;
} }
.column-item { .column-item {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -258,6 +268,7 @@ $primary: #488ee9;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.btn-picker { .btn-picker {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -275,9 +286,10 @@ $primary: #488ee9;
color: #000; color: #000;
cursor: pointer; cursor: pointer;
} }
.btn-picker.submit { .btn-picker.submit {
background-color: $primary; background-color: $primary;
color: #fff; color: #fff;
} }
} }
</style> </style>