u-calendar详细使用示例

u-calendar 是一个基于 Vue.js 的日期选择器组件，可以方便地在网页中选择日期。下面是一个简单的使用示例：

1. 在项目中引入 u-calendar 组件：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/u-calendar@1.0.0/dist/u-calendar.js"></script>

2. 在 Vue 实例中注册 u-calendar 组件：

new Vue({
  el: '#app',
  components: {
    'u-calendar': uCalendar
  }
})

3. 在 HTML 中使用 u-calendar 组件：

<div id="app">
  <u-calendar></u-calendar>
</div>

此时就可以在页面上看到一个默认样式的日期选择器了。

u-calendar 组件支持的属性和事件很多，可以根据具体需求进行配置。例如，可以设置初始日期、选择范围、语言等：

<u-calendar
  :lang="'en'"
  :range="{start: '2021-01-01', end: '2021-12-31'}"
  :value="'2021-11-11'"
></u-calendar>

还可以监听组件的事件，例如选择日期时触发的 change 事件：

<u-calendar @change="handleChange"></u-calendar>

methods: {
  handleChange(date) {
    console.log('选择了日期：', date)
  }
}

以上就是 u-calendar 组件的简单使用示例。更详细的使用方法可以参考官方文档。