# SelectMonth

**Repository Path**: l-x-f/select-month

## Basic Information

- **Project Name**: SelectMonth
- **Description**: uni-app

 SelectMonth 选择年月份组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-06-06
- **Last Updated**: 2023-11-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app

## README

# SelectMonth 选择年月份组件

## 使用示例

```html
<template>
  <view class="content">
    <button hover-class="button-hover" @click="handleShow">显示</button>

    {{ state.month }}
    <!-- 选择月份组件 -->
    <SelectMonth v-model="state.month" v-model:visible="state.visible" />
  </view>
</template>

<script setup>
  import { reactive } from 'vue'
  import SelectMonth from '../../components/SelectMonth'

  const state = reactive({
    month: '',
    visible: false
  })

  const handleShow = () => {
    state.visible = true
  }
</script>

<style></style>
```

## Attributes

| 类型         | 说明       | 数据类型             | 默认值说明                                 |
| ------------ | ---------- | -------------------- | ------------------------------------------ |
| modelValue   | 月历组件值 | String, Number, Date | ''                                         |
| visible      | 弹窗显示   | Boolean              | false                                      |
| disabledDate | 禁用的日期 | Function             | 默认禁用大于当前时间后的年月，默认值在下面 |

默认的 disabledDate 函数

```js
const disabledDate = (year, month) => {
  const date = new Date()
  if (year > date.getFullYear()) {
    return true
  }
  if (year === date.getFullYear() && month > date.getMonth() + 1) {
    return true
  }
  return false
}
```

## Events

### confirm 弹窗点击确认事件

回调参数

```js
{
    subVisible: false,
    yarn: state.year,
    month: state.month,
    value: state.year + '-' + state.month
}
```

## Vue 版本支持

仅支持 vue3.2 以上版本

## 使用说明

组件依赖 `sass` `@dcloudio/uni-ui` 请在项目中提前安装`sass` 和`@dcloudio/uni-ui`，并且配置好 `@dcloudio/uni-ui`的导入。