预览

calendar-plugin

A simple calender-plugin by Vue.js

使用方法

父组件可传props

    props: {
        show: {   //是否显示组件
          type: Boolean,
          default: true
        },
        isRed: {  //红蓝两种主题可选
          type: Boolean,
          default: false
        },
        limit: {  //日期可选范围
          type: Object,
          default() {
            return {
              minYear: 1900,
              minMonth: 1,
              minDay: 1,
              maxYear: 2030,
              maxMonth: 3,
              maxDay: 20
            }
          }
        },
        showCalendar: {  //是否显示日历
          type: Boolean,
          default: true
        },
        containerStyle: { //组件容器样式
          type: Object
        }
      }

子组件向父组件传值方法

  watch: {
    selectValue: function (newVal) {
      this.$emit('getValue', newVal);
    }
  },
  mounted() {
    this.$emit('getValue', this.selectValue);
  } 

在父组件中使用calendar-input

引入calendar-input, 如果父组件在vue-cli生成的components中，那么引用方法为：

  import calendarInput from '../../node_modules/calendar-plugin/calendar-input.vue';
  export default {
    components: {
      calendarInput
    }
  }

如果父组件不在components中，就根据你的项目使用相对路径引入

使用并传递初始值，绑定子组件向父组件通信事件

  <calendar-input :limit="limit" @getValue="getValue"></calendar-input>

使用红色主题

  <calendar-input :isRed="true" @getValue="getValue"></calendar-input>

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.