记录一次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取消默认事件不管用,不知道为什么)

            问题解决!