关于vue.js:基于vue2x的酒店日历选择插件

基于vue2.x的酒店日历抉择插件

git仓库地址

演示地址

效果图

疾速应用

装置：
npm install -S vue-hotel-calendar 
或者
yarn add vue-hotel-calendar

应用：
import hotelCaldendar from 'vue-hotel-calendar'

示例代码

<template>
  <div>
    <h2>在挪动端模式查看</h2>
    <input
      :value="dateRange"
      @click="showCalendar"
      readonly
      type="text"
      class="input-wrap"
      placeholder="点击唤起日历组件"
    />
    <hotel-calendar
      ref="hotelCalendar"
      :visibility="show"
      @select-date-range="selectDateRangeHandle"
      :show-month="4"
      format="YYYY-M-D"
    ></hotel-calendar>
  </div>
</template>
<script>
import hotelCalendar from 'vue-hotel-calendar'

export default {
  components: {
    hotelCalendar
  },
  data() {
    return {
      show: false,
      dateRange: ''
    }
  },
  mounted() {
    var e = this.$refs.hotelCalendar.getValue()
    this.selectDateRangeHandle(e)
  },
  methods: {
    showCalendar() {
      this.show = true;
    },
    selectDateRangeHandle(e) {
      this.show = false;
      this.dateRange = `入住${e.startDate}离店${e.endDate}, 住${e.seletDays - 1}晚`
    }
  }
}
</script>
<style>
h2 {
  text-align: center;
}
.input-wrap {
  width: 300px;
  height: 36px;
  box-sizing: border-box;
  border-radius: 10px;
  outline: none;
  border:  1px solid #666;
  padding-left: 10px;
  display: block;
  margin: auto;
}
</style>

应用形容：