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

feat: 首次提交

Browse Source
This commit is contained in:
peerless_hero
2023-08-17 21:28:49 +08:00
parent 36f80fb971
commit ec1e5e16cd
571 changed files with 95322 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
pages/component/form/datePicker/datePicker.vue Normal file
View File

@ -0,0 +1,95 @@
<!--本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：186 1 4 0 725 49，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
<view class="fui-wrap">
<view class="fui-page__hd">
<view class="fui-page__title fui-align__center" @tap="vip">DatePicker <image
src="/static/images/index/light/icon_member_3x.png"></image>
</view>
<view class="fui-page__desc">DatePicker 日期时间选择器，用于选择日期或时间。</view>
</view>
<view class="fui-page__bd">
<fui-button type="gray" btn-size="medium" text="年月" bold :margin="['24rpx']"
@click="btnClick(2)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="年月日" bold @click="btnClick(3)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="年月日 时" bold :margin="['24rpx']"
@click="btnClick(4)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="年月日 时分" bold @click="btnClick(5)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="时分秒" bold @click="btnClick(7)"
:margin="['24rpx']">
</fui-button>
<fui-button type="gray" btn-size="medium" text="日期区间选择" bold @click="btnClick(3,true)">
</fui-button>
<fui-button type="gray" btn-size="medium" text="设置默认值" bold :margin="['24rpx']"
@click="btnClick(5,false,true)">
</fui-button>
<view class="fui-picker__result">
选择的值为：{{result}}
</view>
</view>
<fui-date-picker :show="show" :type="type" :range="range" :value="value" :valueEnd="valueEnd" @change="change"
@cancel="cancel">
</fui-date-picker>
</view>
</template>
<script>
export default {
data() {
return {
result: '',
type: 1,
range: false,
//默认值
value: '',
valueEnd: '',
show: false
}
},
methods: {
vip() {
this.fui.href("/pages/my/qa/qa?index=2&title=VIP专属内容")
},
btnClick(type, range, def) {
this.show = false
this.type = type;
this.range = range || false;
//默认值，区间选择时起始值使用属性：value，结束值使用属性：valueEnd
this.value = def ? '2021-11-22 11:12' : ''
setTimeout(() => {
this.show = true
}, 80)
},
change(e) {
this.show = false
console.log(e)
this.result = JSON.stringify(e || {})
},
cancel() {
this.show = false
}
}
}
</script>
<style>
.fui-page__bd {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.fui-picker__result {
width: 100%;
padding: 64rpx 32rpx;
box-sizing: border-box;
font-size: 26rpx;
word-break: break-all;
font-weight: normal;
}
</style>