# vue2-ui-package

**Repository Path**: licz2021/vue2-ui-package

## Basic Information

- **Project Name**: vue2-ui-package
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-27
- **Last Updated**: 2021-11-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 一个基于vue2.0的日历控件

## 使用方法：

1. 下载npm包:

你的VUE项目的根目录底下运行：

npm install bdg-vue-calendar

2. 引入本npm包并注册为vue的组件，两种方式选一种即可：

（方式1）在你的vue项目的入口js中注册为全局的vue组件，然后在所有vue文件中都可以直接使用:

> 例如：main.js中：

	import BdgCalendar from 'bdg-vue-calendar';
	Vue.component('BdgCalendar', BdgCalendar);
	

> 	然后在需要使用的vue页面中：

	<template>
    	<div class='calendar-wrapper'>
        <BdgCalendar ref="BdgCalendar" @click-event="getDate" />
    	</div>
	</template>
	
	<script>
    export default {
        data(){
        	return{
        	}
        },
        methods:{
            getDate(date) {
                console.log(date)
            }
        }
    }
    </script>
    

（方式2）在需要使用的vue页面中单独引入并注册为一个局部的组件： 
   
 > 	demo.vue：

	<template>
    	<div class='calendar-wrapper'>
            <BdgCalendar ref="BdgCalendar" @click-event="getDate" />
    	</div>
	</template>
	
	<script>
	import BdgCalendar from 'bdg-vue-calendar';
	
    export default {
      	components: {
            BdgCalendar
        },
        data(){
        	return{
        	}
        },
        methods:{
            getDate(date) {
                console.log(date)
            }
        }
    }
    </script>   
    

## 属性
**通过ref 获取当前年月日**
``` 
currentYear 当前年份 
currentMonth 当前日期
currentDay: 当前天数

```

## 事件

1.@click-event 点击返回date