Vue-calendar-own NPM

vue-calendar-own

基于 Vue 开发的日历插件；
没有引入第三方库，原生 js 封装，文件小性能不错；
压缩后js 14kb， css 3.57kb；

效果

样式不满意的话，根据自己需要修改css, 或者css覆盖就好了；

安装

npm install vue-calendar-own --save-dev

引入方式

    import {CalendarSelect, Calendar} from 'vue-calendar-own'
    import 'vue-calendar-own/dist/index.css'

API

CalendarInput:

属性	说明	默认
time	时间字符串	false
name	input的name	false

……

事件

……

Usage 使用案例

<template>
        <dl>
            <dd>
                <!--调用方式一-->
                <CalendarSelect time="2018-03-29"></CalendarSelect>
            </dd>
            <dd>
                <!--调用方式二-->
                <CalendarSelect time="2018-03-29 08:33:22" type={1}></CalendarSelect>
            </dd>
            <dd>
                <!--调用方式三-->
                <p>选中时间:{{this.timeData}}</p>
                <Calendar :time="timeData"
                          :onChange="changeDate" ></Calendar>
            </dd>
            <dd>
                <!--调用方式四-->
                <p>选中时间:{{this.timeData2}}</p>
                <Calendar :time="timeData2"
                          :type="1"
                          :onChange="changeDate2" ></Calendar>
            </dd>
        </dl>
</template>

<script>

    // 引入组件
    import {CalendarSelect, Calendar} from 'vue-calendar-own'
    import 'vue-calendar-own/dist/index.css'

    export default {

        components: {
          CalendarSelect,
          Calendar
        },

        data() {
          return {
            timeData:'2018-03-29',
            timeData2: '2018-03-29 08:33:22'
          }
        },

        methods: {
          changeDate(data) {
            this.timeData = data
          },
          changeDate2(data) {
            this.timeData2 = data
          }
        }
    }
</script>