极客观点
项目管理
HarmonyOS
业务需求一个日历页面，就找到一个js日历插件尝试导入。日历导入没问题，现在想实现的是点击日历然后返回选择的日期。流程是点击日历，日历的js响应然后返回一个数据。插件提供了获取选择日期的接口，但是vue一直得不到返回的数据。个人的想法是添加el属性来控制dom但是export default的方式不能添加el属性，希望大神们帮忙看下怎么解决，跪谢~
【content.vue】（显示页面）
<template id="content">
<div id="content" style="font-family:微软雅黑">
<br>{{date}}<br>{{selectdate}}
<div>
<div id="container" v-on:click="aa"></div>
</div>
</div>
</template>
<script>
import SimpleCalendar from '../js/simple-calendar'
import '../css/simple-calendar.css'
export default {
name:'content',
data() {
return {
selectdate:'',
date:''
}
},
mounted:function(){
this.$nextTick(()=>{
var myCalendar = new SimpleCalendar('#container');
this.selectdate=myCalendar.getSelectedDay()+1;
})
},
watch:{
},
methods:{
aa:function(){
//this.selectdate=myCalendar.getSelectedDay()+1;
}
}
}
</script>
<style>
</style>
【simple-calendar.js】（因代码量较多只贴出部分关键代码）
var _createClass = function () {..}
var SimpleCalendar = function () {
//构造函数
function SimpleCalendar(query, options) {
_classCallCheck(this, SimpleCalendar);
//默认配置
this._defaultOptions = {
width: '500px',
height: '500px',
...
}
};
//容器
this.container = document.querySelector(query);
//构建日历
this.create();
}
//功能函数
_createClass(SimpleCalendar, [{
//获取选择的日期
key: 'getSelectedDay',
value:function getSelectedDay() {
var selectYear = this.container.querySelector('.sc-select-year').value;
var selectMonth = this.container.querySelector('.sc-select-month').value;
var selectDay = this.selectDay.querySelector('.day').innerHTML;
return new Date(selectYear, selectMonth - 1 + count, selectDay);
}
}, {
//点击事件（默认定位在今天，现在点击另外一天）
key: 'updateEvent',
value: function updateEvent() {
var daysElement = this.arrayfrom(this.container.querySelectorAll('.sc-item'));
var container = this.container;
var calendar = this;
daysElement.forEach(function (v, i) {
//鼠标点击
v.onclick = function () {
calendar.selectDay = v;
//其他判定
var pre = container.querySelector('.sc-selected');
if (pre) pre.classList.remove('sc-selected');
this.classList.add('sc-selected');
if (typeof calendar._options.onSelect === 'function') {
calendar._options.onSelect(calendar.getSelectedDay());
}
//关键点：传递数据------------此处向vue传递数据，但是拿不到
content.date = calendar.getSelectedDay()+1;
//更新选择的日期数据
...
...
}
};
...
}
}])之前做过一个简易的demo引入这个日历是可以拿到传递回来的数据的，如下
【index.html】（另外一个项目）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/simple-calendar.css">
<script type="text/javascript" src="js/simple-calendar.js"></script>
<script src="js/vue.min.js"></script>
</head>
<body>
<div id="content">
<div id = "container"></div>
{{date}}
</div>
<script>
var app = new Vue({
el:'#app',
data: {
city:'',
date: new Date(),
}
})
var myCalendar = new SimpleCalendar('#container');
</script>
</body>
</html>
这样在js里面用app.date = calendar.getSelectedDay()+1;就可以直接拿到数据。迷惑啊。。求解
我的大概思路是，让SimpleCalendar插件内部的点击事件去触发回调函数，把内部的数据通过回调函数传出去。