javascript - vue中如何使用mobiscroll插件
本文介绍了javascript - vue中如何使用mobiscroll插件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
项目中需要将以前的jquery换成vue实现,之前的代码使用mobiscroll实现的,现在把之前的插件js都放在了index.html下面了,但是在首页却总是报Error in mounted hook: "ReferenceError: mobiscroll is not defined"。是该插件不支持vue吗?
总是报mobiscroll这个方法不存在,我用webstrom确实能点到插件里面的,所以依赖不是问题。js插件是放在index.html下引入的,没有用npm
报错代码是:initPage(){
var currYear = (new Date()).getFullYear();
mobiscroll.settings
$('#dataTime').mobiscroll().date({
theme : "android-holo",
mode : "scroller",
display : "bottom",
lang : "zh",
dateFormat : 'yyyy-mm-dd',
defaultValue : new Date(new Date().setFullYear(currYear - 30)),
startYear : currYear - 70,
endYear : currYear + 10
});
$(".checkbox-span").click(function() {
var idname = $(this).attr("id");
console.log(idname)
if (idname == "xz-checkbox") {
$(this).removeAttr("id");
$(".main-btn").attr("disabled", "disabled");
$(".main-btn").css("background", "#CCCCCC");
} else {
$(this).attr("id", "xz-checkbox");
$(".main-btn").removeAttr("disabled");
$(".main-btn").css("background", "");
}
})
$(".radio-div").click(function() {
$(".radio-div").removeAttr("id");
$(".radio-span").html("");
$(this).attr("id", "xz-radio-div");
$(this).children(".radio-span").html("<span></span>")
$("#userinfo").find("input[name='sex']").val($(this).data("sex"));
})
},
解决方案
npm install exports-loader //下载webpack loader插件
将mobiscroll插件(包括css)放在common下的js文件夹中
在需要调用Mobiscroll的组件中调用
require('exports?$=jQuery!../../Common/js/mobiscroll.js')
这篇关于javascript - vue中如何使用mobiscroll插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文