欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于vuejs+webpack的日期選擇插件

 更新時間：2020年05月21日 11:11:26   作者：jopen  
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

基于vuejs+webpack環(huán)境使用的日期選擇插件，希望大家喜歡。

支持單選和多選日期
支持限定開始和結(jié)束日期范圍選擇。
支持小時分鐘
需要引入fontawesome.io 的圖標(biāo)庫。

Options

:show 是否顯示
:type date|datetime
:value 默認(rèn)值
:begin 可選開始時間
:end 可選結(jié)束時間
:x 顯示x坐標(biāo)
:y 顯示y坐標(biāo)
:range 是否多選

test.vue

<template>
 <input type="text" @click="showCalendar" v-model="value" placeholder="請輸入日期">
 <calendar :show.sync="show" :value.sync="value" :x="x" :y="y" :begin="begin" :end="end" :range="range"></calendar>
</template>

<script>
module.exports = {
 data: function() {
 return {
  show:false,
  type:"date", //date datetime
  value:"2015-12-11",
  begin:"2015-12-20",
  end:"2015-12-25",
  x:0,
  y:0,
  range:true,//是否多選
 }
 },
 methods:{
 showCalendar:function(e){
  e.stopPropagation();
  var that=this;
  that.show=true;
  that.x=e.target.offsetLeft;
  that.y=e.target.offsetTop+e.target.offsetHeight+8;
  var bindHide=function(e){
  e.stopPropagation();
  that.show=false;
  document.removeEventListener('click',bindHide,false);
  };
  setTimeout(function(){
  document.addEventListener('click',bindHide,false);
  },500);
 }
 },
 components:{
 calendar: require('./calendar.vue')
 }
}
</script>

項目地址： https://github.com/jinzhe/vue-calendar

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論