vue和bootstrap-switch结合坑

4 篇文章 0 订阅
1 篇文章 0 订阅

需求:项目中需要做个开关,就选择boostrap-switch。(boostrap-switch官方是不是放弃了?)
先走正规的流程:
1、引入插件

<link rel="stylesheet" href="./static/css/bootstrap-switch.min.css">
<script src="./static/js/bootstrap-switch.min.js"></script>

2、html

<input name="status" type="checkbox">

3、js

$('[name="status"]').bootstrapSwitch({  
		onText:"启用",  
		offText:"停用",  
		onColor:"success",  
		offColor:"danger",  
		size:"mini",
		onSwitchChange : function(event, state) { //事件函数
			console.log(state)
		}
}) 

不出什么意外,应该就可以了~~~~怎么可能这么容易就解决了(想骂人,嘤嘤)
注意:上错误!!!!
错误一:
在这里插入图片描述
什么鬼!就怕插件引入的时候就报错。没办法,找吧。
大家注意我上面的bootstrap-switch的引用路径(vue项目),这是放在static目录中的资源。那么引入的时候就在index.html中。那jQuery呢?自然也不能按照原来的在main.js中导入了,于是我试了试也把jq放在static中,并且在bootstrap-switch之前引用,问题解决了。不用说了,清楚原因了吧。

错误二:
在这里插入图片描述
这种错误不用说,一定是插件没有加载到。后来我查了控制台network,发现css和js都正确加载了。我…
因为项目是vue,我就想着直接在模块中引入这个插件试试吧。
在这里插入图片描述
这是在我的.vue模块中引入的,问题解决了。原因:研究中~
以上操作完成,得到正确开关:
在这里插入图片描述
但是还不够完美,后续我会继续修理的。
残留问题:js中的size不管用【哎】,插件加载到底有什么问题。

注意:我的这个开关是在bootstrap模态框中的,没有设置任何其他的。

点个赞,谢谢哦。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值