index.vue 1.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <view>
  3. <u-navbar bgColor="white" :title="$t('message')">
  4. <view class="u-nav-slot" slot="left"></view>
  5. </u-navbar>
  6. <view class="cu-bar justify-center">
  7. <u-icon name="arrow-left" size="28" @click="previousMonth"></u-icon>
  8. <text class="text-bold text-black"> {{ curDate }} </text>
  9. <u-icon name="arrow-right" size="28" @click="nextMonth"></u-icon>
  10. </view>
  11. <ren-calendar ref='ren' :markDays='markDays' headerBar @onDayClick='onDayClick'></ren-calendar>
  12. <view class="change">选中日期:{{curDate}}</view>
  13. </view>
  14. </template>
  15. <script>
  16. import RenCalendar from "../../components/ren-calendar/ren-calendar.vue"
  17. export default {
  18. components:{
  19. RenCalendar
  20. },
  21. data() {
  22. return {
  23. curDate:'',
  24. markDays:[]
  25. }
  26. },
  27. onReady() {
  28. let today = this.$refs.ren.getToday().date;
  29. this.curDate = today;
  30. this.markDays.push(today);
  31. },
  32. methods: {
  33. onDayClick(data){
  34. this.curDate = data.date;
  35. },
  36. previousMonth() {
  37. },
  38. nextMonth() {
  39. }
  40. }
  41. }
  42. </script>