基于vuejs+webpack的日期選擇插件
更新時(shí)間：2020年05月21日 11:11:26 作者：jopen
這篇文章主要為大家詳細(xì)介紹了基于vuejs+webpack的日期選擇插件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
基于vuejs+webpack環(huán)境使用的日期選擇插件，希望大家喜歡。
支持單選和多選日期
支持限定開始和結(jié)束日期范圍選擇。
支持小時(shí)分鐘
需要引入fontawesome.io 的圖標(biāo)庫。
Options
:show 是否顯示
:type date|datetime
:value 默認(rèn)值
:begin 可選開始時(shí)間
:end 可選結(jié)束時(shí)間
: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>
項(xiàng)目地址： https://github.com/jinzhe/vue-calendar
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue中關(guān)于router.beforeEach()的用法
這篇文章主要介紹了vue中關(guān)于router.beforeEach()的用法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了關(guān)于vue2響應(yīng)式缺陷的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家介紹了Storybook?7.0?Beta?Vue3踩坑解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
這篇文章主要為大家介紹了Vue2如何支持composition API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
VUE2—defineProperty和VUE3—proxy使用方式
Vue2和Vue3的響應(yīng)式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以監(jiān)聽某個(gè)屬性,但不能監(jiān)聽整個(gè)對象,且無法監(jiān)聽對象屬性的新增和刪除,Proxy可以監(jiān)聽整個(gè)對象,且不會修改原數(shù)據(jù),可以監(jiān)聽數(shù)組的長度變化2025-01-01
Vue 3 + Element Plus 封裝單列控制編輯的可編輯表格
在Web應(yīng)用開發(fā)中實(shí)現(xiàn)表格數(shù)據(jù)編輯功能至關(guān)重要,本文將詳細(xì)介紹如何使用Vue3和ElementPlus庫來構(gòu)建一個(gè)支持單列編輯的表格組件,本教程詳細(xì)闡述了組件創(chuàng)建過程和數(shù)據(jù)綁定機(jī)制,幫助你快速掌握Vue3中表格編輯功能的實(shí)現(xiàn),感興趣的朋友一起看看吧2024-09-09
Vue.js 專注于 MVVM 模型的 ViewModel 層。它通過雙向數(shù)據(jù)綁定把 View 層和 Model 層連接了起來。Vue.js和其他庫相比是一個(gè)小而美的庫，作者的主要目的是通過一個(gè)盡量簡單的 API 產(chǎn)生可反映的數(shù)據(jù)綁定和可組合的視圖組件，感覺作者的思路非常清晰。2016-04-04
這篇文章主要介紹了Vue中組件的遞歸和使用問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
這篇文章主要為大家介紹了vue?parseHTML函數(shù)的源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
mockjs+vue頁面直接展示數(shù)據(jù)的方法
這篇文章主要介紹了mockjs+vue頁面直接展示數(shù)據(jù)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12