forked from ccsens_fe/tall-mui-3
12 changed files with 835 additions and 92 deletions
@ -0,0 +1,442 @@ |
|||
<template> |
|||
<view class="zzx-calendar"> |
|||
<view class="calendar-heander"> |
|||
{{ timeStr }} |
|||
</view> |
|||
<view class="calendar-weeks"> |
|||
<view class="calendar-week" v-for="(week, index) in weeks" :key="index"> |
|||
{{ week }} |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="calendar-content"> |
|||
<swiper |
|||
class="calendar-swiper" |
|||
:style="{ |
|||
width: '100%', |
|||
height: sheight, |
|||
}" |
|||
:indicator-dots="false" |
|||
:autoplay="false" |
|||
:duration="duration" |
|||
:current="current" |
|||
@change="changeSwp" |
|||
:circular="true" |
|||
> |
|||
<swiper-item class="calendar-item" v-for="sitem in swiper" :key="sitem"> |
|||
<view class="calendar-days"> |
|||
<template v-if="sitem === current"> |
|||
<view |
|||
class="calendar-day" |
|||
v-for="(item, index) in days" |
|||
:key="index" |
|||
:class="{ |
|||
'day-hidden': !item.show, |
|||
}" |
|||
@click="clickItem(item)" |
|||
> |
|||
<view class="date" :class="[item.isToday ? todayClass : '', item.fullDate === selectedDate ? checkedClass : '']"> |
|||
{{ item.time.getDate() }} |
|||
</view> |
|||
<view class="dot-show" v-if="item.info" :style="dotStyle"> </view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<template v-if="current - sitem === 1 || current - sitem === -2"> |
|||
<view |
|||
class="calendar-day" |
|||
v-for="(item, index) in predays" |
|||
:key="index" |
|||
:class="{ |
|||
'day-hidden': !item.show, |
|||
}" |
|||
> |
|||
<view class="date" :class="[item.isToday ? todayClass : '']"> |
|||
{{ item.time.getDate() }} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<template v-else> |
|||
<view |
|||
class="calendar-day" |
|||
v-for="(item, index) in nextdays" |
|||
:key="index" |
|||
:class="{ |
|||
'day-hidden': !item.show, |
|||
}" |
|||
> |
|||
<view class="date" :class="[item.isToday ? todayClass : '']"> |
|||
{{ item.time.getDate() }} |
|||
</view> |
|||
</view> |
|||
</template> |
|||
</template> |
|||
</view> |
|||
</swiper-item> |
|||
</swiper> |
|||
<view class="mode-change" @click="changeMode"> |
|||
<view :class="weekMode ? 'mode-arrow-bottom' : 'mode-arrow-top'"> </view> |
|||
</view> |
|||
</view> |
|||
<view class="back-today" @click="goback" v-if="showBack"> 今日 </view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import { gegerateDates, dateEqual, formatDate } from './generateDates.js'; |
|||
|
|||
export default { |
|||
props: { |
|||
duration: { |
|||
type: Number, |
|||
default: 500, |
|||
}, |
|||
dotList: { |
|||
type: Array, /// 打点日期列表 |
|||
default() { |
|||
return []; |
|||
}, |
|||
}, |
|||
showBack: { |
|||
type: Boolean, // 是否返回今日 |
|||
default: false, |
|||
}, |
|||
todayClass: { |
|||
type: String, // 今日的自定义样式class |
|||
default: 'is-today', |
|||
}, |
|||
checkedClass: { |
|||
type: String, // 选中日期的样式class |
|||
default: 'is-checked', |
|||
}, |
|||
dotStyle: { |
|||
type: Object, // 打点日期的自定义样式 |
|||
default() { |
|||
return { background: '#FF0000' }; |
|||
}, |
|||
}, |
|||
}, |
|||
watch: { |
|||
dotList: function (newvalue) { |
|||
const days = this.days.slice(0); |
|||
newvalue.forEach(item => { |
|||
const index = days.findIndex(ditem => ditem.fullDate === item.date); |
|||
if (index > 0) { |
|||
days[index].info = item; |
|||
} |
|||
}); |
|||
this.days = days; |
|||
console.log(days); |
|||
}, |
|||
}, |
|||
computed: { |
|||
sheight() { |
|||
// 根据年月判断有多少行 |
|||
// 判断该月有多少天 |
|||
let h = '70rpx'; |
|||
if (!this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth, 0); |
|||
const days = d.getDate(); // 判断本月有多少天 |
|||
let day = new Date(d.setDate(1)).getDay(); |
|||
if (day === 0) { |
|||
day = 7; |
|||
} |
|||
const pre = 8 - day; |
|||
const rows = Math.ceil((days - pre) / 7) + 1; |
|||
h = 70 * rows + 'rpx'; |
|||
} |
|||
return h; |
|||
}, |
|||
timeStr() { |
|||
let str = ''; |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
const y = d.getFullYear(); |
|||
const m = d.getMonth() + 1 <= 9 ? `0${d.getMonth() + 1}` : d.getMonth() + 1; |
|||
str = `${y}年${m}月`; |
|||
return str; |
|||
}, |
|||
predays() { |
|||
let pres = []; |
|||
if (this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() - 7); |
|||
pres = gegerateDates(d, 'week'); |
|||
} else { |
|||
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
|||
pres = gegerateDates(d, 'month'); |
|||
} |
|||
return pres; |
|||
}, |
|||
nextdays() { |
|||
let nexts = []; |
|||
if (this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() + 7); |
|||
nexts = gegerateDates(d, 'week'); |
|||
} else { |
|||
const d = new Date(this.currentYear, this.currentMonth, 1); |
|||
nexts = gegerateDates(d, 'month'); |
|||
} |
|||
return nexts; |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
weeks: ['一', '二', '三', '四', '五', '六', '日'], |
|||
current: 1, |
|||
currentYear: '', |
|||
currentMonth: '', |
|||
currentDate: '', |
|||
days: [], |
|||
weekMode: true, |
|||
swiper: [0, 1, 2], |
|||
// dotList: [], // 打点的日期列表 |
|||
selectedDate: formatDate(new Date(), 'yyyy-MM-dd'), |
|||
}; |
|||
}, |
|||
methods: { |
|||
changeSwp(e) { |
|||
// console.log(e); |
|||
const pre = this.current; |
|||
const current = e.target.current; |
|||
/* 根据前一个减去目前的值我们可以判断是下一个月/周还是上一个月/周 |
|||
*current - pre === 1, -2时是下一个月/周 |
|||
*current -pre === -1, 2时是上一个月或者上一周 |
|||
*/ |
|||
this.current = current; |
|||
if (current - pre === 1 || current - pre === -2) { |
|||
this.daysNext(); |
|||
} else { |
|||
this.daysPre(); |
|||
} |
|||
}, |
|||
// 初始化日历的方法 |
|||
initDate(cur) { |
|||
let date = ''; |
|||
if (cur) { |
|||
date = new Date(cur); |
|||
} else { |
|||
date = new Date(); |
|||
} |
|||
this.currentDate = date.getDate(); // 今日日期 几号 |
|||
this.currentYear = date.getFullYear(); // 当前年份 |
|||
this.currentMonth = date.getMonth() + 1; // 当前月份 |
|||
this.currentWeek = date.getDay() === 0 ? 7 : date.getDay(); // 1...6,0 // 星期几 |
|||
// const nowY = new Date().getFullYear(); // 当前年份 |
|||
// const nowM = new Date().getMonth() + 1; |
|||
// const nowD = new Date().getDate(); // 今日日期 几号 |
|||
// const nowW = new Date().getDay(); |
|||
// this.selectedDate = formatDate(new Date(), 'yyyy-MM-dd') |
|||
this.days = []; |
|||
let days = []; |
|||
if (this.weekMode) { |
|||
days = gegerateDates(date, 'week'); |
|||
// this.selectedDate = days[0].fullDate; |
|||
} else { |
|||
days = gegerateDates(date, 'month'); |
|||
// const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|||
// const isMonth = sel.getFullYear() === this.currentYear && (sel.getMonth() + 1) === this.currentMonth; |
|||
// if(!isMonth) { |
|||
// this.selectedDate = formatDate(new Date(this.currentYear, this.currentMonth-1,1), 'yyyy-MM-dd') |
|||
// } |
|||
} |
|||
days.forEach(day => { |
|||
const dot = this.dotList.find(item => { |
|||
return dateEqual(item.date, day.fullDate); |
|||
}); |
|||
if (dot) { |
|||
day.info = dot; |
|||
} |
|||
}); |
|||
this.days = days; |
|||
// 派发事件,时间发生改变 |
|||
let obj = { |
|||
start: '', |
|||
end: '', |
|||
}; |
|||
if (this.weekMode) { |
|||
obj.start = this.days[0].time; |
|||
obj.end = this.days[6].time; |
|||
} else { |
|||
const start = new Date(this.currentYear, this.currentMonth - 1, 1); |
|||
const end = new Date(this.currentYear, this.currentMonth, 0); |
|||
obj.start = start; |
|||
obj.end = end; |
|||
} |
|||
this.$emit('days-change', obj); |
|||
}, |
|||
// 上一个 |
|||
daysPre() { |
|||
if (this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() - 7); |
|||
this.initDate(d); |
|||
} else { |
|||
const d = new Date(this.currentYear, this.currentMonth - 2, 1); |
|||
this.initDate(d); |
|||
} |
|||
}, |
|||
// 下一个 |
|||
daysNext() { |
|||
if (this.weekMode) { |
|||
const d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
d.setDate(d.getDate() + 7); |
|||
this.initDate(d); |
|||
} else { |
|||
const d = new Date(this.currentYear, this.currentMonth, 1); |
|||
this.initDate(d); |
|||
} |
|||
}, |
|||
changeMode() { |
|||
const premode = this.weekMode; |
|||
let isweek = false; |
|||
if (premode) { |
|||
isweek = !!this.days.find(item => item.fullDate === this.selectedDate); |
|||
} |
|||
this.weekMode = !this.weekMode; |
|||
let d = new Date(this.currentYear, this.currentMonth - 1, this.currentDate); |
|||
const sel = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|||
const isMonth = sel.getFullYear() === this.currentYear && sel.getMonth() + 1 === this.currentMonth; |
|||
if ((this.selectedDate && isMonth) || isweek) { |
|||
d = new Date(this.selectedDate.replace('-', '/').replace('-', '/')); |
|||
} |
|||
this.initDate(d); |
|||
}, |
|||
// 点击日期 |
|||
clickItem(e) { |
|||
this.selectedDate = e.fullDate; |
|||
this.$emit('selected-change', e); |
|||
}, |
|||
goback() { |
|||
const d = new Date(); |
|||
this.initDate(d); |
|||
}, |
|||
}, |
|||
created() { |
|||
this.initDate(); |
|||
}, |
|||
mounted() {}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.zzx-calendar { |
|||
width: 100%; |
|||
height: auto; |
|||
.calendar-heander { |
|||
text-align: center; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
position: relative; |
|||
font-size: 30upx; |
|||
} |
|||
.calendar-weeks { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-flow: row nowrap; |
|||
height: 60upx; |
|||
line-height: 60upx; |
|||
justify-content: center; |
|||
align-items: center; |
|||
font-size: 30upx; |
|||
.calendar-week { |
|||
width: calc(100% / 7); |
|||
height: 100%; |
|||
text-align: center; |
|||
} |
|||
} |
|||
swiper { |
|||
width: 100%; |
|||
height: 60upx; |
|||
} |
|||
.calendar-content { |
|||
min-height: 60upx; |
|||
} |
|||
.calendar-swiper { |
|||
min-height: 70upx; |
|||
transition: height ease-out 0.3s; |
|||
} |
|||
.calendar-item { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
} |
|||
.calendar-days { |
|||
display: flex; |
|||
flex-flow: row wrap; |
|||
width: 100%; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
font-size: 28upx; |
|||
.calendar-day { |
|||
width: calc(100% / 7); |
|||
height: 70upx; |
|||
text-align: center; |
|||
display: flex; |
|||
flex-flow: column nowrap; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
position: relative; |
|||
} |
|||
} |
|||
.day-hidden { |
|||
visibility: hidden; |
|||
} |
|||
.mode-change { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 10upx; |
|||
.mode-arrow-top { |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 12upx solid transparent; |
|||
border-right: 12upx solid transparent; |
|||
border-bottom: 10upx solid #ff6633; |
|||
} |
|||
.mode-arrow-bottom { |
|||
width: 0; |
|||
height: 0; |
|||
border-left: 12upx solid transparent; |
|||
border-right: 12upx solid transparent; |
|||
border-top: 10upx solid #ff6633; |
|||
} |
|||
} |
|||
.is-today { |
|||
background: #ffffff; |
|||
// border: 1upx solid #FF6633; |
|||
border-radius: 50%; |
|||
color: #ff6633; |
|||
} |
|||
.is-checked { |
|||
background: #ff6633; |
|||
color: #ffffff; |
|||
} |
|||
.date { |
|||
width: 50upx; |
|||
height: 50upx; |
|||
line-height: 50upx; |
|||
margin: 0 auto; |
|||
border-radius: 50upx; |
|||
} |
|||
.dot-show { |
|||
width: 8px; |
|||
height: 8px; |
|||
// background: red; |
|||
border-radius: 10upx; |
|||
position: absolute; |
|||
top: 2px; |
|||
right: 10px; |
|||
} |
|||
.back-today { |
|||
// position: absolute; |
|||
line-height: 30upx; |
|||
font-size: 20px; |
|||
top: 15upx; |
|||
// border-radius: 15upx 0 0 15upx; |
|||
color: #24abf1; |
|||
position: relative; |
|||
left: 39%; |
|||
margin: 5%; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,130 @@ |
|||
/* |
|||
*此函数的作用是根据传入的一个日期，返回这一周的日期或者这一个月的日期， |
|||
* 如果是月的话注意还包含上个月和下个月的日期，月的话总共数据有 6 * 7 = 42个 |
|||
* |
|||
*/ |
|||
/* |
|||
* 时间格式化函数 |
|||
* 重要提示，微信小程序new Date('2020-04-16')在ios中无法获取时间对象 |
|||
* 解决方式: 建议将时间都格式化成'2020/04/16 00:00:00'的格式 |
|||
* 函数示例: formatDate(new Date(), 'YYYY/MM/dd hh:mm:ss') |
|||
*/ |
|||
export const formatDate = (date, fmt) => { |
|||
if (/(y+)/.test(fmt)) { |
|||
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); |
|||
} |
|||
let o = { |
|||
'M+': date.getMonth() + 1, |
|||
'd+': date.getDate(), |
|||
'h+': date.getHours(), |
|||
'm+': date.getMinutes(), |
|||
's+': date.getSeconds(), |
|||
}; |
|||
for (let k in o) { |
|||
if (new RegExp(`(${k})`).test(fmt)) { |
|||
let str = o[k] + ''; |
|||
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)); |
|||
} |
|||
} |
|||
return fmt; |
|||
}; |
|||
const padLeftZero = str => { |
|||
return ('00' + str).substr(str.length); |
|||
}; |
|||
export const judgeType = s => { |
|||
// 函数返回数据的具体类型
|
|||
return Object.prototype.toString.call(s).slice(8, -1); |
|||
}; |
|||
export const equalDate = (d1, d2) => { |
|||
let result = false; |
|||
if (d1.getFullYear() === d2.getFullYear() && d1.getMonth() === d2.getMonth() && d1.getDate() === d2.getDate()) { |
|||
result = true; |
|||
} |
|||
return result; |
|||
}; |
|||
/* 比较时间,时间格式为2020-04-04 |
|||
*/ |
|||
export const dateEqual = (before, after) => { |
|||
before = new Date(before.replace('-', '/').replace('-', '/')); |
|||
after = new Date(after.replace('-', '/').replace('-', '/')); |
|||
if (before.getTime() - after.getTime() === 0) { |
|||
return true; |
|||
} else { |
|||
return false; |
|||
} |
|||
}; |
|||
|
|||
export const gegerateDates = (date = new Date(), type = 'week') => { |
|||
const result = []; |
|||
if (judgeType(date) === 'Date') { |
|||
// 年，月，日
|
|||
const y = date.getFullYear(); |
|||
const m = date.getMonth(); |
|||
const d = date.getDate(); |
|||
const days = new Date(y, m + 1, 0).getDate(); |
|||
// 获取日期是星期几
|
|||
let weekIndex = date.getDay() === 0 ? 7 : date.getDay(); |
|||
if (type === 'month') { |
|||
const dobj = new Date(y, m, 1); |
|||
weekIndex = dobj.getDay() === 0 ? 7 : dobj.getDay(); |
|||
} |
|||
if (type === 'week') { |
|||
for (let i = weekIndex - 1; i > 0; i--) { |
|||
const dtemp = new Date(y, m, d); |
|||
dtemp.setDate(dtemp.getDate() - i); |
|||
result.push({ |
|||
time: dtemp, |
|||
show: true, |
|||
fullDate: formatDate(dtemp, 'yyyy-MM-dd'), |
|||
isToday: equalDate(new Date(), dtemp), |
|||
}); |
|||
} |
|||
for (let i = 0; i <= 7 - weekIndex; i++) { |
|||
const dtemp = new Date(y, m, d); |
|||
dtemp.setDate(dtemp.getDate() + i); |
|||
result.push({ |
|||
time: dtemp, |
|||
show: true, |
|||
fullDate: formatDate(dtemp, 'yyyy-MM-dd'), |
|||
isToday: equalDate(new Date(), dtemp), |
|||
}); |
|||
} |
|||
} else if (type === 'month') { |
|||
// 上个月
|
|||
for (let i = weekIndex - 1; i > 0; i--) { |
|||
const dtemp = new Date(y, m, 1); |
|||
dtemp.setDate(dtemp.getDate() - i); |
|||
result.push({ |
|||
time: dtemp, |
|||
show: false, |
|||
fullDate: formatDate(dtemp, 'yyyy-MM-dd'), |
|||
isToday: equalDate(new Date(), dtemp), |
|||
}); |
|||
} |
|||
// 这个月的日期
|
|||
for (let i = 0; i < days; i++) { |
|||
const dtemp = new Date(y, m, 1); |
|||
dtemp.setDate(dtemp.getDate() + i); |
|||
result.push({ |
|||
time: dtemp, |
|||
show: true, |
|||
fullDate: formatDate(dtemp, 'yyyy-MM-dd'), |
|||
isToday: equalDate(new Date(), dtemp), |
|||
}); |
|||
} |
|||
const len = 42 - result.length; |
|||
// 下个月的日期
|
|||
for (let i = 1; i <= len; i++) { |
|||
const dtemp = new Date(y, m + 1, 0); |
|||
dtemp.setDate(dtemp.getDate() + i); |
|||
result.push({ |
|||
time: dtemp, |
|||
show: false, |
|||
fullDate: formatDate(dtemp, 'yyyy-MM-dd'), |
|||
isToday: equalDate(new Date(), dtemp), |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
return result; |
|||
}; |
|||
@ -0,0 +1,90 @@ |
|||
<template> |
|||
<view> |
|||
<view class=""> |
|||
<view class="flex items-center m-2"> |
|||
<image class="bg-yellow-700 w-8 h-8 rounded-full ml-1 mr-4" src="../../static/local_play1.png"></image> |
|||
<view class="text-sm font-semibold">我的LWBS</view> |
|||
</view> |
|||
<view class="task flex items-center justify-between p-2" v-for="(task, index) in tasks" :key="index"> |
|||
<view class="flex items-center"> |
|||
<view class="bg-blue-300 w-8 h-8 rounded-full ml-1 mr-2"> |
|||
<view class="w-8 h-8 flex items-center justify-center">{{ index + 1 }}</view> |
|||
</view> |
|||
<view> |
|||
<view class="flex items-center"> |
|||
<view class="text-sm font-semibold">{{ task.taskName }}</view> |
|||
<view class="rounded-full pl-2 pr-2 bg-green-200 text-green-500">{{ task.state }}</view> |
|||
</view> |
|||
<view class="flex items-center text-gray-400"> |
|||
<view class="pr-2">{{ task.time }}</view> |
|||
<view>时长：{{ task.duration }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<u-icon name="arrow-right" size="28"></u-icon> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
isrotate: -1, |
|||
tasks: [ |
|||
{ |
|||
taskName: '山西省三大中心建设', |
|||
state: '正在进行', |
|||
time: '05月31日 00：00', |
|||
duration: '365天', |
|||
}, |
|||
{ |
|||
taskName: '1号康复室', |
|||
state: '正在进行', |
|||
time: '01月31日 00：00', |
|||
duration: '727天', |
|||
}, |
|||
{ |
|||
taskName: '盐湖医院远程康复', |
|||
state: '正在进行', |
|||
time: '05月31日 00：00', |
|||
duration: '65天', |
|||
}, |
|||
{ |
|||
taskName: '山西省三大中心建设', |
|||
state: '正在进行', |
|||
time: '05月31日 00：00', |
|||
duration: '365天', |
|||
}, |
|||
{ |
|||
taskName: '1号康复室', |
|||
state: '正在进行', |
|||
time: '01月31日 00：00', |
|||
duration: '727天', |
|||
}, |
|||
{ |
|||
taskName: '盐湖医院远程康复', |
|||
state: '正在进行', |
|||
time: '05月31日 00：00', |
|||
duration: '65天', |
|||
}, |
|||
], |
|||
}; |
|||
}, |
|||
methods: { |
|||
// 展开子项目 |
|||
openProjectItem(index) { |
|||
if (this.isrotate === -1) { |
|||
this.isrotate = index; |
|||
} else { |
|||
this.isrotate = -1; |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.task { |
|||
border-bottom: 1px solid #c0b9b9; |
|||
} |
|||
</style> |
|||
@ -0,0 +1 @@ |
|||
Subproject commit 2603a0bc8b5036c399a5f28b93586072c4850c4b |
|||
@ -0,0 +1,27 @@ |
|||
<template> |
|||
<view> |
|||
<view class="upload mx-4"> |
|||
<u-icon name="plus" color="#ffffff" size="48" class="flex justify-center h-10 w-10 bg-blue-500 rounded-full"></u-icon> |
|||
<u-input type="textarea" placeholder="" class="inputUpload" /> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return {}; |
|||
}, |
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style lang="scss"> |
|||
.upload { |
|||
display: flex; |
|||
flex-direction: row-reverse; |
|||
} |
|||
.inputUpload { |
|||
position: relative; |
|||
left: 85%; |
|||
right: 5%; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,32 @@ |
|||
<template> |
|||
<view> |
|||
<Calendar @selected-change="datechange" :showBack="true" :dot-list="dayss"></Calendar> |
|||
<!-- <button @click="changeList">改变</button> --> |
|||
<Upload /> |
|||
<Projects /> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
dayss: [ |
|||
{ date: '2020-08-14' }, |
|||
{ date: '2020-08-27' }, |
|||
{ date: '2020-08-09' }, |
|||
// {date: '2020-08-16'} |
|||
], |
|||
}; |
|||
}, |
|||
|
|||
methods: { |
|||
changeList() { |
|||
this.dayss = [{ date: '2021-08-03' }, { date: '2021-08-04' }, { date: '2021-08-06' }]; |
|||
}, |
|||
|
|||
datechange(e) { |
|||
console.log(e); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
After Width: | Height: | Size: 853 B |
Loading…
Reference in new issue