mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 05:16:45 +08:00
63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<template>
|
||
<div class="select">
|
||
<div class="select addTimeBox">
|
||
<div class="addTime">创建时间：</div>
|
||
<a-range-picker
|
||
:value="dateTime"
|
||
style="width: 420px"
|
||
format="YYYY-MM-DD"
|
||
valueFormat="YYYY-MM-DD"
|
||
separator="至"
|
||
:placeholder="[' 开始时间', ' 结束时间']"
|
||
@change="change"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import {defineEmits,ref} from "vue";
|
||
|
||
const emit = defineEmits(["update:beginTime", "update:endTime"]);
|
||
|
||
const dateTime = ref([null,null]);
|
||
|
||
const resetTime = () => {
|
||
dateTime.value = [null,null]
|
||
emit("update:beginTime", null);
|
||
emit("update:endTime", null);
|
||
}
|
||
|
||
function change(e) {
|
||
console.log(e)
|
||
dateTime.value = [e[0],e[1]]
|
||
emit("update:beginTime", e[0]);
|
||
emit("update:endTime", e[1]);
|
||
}
|
||
|
||
//暴露resetTime方法
|
||
defineExpose({
|
||
resetTime
|
||
});
|
||
</script>
|
||
<style lang="scss">
|
||
.addTimeBox {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.addTime {
|
||
position: absolute;
|
||
z-index: 10;
|
||
margin-left: 10px;
|
||
color: rgba(0, 0, 0, 0.4);
|
||
}
|
||
|
||
.ant-picker {
|
||
padding-left: 85px;
|
||
}
|
||
|
||
.ant-picker-range .ant-picker-active-bar {
|
||
margin-left: 85px;
|
||
}
|
||
}
|
||
</style> |