需求见标题,试过emit到父控件,改变当前控件的current,但是不起作用
业务场景
实现日历周模式的左右切换,默认三组周数据,左右切换的时候更新周数据(已实现),同时把swiper的current设置为1(没有解决),将上一周或者下一周的日期显示出来
模板
<swiper class="swiper" v-if="viewmode == 'week'" :current-item-id="curItemIndex" @change="setDate">
<swiper-item class="swiper-item" v-for="(weeks, week) in canlender.weeks" :key="week" :item-id="'week_' + week">
<view class="uni-calender__body-date-week">
<block v-for="(day, index) in weeks" :key="index">
<view
:class="{
'uni-calender__disable': canlender.month !== day.month || day.disable,
'uni-calender__date-current':
((day.date == canlender.date && !day.checked) || day.multipleBegin || day.multipleEnd) && canlender.month == day.month && !day.disable,
'uni-calender__lunar': lunar,
'uni-calender__active': !day.isDay,
'uni-calender__is-day': day.isDay,
'uni-calender__multiple': day.multipleBegin || day.multipleEnd,
'uni-calender__multiple-box': day.checked
}"
class="uni-calender__date"
@tap="selectDays(week, index, canlender.month === day.month, day.disable, canlender.lunar)"
>
<view class="uni-calender__circle-box">
{{ day.date }}
<view v-if="lunar" class="uni-calender__lunar">{{ day.lunar }}</view>
<view v-if="day.have" class="uni-calender__data-circle" />
<view v-if="day.have && !lunar" class="uni-calender__lunar">{{ day.clockinfo.info }}</view>
</view>
<view
:class="{ 'uni-calender_check': day.checked, 'calender_check-begin': day.multipleBegin, 'calender_check-end': day.multipleEnd }"
class="uni-calender_check-bg"
/>
</view>
</block>
</view>
</swiper-item>
</swiper>
脚本
export default {
name: 'UniCalendarItem',
props: {
/**
* 当前日期
*/
canlender: {
type: null,
default: () => {
return {};
}
},
lunar: {
type: Boolean,
default: false
},
viewmode: {
type: String,
default: 'month'
},
current: {
type: Number,
default: 0
}
},
data() {
return {
done: false,
curItemIndex: 'week_' + this.current
};
},
created() {},
methods: {
selectDays(week, index, ischeck, isDay, lunar) {
this.$emit('selectDays', {
week,
index,
ischeck,
isDay,
lunar
});
},
setDate(e) {
if (this.done) return;
var _this = this;
let index = --e.detail.current;
let cT = this.utils.date.dateAdd(new Date(this.canlender.year, this.canlender.month - 1, this.canlender.date), index, 'w');
new Promise(function(resolve) {
_this.done = true;
_this.change();
resolve.call();
}).then(function() {
_this.$emit('setDate', _this.utils.date.format(new Date(cT)));
_this.done = false;
});
},
change() {
this.$emit('setCurrent', 1);
}
}
};
父控件
<uni-calendar-item :canlender="canlender" :current="currentIndex" :viewmode="viewmode" :lunar="isLunar" @selectDays="selectDays" @setDate="setDate" @setCurrent="setCurrent"/>
setCurrent(val){
this.$nextTick(function() {
console.log(val)
this.currentIndex = val;
});
}
1***@qq.com
可以发个demo学习一下吗
2019-11-21 17:59
1***@qq.com (作者)
回复 1***@qq.com: 子控件调用父控件的方法,设置子控件的props属性和方法名一致
2020-03-21 11:28