69 lines
1.9 KiB
Vue
69 lines
1.9 KiB
Vue
<template>
|
|
<view v-if="show" class="modal-mask">
|
|
<view class="modal-content">
|
|
<view class="modal-title">新建日程</view>
|
|
<input v-model="_title" placeholder="请输入标题" class="input" />
|
|
<view class="sn">时间：<input v-model="_hour" type="number" min="0" max="23" />:<input v-model="_min" type="number" min="0" max="59" /></view>
|
|
<view class="sn">
|
|
颜色：
|
|
<input v-model="_color" placeholder="#e3fae6" />
|
|
</view>
|
|
<view class="buttons">
|
|
<button @click="$emit('cancel')">取消</button>
|
|
<button @click="ok">确定</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
const props = defineProps({
|
|
show: Boolean
|
|
});
|
|
const emit = defineEmits(['ok', 'cancel']);
|
|
const _title = ref('');
|
|
const _hour = ref('');
|
|
const _min = ref('');
|
|
const _color = ref('#e3fae6');
|
|
function ok() {
|
|
emit('ok', { title:_title.value, startHour:Number(_hour.value), startMin:Number(_min.value), color:_color.value });
|
|
_title.value = '';
|
|
_hour.value = '';
|
|
_min.value = '';
|
|
_color.value = '#e3fae6';
|
|
}
|
|
watch(() => props.show, v => {
|
|
if (!v) {
|
|
_title.value = '';
|
|
_hour.value = '';
|
|
_min.value = '';
|
|
_color.value = '#e3fae6';
|
|
}
|
|
});
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.modal-mask {
|
|
position: fixed; left: 0; top: 0; right: 0; bottom: 0;
|
|
background: rgba(0,0,0,.16);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 999;
|
|
}
|
|
.modal-content {
|
|
background: #fff; padding: 32rpx 28rpx; border-radius: 16rpx;
|
|
min-width: 440rpx;
|
|
}
|
|
.modal-title {
|
|
color: #2885ff; font-size: 20px; font-weight: 600; margin-bottom: 25rpx;
|
|
}
|
|
.input {
|
|
padding: 12rpx; border-radius: 8rpx; margin: 10rpx 0; border: 1px solid #e3e3e3; width: 90%;
|
|
}
|
|
.buttons {
|
|
margin-top: 24rpx; display: flex; justify-content: flex-end; gap: 30rpx;
|
|
}
|
|
.sn {
|
|
margin-bottom: 14rpx;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|