记一次vue-cli引入mui的一系列坑

开始我的博客之旅,第一次写博客,来记录一下MUI组件使用中遇到的一系列坑,请各位路过的大牛多多指教.

在一个练手的vue-cli小项目中,用到了MUI组件库中的几个组件

1. 选项卡组件,代码如下

<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>

2. 区域滚动组件,代码如下

<div id="slider" class="mui-slider mui-fullscreen">
   <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
   	<div class="mui-scroll">
           	<a class="mui-control-item mui-active" href="#item1mobile" data-wid="tab-top-subpage-1.html">
           		推荐
           	</a>
           		<a class="mui-control-item" href="#item2mobile" data-wid="tab-top-subpage-2.html">
           		热点
           	</a>
           	<a class="mui-control-item" href="#item3mobile" data-wid="tab-top-subpage-3.html">
           		北京
           	</a>
           	<a class="mui-control-item" href="#item4mobile" data-wid="tab-top-subpage-4.html">
           		社会
           	</a>
           	<a class="mui-control-item" href="#item5mobile" data-wid="tab-top-subpage-5.html">
           			娱乐
           	</a>
   	</div>
   </div>
</div>

3. 数字输入框,代码如下

<div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
	<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
	<input id="test" class="mui-input-numbox" type="number" value="5" />
	<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
</div>

第一个坑:

    使用区域滚动组件时,不能滑动,导入报错

 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to thems

      通过一系列百度,找到一个去除严格模式的插件

             npm install babel-plugin-transform-remove-strict-mode

         配置 

                .babelrc{"plugins":["transform-remove-strict-mode"]}

      配置之后发现,其他所有依赖的包统统不能用了,所以---删除所有包,重新

                npm install

      换思路: 

            将mui和batter-scroll混合使用,可以滑动了

第二个坑:

        使用数字输入框组件,再次报错,还是严格模式的问题

        解决方式:

            还是配置

.babelrc  {"ignore": ["./src/lib/mui/js/mui.js"]}  将mui.js忽略掉

        问题解决!

第三个坑:

    代码写着写着,发现一开始使用的 选项卡组件 在移动端不能切换了,路由配置正确,还是mui组件的问题

    解决方式: 

        在组件中添加js代码

       手机版:

 mui('body').on('tap','a',function(){document.location.href=this.href;});  

       电脑版: 

mui('body').on('click','a',function(){document.location.href=this.href;});

    问题解决!

第四个坑:

    忽略掉后 mui.js 后 区域滚动组件 点击元素直接跳转到主页  最后发现是 a 标签的缘故

    解决方式(任选其一):

            1.将 a 标签 换为其他标签

            2.给 a 标签 添加  href="Javascript:;" 

            3.给 click(最好换成tap事件) 事件 取消冒泡  @tap.stop=" click"   (.prevent取消默认事件不管用,不知道为什么)

        问题解决!