<template>
|
<van-calendar
|
title="透析排班"
|
:poppable="false"
|
:show-confirm="false"
|
@select="selectData"
|
:formatter="formatter"
|
:style="{ height: '400px' }"
|
/>
|
</template>
|
<script lang="ts" setup>
|
import {ref,reactive,watchEffect,watch} from 'vue'
|
import { Calendar as vanCalendar } from 'vant'
|
const data=reactive({
|
a:'chenyinc',
|
h:'dadsad'
|
})
|
const content=ref('content')
|
const selectData=(data:any)=>{
|
console.log(data)
|
}
|
const formatter=(day:any)=>{
|
const month = day.date.getMonth() + 1
|
const date = day.date.getDate()
|
|
if (month === 9) {
|
if (date === 24) {
|
day.topInfo = '上午'
|
day.bottomInfo='8:30'
|
day.className='paibanclass'
|
} else if (date === 27) {
|
day.topInfo = '下午'
|
day.bottomInfo='13:00'
|
day.className='paibanclass'
|
}
|
}
|
return day
|
}
|
watchEffect(()=>{
|
const x1=data.a
|
console.log('watchEffect所指定的回调执行了',x1)
|
})
|
watch(content,(newValue,oldValue)=>{
|
console.log(newValue,oldValue,'变化了')
|
})
|
|
</script>
|
<style>
|
.paibanclass{
|
background: rgb(228, 231, 225);
|
color: blue;
|
}
|
</style>
|
