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

7次阅读

共计 1538 个字符，预计需要花费 4 分钟才能阅读完成。

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>

应用形容：

props 参数	类型	形容	是否必填	格局
visibility	boolean	抉择弹框是否显示	必填	默认：false
format	String	返回的日期格局	非必填	默认：YYYY-MM-DD
initDate	object	初始化选中的日期范畴	非必填	默认选中：当天日期~ 先天日期, 传参格局 {startDate: ‘xxxx-xx-xx’, endDate: ‘xxxx-xx-xx’}
showMonth	Number	显示多少个月	非必填	默认：3

回调函数	类型	形容	格局
select-date-range	function	抉择两个日期的后的回调函数，返回选中的日期	function(res) {….}

内置办法	形容
this.$refs[‘hotelCalendar’].getValue()	返回选中的日期, 格局：{startDate: YYYY-MM-DD,endDate: YYYY-MM-DD,seletDays: Days}
this.$refs[‘hotelCalendar’].getCalenderList(date, mixDate, maxDate)	从新渲染列表，格局：date: YYYY-MM 开始月份, mixDate: YYYY-MM-DD，maxDate: ‘YYYY-MM-DD’