<uni-calendar可运行的使用示例

以下是一个使用Uni-Calendar组件的基本示例：

1. 在你的Vue.js组件中引入Uni-Calendar组件：

<template>
  <div>
    <h1>Calendar Example</h1>
    <uni-calendar v-model="selectedDate" />
  </div>
</template>

<script>
import UniCalendar from 'uni-calendar';

export default {
  components: {
    UniCalendar,
  },
  data() {
    return {
      selectedDate: new Date(),
    };
  },
};
</script>

2. 在上面的示例中，我们使用了v-model指令来双向绑定用户选择的日期。你也可以使用@change事件来监听用户选择的日期变化：

<template>
  <div>
    <h1>Calendar Example</h1>
    <uni-calendar :value="selectedDate" @change="onDateChange" />
  </div>
</template>

<script>
import UniCalendar from 'uni-calendar';

export default {
  components: {
    UniCalendar,
  },
  data() {
    return {
      selectedDate: new Date(),
    };
  },
  methods: {
    onDateChange(date) {
      console.log('Selected date:', date);
    },
  },
};
</script>

3. 你还可以使用Uni-Calendar的props属性来自定义组件的样式和行为。例如，你可以使用min-date和max-date属性来限制用户选择的日期，你可以使用locale属性来设置组件的语言环境，等等。

<template>
  <div>
    <h1>Calendar Example</h1>
    <uni-calendar
      v-model="selectedDate"
      :min-date="minDate"
      :max-date="maxDate"
      locale="zh-CN"
    />
  </div>
</template>

<script>
import UniCalendar from 'uni-calendar';

export default {
  components: {
    UniCalendar,
  },
  data() {
    return {
      selectedDate: new Date(),
      minDate: new Date('2020-01-01'),
      maxDate: new Date('2020-12-31'),
    };
  },
};
</script>

这就是一个使用Uni-Calendar的基本示例。你可以根据你的具体需求来自定义组件的行为和样式。