最近开发项目使用了Vue,由于对Vue的了解还停留在初识的阶段,所以难不了会出现很多以前见都没见过的错误提示,而被搞得不知所措,往往实现一个简单的功能也要花上大半天还未必能解决,为了不再犯同样的错误,我是一边做开发一边给大家分享我踩过的坑,希望给大家及时填坑,以免大家犯同样的错误。
今天做数据删除的时候希望删除前弹出个漂亮点的确定框,因而引入了SweetAlert2,我在引入的时候是这样写的:
<script type="text/javascript" src="__STATIC__/lib/sweetalert2/sweetalert2.all.min.js"></script>
刷新页面的时候在console面板出现了如下错误提示:
Uncaught SyntaxError: Cannot use import statement outside a module
错误原因:不能在模块外导入文件,我想可能是因为<script>的问题吧,于是百度了下,看网上其他朋友发贴是讲因为浏览器的默认脚本是Javascript,所以加载JS的时候我们一般不使用Type也无错,因为Module 的加载实现的是es6语法,所以在浏览器加载html文件时,需要在script 标签中加入type="module"属性,也就是说要将上述的代码改成如下:
<script type="module" src="__STATIC__/lib/sweetalert2/sweetalert2.all.min.js"></script>
这样又出现了其它错误,真是没办法写下去了,对这个鸟东西不熟悉排错真是逆天了要,算了,难得搞了,于是决定采用Requirejs一次性将Vue,Swal,Layer等一次性全部导入,代码如下:
<script type="text/javascript" src="__STATIC__/lib/requirejs/require.js"></script>
<script>
var hostname = location.hostname;
if(location.port) hostname += ':' + location.port;
requirejs.config({
map: {
'*': {
'css': '__STATIC__/lib/requirejs/require-css.js'
}
},
shim:{
'iview':{
deps:['css!iviewcss']
},
'layer':{
deps:['css!layercss']
}
},
baseUrl:'//'+hostname+'/',
paths: {
'static':'static',
'system':'system',
'vue':'static/lib/vue/dist/vue.min',
'axios':'static/lib/axios.min',
'iview':'static/lib/iview/dist/iview.min',
'iviewcss':'static/lib/iview/dist/styles/iview',
'lodash':'static/lib/lodash',
'layer':'static/lib/layer/layer',
'layercss':'static/lib/layer/theme/default/layer',
'jquery':'static/lib/jquery/jquery.min',
'moment':'static/lib/moment',
'sweetalert':'static/lib/sweetalert2/sweetalert2.all.min'
},
basket: {
excludes:['system/js/index','system/util/mpVueComponent','system/util/mpVuePackage']
// excludes:['system/util/mpFormBuilder','system/js/index','system/util/mpVueComponent','system/util/mpVuePackage']
}
});
</script>
SweetAlert实例化使用代码,大家可参考参考~~
case 'delstor': var url=layList.U({c:'goods.goods_list',a:'delete',q:{id:data.id}}); if(data.status==4) var code = {title:"操作提示",text:"确定恢复产品操作吗?",type:'info',confirm:'是的,恢复该产品'}; else var code = {title:"操作提示",text:"确定将该产品移入回收站吗?",type:'info',confirm:'是的,移入回收站'}; requirejs(['sweetalert','axios'],function(swal,axios){ swal(code,function(){ axios.get(url).then(function(res){ if(res.status == 200 && res.data.code == 200) { swal('success',res.data.msg); obj.del(); }else return Promise.reject(res.data.msg || '删除失败') }).catch(function(err){ swal('error',err); }); },code) }) break;
这样,效果就出来了!
扫码关注公众号
长沙网站设计,长沙软件开发,长沙进销存开发,php进销存系统,ViooMa收银系统,ThinkPHP框架进销存系统
湘ICP备19023859号-1
Copyright©2020 长沙唯马网络科技有限公司. All Rights Reserved.
2022-08-04 17:28:28