67 lines
1.2 KiB
Vue
67 lines
1.2 KiB
Vue
<template>
|
|
<section class="AiDateTime">
|
|
<div @tap.stop="show=true">
|
|
<slot v-if="$slots.default"/>
|
|
<div v-else class="right">
|
|
<span v-if="value" v-text="value"/>
|
|
<span v-else class="color-999" v-text="placeholder"/>
|
|
<u-icon name="arrow-right" color="#ccc" class="right-icon"/>
|
|
</div>
|
|
</div>
|
|
<u-picker v-model="show" mode="time" @confirm="handleConfirm" :params="params"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "AiDateTime",
|
|
model: {
|
|
event: "change",
|
|
prop: "value"
|
|
},
|
|
props: {
|
|
value: {default: ""},
|
|
placeholder: {default: "请选择"},
|
|
format: {default: "YYYY-MM-DD HH:mm:ss"}
|
|
},
|
|
data() {
|
|
return {
|
|
show: false,
|
|
params: {
|
|
year: true,
|
|
month: true,
|
|
day: true,
|
|
hour: true,
|
|
minute: true,
|
|
second: true,
|
|
timestamp: true
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
handleConfirm(v) {
|
|
this.$emit('change', this.$dateFormat(v.timestamp * 1000, this.format))
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.AiDateTime {
|
|
width: 100%;
|
|
|
|
.right {
|
|
width: 100%;
|
|
text-align: right;
|
|
|
|
.right-icon {
|
|
margin-left: 8px;
|
|
}
|
|
}
|
|
|
|
.color-999 {
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|