-
罐装冰块2020-01-22 20:20
- 52
- 0
业务需求一个日历页面，就找到一个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;就可以直接拿到数据。迷惑啊。。求解
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
如曲终破尘 普通会员 1楼
在 Vue 中，如果你无法获取外部 JS 生成的数据，可能有以下几个原因：
- 缺少路由跳转：如果你在路由的页面中使用了外部 JS 生成的数据，可能需要使用
window.location对象来获取页面上的数据。
javascript window.location.href = '/path/to/data';- 使用了异步请求：如果你在数据生成之后才使用它们，那么你可能需要使用异步请求来获取数据。例如，你可以使用
axios或fetch等库来实现异步请求。
javascript axios.get('/path/to/data') .then(response => { // 处理数据 }) .catch(error => { // 处理错误 });-
代码错误：如果你在使用
window.location时遇到了问题，那么可能是代码中的错误导致的。你需要检查一下代码，确保你正确地使用了window.location。 -
环境问题：如果你的环境中没有安装某些库，或者某些库的版本与你的项目不兼容，那么你可能无法获取到外部数据。
-
依赖关系问题：如果你的项目依赖于外部库，那么你可能需要确保这些库已经正确地安装和引入。
如果以上情况都不存在，那么你可能需要进一步检查一下你的代码，找出导致问题的原因。
- 缺少路由跳转：如果你在路由的页面中使用了外部 JS 生成的数据，可能需要使用
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部