Vue基于flex布局的日歷組件

詳情請看:http://111.231.145.124:8006/MyBlog/#/lawrence/blog/details/fa60b805d54d2866edcc81c8994e6fe8

閑來無事冒晰,自己封裝了一個(gè)簡單的日歷組件同衣,將源碼中的Calendar組件復(fù)制到自己的項(xiàng)目下即可使用,使用方式參考壶运,組件使用說明

接下來耐齐,簡單說明實(shí)現(xiàn)思路:

(1)首先忍些,先完成頁面的基本布局:

? <div class="calendar">

? ? <div class="month">

? ? ? <div class="month_select_left" v-on:click='prevMonth'>

? ? ? ? <div class='left'>

? ? ? <div class="month_select">{{year}}年{{month}}月

? ? ? <div class="month_select_right" v-on:click='nextMonth'>

? ? ? ? <div class='right'>

? ? <div class="week">

? ? ? <div v-for="(item,index) inweekArr" :key="index" class='weekday'>{{item}}

? ? <div class="date">

? ? ? <div class="column" v-for="(item, index) incolumnArr" :key="index">

? ? ? ? <div class="day" v-for="(item2,index2) in item" :key="index2" v-on:click="day_click(item2)">

? ? ? ? ? <div :class="{day_text:true,day_select:value=== item2.value&&value!=='',day_disabled:!item2.canSelect}">{{item2.index}}

? </div>

</template>

從上到下依次為month/week/day 重點(diǎn)在日期,默認(rèn)當(dāng)前日期當(dāng)前月份锨亏,在js中去獲取當(dāng)月日期list昭殉,并進(jìn)行一定的重組,通過兩層循環(huán)询枚,第一層是遍歷它是第幾行违帆,第二層遍歷第幾個(gè),每一行flex是1金蜀,每天flex:1刷后,平均分為七份。以下是css:

.calendar{

? ? display: flex;

? ? flex: 1;

? ? flex-direction: column;

? }

? .week{

? ? display: flex;

? ? flex: 1;

? ? justify-content: center;

? ? align-items: center;

? ? background:? #f2f2f2;

? ? font-size: 26px;

? ? padding: 20px;

? }

? .weekday{

? ? display: flex;

? ? flex: 1;

? ? justify-content: center;

? }

? .month{

? ? display: flex;

? ? flex: 1;

? ? justify-content: center;

? ? align-items: center;

? ? font-size: 28px;

? ? height: 60px;

? }

? .month_select{

? ? display: flex;

? ? flex: 1;

? ? justify-content: center;

? ? align-items: center;

? ? height: 100%;

? }

? .month_select_left{

? ? display: flex;

? ? flex: 1;

? ? justify-content: flex-start;

? ? align-items: center;

? ? height: 100%;

? ? padding-left:50px;

? }

? .month_select_left:active{

? ? background-color: #e6e6e6

? }

? .month_select_right:active{

? ? background-color: #e6e6e6

? }

? .month_select_right{

? ? display: flex;

? ? flex: 1;

? ? justify-content: flex-end;

? ? align-items: center;

? ? height: 100%;

? ? padding-right:50px;

? }

? .left {

? ? border: solid #00A6E4;

? ? border-width: 0 3px 3px 0;

? ? /* display: inline-block; */

? ? padding: 5px;

? ? transform: rotate(135deg);

? ? height: 3px;

? ? width: 3px;

? }

? .right {

? ? border: solid #00A6E4;

? ? border-width: 0 3px 3px 0;

? ? /* display: inline-block; */

? ? padding: 5px;

? ? transform: rotate(-45deg);

? ? height: 3px;

? ? width: 3px;

? }

? .date{

? ? padding:0px 20px;

? ? text-align: center;

? ? font-size: 20px;

? ? display: flex;

? ? flex: 1;

? ? flex-direction: column;

? ? justify-content: center;

? ? align-items: center;

? }

? .column{

? ? display: flex;

? ? flex: 1;

? ? width: 100%;

? ? justify-content: center;

? ? align-items: center;

? }

? .day{

? ? display: flex;

? ? flex: 1;

? ? justify-content: center;

? ? align-items: center;

? ? font-size: 24px;

? }

? .day_text{

? ? width: 70px;

? ? float: left;

? ? height: 70px;

? ? line-height: 70px;

? ? /*margin:20px;*/

? ? /* background: blue; */

? ? border-radius: 70px;

? }

? .day_disabled{

? ? color:? #d9d9d9

? }

? .day_select{

? ? background:#00A6E4;

? ? color:white;

? }

在點(diǎn)擊時(shí)觸發(fā)事件渊抄,改變選中元素尝胆,同時(shí)選中元素和非選中以及不可選元素具有不同樣式,通過class區(qū)分护桦,點(diǎn)擊向右含衔,獲取下個(gè)月日期list,同時(shí)也構(gòu)造數(shù)組展示二庵,向左同理贪染,以下是js:

<script>

export default {

? name: 'Calendar',

? data () {

? ? return {

? ? ? year: '',

? ? ? month: '',

? ? ? day: '',

? ? ? weekArr: ['日', '一', '二', '三', '四', '五', '六'],

? ? ? dateArr: [],

? ? ? firstDay: '',

? ? ? lastDay: '',

? ? ? columnArr: []

? ? }

? },

? props: {

? ? value: {

? ? ? type: String,

? ? ? default: ''

? ? },

? ? list: {

? ? ? type: Array,

? ? ? default: function () {

? ? ? ? return []

? ? ? }

? ? },

? ? defaultValue: {

? ? ? type: String,

? ? ? default: new Date()

? ? },

? ? isSelectDefault: {

? ? ? type: Boolean,

? ? ? default: false

? ? }

? },

? mounted () {

? ? let selectDay = this.value === '' ? this.defaultValue : this.value

? ? this.getDate(selectDay)

? ? this.setDate()

? },

? methods: {

? ? getDate: function (time) { // 獲取當(dāng)月日期

? ? ? let mydate = new Date(time)

? ? ? let year = mydate.getFullYear()

? ? ? let month = mydate.getMonth()

? ? ? let months = month + 1

? ? ? this.year = year

? ? ? this.month = months

? ? ? this.day = mydate.getDate()

? ? ? let fist = new Date(year, month, 1)

? ? ? this.firstDay = fist.getDay()

? ? ? let last = new Date(year, months, 0)

? ? ? this.lastDay = last.getDate()

? ? ? if (this.isSelectDefault) {

? ? ? ? this.value = this.formatTimeToDate(time)

? ? ? }

? ? },

? ? // 構(gòu)建日歷數(shù)組

? ? setDate () {

? ? ? let dateArr = []

? ? ? let json = {}

? ? ? for (let i = 0; i < this.firstDay; i++) {

? ? ? ? json = {}

? ? ? ? json['index'] = ''

? ? ? ? json['value'] = ''

? ? ? ? json['canSelect'] = false

? ? ? ? dateArr.push(json)

? ? ? }

? ? ? for (let i = 1; i < this.lastDay + 1; i++) {

? ? ? ? json = {}

? ? ? ? json['index'] = i

? ? ? ? let value = this.formatTimeToDate(this.year + '-' + this.month + '-' + i)

? ? ? ? json['value'] = value

? ? ? ? json['canSelect'] = this.check_select(value)

? ? ? ? dateArr.push(json)

? ? ? }

? ? let last =7 -this.lastDay %7

? ? for (let i =0; i < last; i++) {

? ? ? json = {}

? ? ? json['index'] =''

? ? ? json['value'] =''

? ? ?json['canSelect'] =false

? ? ?json['canSelectRange'] =false

? ? ?dateArr.push(json)

}

? ? ? this.dateArr = dateArr

? ? ? let columnArr = []

? ? ? let array = []

? ? ? for (let i = 0; i < dateArr.length; i++) {

? ? ? ? array.push(dateArr[i])

? ? ? ? if (i % 7 === 6) {

? ? ? ? ? columnArr.push(array)

? ? ? ? ? array = []

? ? ? ? }

? ? ? }

? ? ? this.columnArr = columnArr

? ? ? console.log(columnArr)

? ? ? console.log(dateArr)

? ? },

? ? // 判斷某日期是不是在可選范圍內(nèi)

? ? check_select (date) {

? ? ? let canSelectList = this.list

? ? ? for (let i = 0; i < canSelectList.length; i++) {

? ? ? ? if (date === canSelectList[i]) {

? ? ? ? ? return true

? ? ? ? }

? ? ? }

? ? ? return false

? ? },

? ? prevMonth () { // 上一月

? ? ? let months = ''

? ? ? let years = ''

? ? ? if (this.month === 1) {

? ? ? ? years = this.year - 1

? ? ? ? this.month = 12

? ? ? ? months = this.month

? ? ? } else {

? ? ? ? years = this.year

? ? ? ? months = this.month - 1

? ? ? }

? ? ? let first = new Date(years, months - 1, 1)

? ? ? this.firstDay = first.getDay()

? ? ? let last = new Date(years, months, 0)

? ? ? this.lastDay = last.getDate()

? ? ? this.month = months

? ? ? this.year = years

? ? ? this.setDate()

? ? },

? ? nextMonth () { // 下一月

? ? ? let months = ''

? ? ? let years = ''

? ? ? if (this.month === 12) {

? ? ? ? this.month = 0

? ? ? ? months = this.month

? ? ? ? years = this.year + 1

? ? ? } else {

? ? ? ? months = this.month + 1

? ? ? ? years = this.year

? ? ? }

? ? ? months = this.month + 1

? ? ? let first = new Date(years, months - 1, 1)

? ? ? this.firstDay = first.getDay()

? ? ? let last = new Date(years, months, 0)

? ? ? this.lastDay = last.getDate()

? ? ? this.month = months

? ? ? this.year = years

? ? ? this.setDate()

? ? },

? ? day_click (e) {

? ? ? if (e.index !== '' && e.canSelect) {

? ? ? ? this.value = e.value

? ? ? ? this.$emit('daySelect', e)

? ? ? }

? ? ? // console.log(this.data.day_select)

? ? },

? ? formatTimeToDate (time) {

? ? ? let today = new Date(time)

? ? ? let year = today.getFullYear()

? ? ? let month = ('0' + (today.getMonth() + 1)).slice(-2).toString()

? ? ? let date = ('0' + today.getDate()).slice(-2).toString()

? ? ? let dateString = year + '-' + month + '-' + date

? ? ? return dateString

? ? }

? }

}

</script>

第一次寫技術(shù)博客,寫的不好請見諒催享。

詳細(xì)請看:http://111.231.145.124:8006/MyBlog/#/lawrence/blog/details/fa60b805d54d2866edcc81c8994e6fe8

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末杭隙,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子因妙,更是在濱河造成了極大的恐慌痰憎,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件攀涵,死亡現(xiàn)場離奇詭異铣耘,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)以故,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門蜗细,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人怒详,你說我怎么就攤上這事炉媒。” “怎么了棘利?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵橱野,是天一觀的道長。 經(jīng)常有香客問我善玫,道長水援,這世上最難降的妖魔是什么密强? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮蜗元,結(jié)果婚禮上或渤,老公的妹妹穿的比我還像新娘。我一直安慰自己奕扣,他們只是感情好薪鹦,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著惯豆,像睡著了一般池磁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上楷兽,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天地熄,我揣著相機(jī)與錄音,去河邊找鬼芯杀。 笑死端考,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的揭厚。 我是一名探鬼主播却特,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼筛圆!你這毒婦竟也來了裂明?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤顽染,失蹤者是張志新(化名)和其女友劉穎漾岳,沒想到半個(gè)月后轰绵,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體粉寞,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年左腔,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了唧垦。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,865評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡液样,死狀恐怖振亮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情鞭莽,我是刑警寧澤坊秸,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站澎怒,受9級特大地震影響褒搔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一星瘾、第九天 我趴在偏房一處隱蔽的房頂上張望走孽。 院中可真熱鬧,春花似錦琳状、人聲如沸磕瓷。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽困食。三九已至,卻和暖如春翎承,著一層夾襖步出監(jiān)牢的瞬間陷舅,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工审洞, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留莱睁,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓芒澜,卻偏偏與公主長得像仰剿,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子痴晦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi閱讀 7,350評論 0 10
  • <template> <div v-click-outside="bindEvent" ref="agm...
    一曲灬流觴閱讀 4,243評論 0 1
  • **2014真題Directions:Read the following text. Choose the be...
    又是夜半驚坐起閱讀 9,585評論 0 23
  • 掘地三尺 賴咸院 掘地三尺南吮,必定有神靈 必定有清澈的水,和翻江倒海的吶喊 一鋤頭誊酌,兩鋤頭部凑,更多的鋤頭鑿在 細(xì)碎的光...
    布魯2017閱讀 497評論 0 0
  • 我出生的時(shí)候她已經(jīng)六十多歲了。六十多不是六十一二碧浊,是六十七八涂邀。 記憶里兒時(shí)的冬天幾乎都是和她一起。 她一點(diǎn)都不懶箱锐。...
    就是王鐸霖閱讀 403評論 0 1