mui+vue,vue和mui什么关系

　　本文主要介绍了vue在使用mui时遇到的坑及其解决方法，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

使用mui遇到的坑记录

　　主要用webpack打包工具和mui，mint ui，其中mui有很多坑，这里有记录。

　　首先，使用mui的选项卡组件制作底部选项卡，如下所示

　　是的，样式是可以的，但是当稍后发现切换选项时，将会报告一个错误：由于目标被视为被动，无法防止被动事件侦听器内部的默认，如下所示

　　不过这个错误不会影响操作，但是我有强迫症。查了一下资料，发现是触控事件无法监听preventDefault的问题，也就是触发触控事件时导致的问题。你可以简单的在通用选择器中添加一个样式touch-action:none，结果发现成功解决了。

　　之后，根据需求，你需要一个横向滚动的导航条，类似这样的。

　　你可以要求区域滚动。mui好心地给我们提供了这个组件。当然，目前这个横滚的例子好像还没有在官网上，我们需要下载官方文档。这个案例可以在https://github.com/dcloudio/mui. github网站上找到

　　路径如图所示，双击打开即可。

　　废话不多说，然后官方要求加载js文件，ok直接介绍，然后我用webpack打包后发现了错误。

　　未捕获的类型错误：在严格模式下，不能访问“调用者”、“被调用者”和“参数”属性

　　所以我们查阅资料后发现，webpack默认使用js的严格模式，但有些mui的并不严格，所以需要对其进行修改，安装babel包，进入。添加代码的babelrc文件。

　　转换-移除-严格模式

　　解决问题后，需要指定初始滚动位置。根据官方文档，你需要使用scrollTo(x，y，time)函数。好，直接抄。问题来了。

　　未捕获的类型错误：(0，_ mu min 2 . default)(…)。滚动(…)。scrollTo不是一个函数

　　找了半天资料，发现应该是用在挂载的钩子函数里，因为在这之前，修改过的组件还没有完全渲染好，不可能放在created里(我大部分时间习惯在created里处理业务)。

　　可是，问题又来了，我的头快要爆炸了。设置好初始滚动位置后，滑动时发现是空白的。后来发现scrollTo的参数需要数值类型，但我给了它一个字符串类型。用parseInt转换就行了。

　　随着我的内容越来越多，出现了滚动条。后来发现手机上不能上下滚动，只能左右滚动以前的导航栏组件。后来发现之前设置的touch-action可以设置多种属性，于是找到了属性pan-y，用来启用单指垂直平移手势。设置好之后，我发现我可以上下滚动，而没有以前的“无法”的错误。

　　没错，问题又来了。我点了最下面的选项卡，发现无法切换。查阅资料后发现是因为类名mui-tab-item的冲突。

　　复制mui-tab-item的样式，然后更改类名。可以更改mui-tab-item-s，不容易混淆。

　　将以下代码添加到主组件(通常是应用程序组件)

　　已安装(){

　　梅(体)。on(tap ， a ，function () {

　　document . location . href=this . href；

　　});

　　}

　　请注意，它必须在已安装的挂钩功能中使用。

　　还有一个小问题，vue的滚动事件问题。如果在父容器中设置了overflow:hidden，则使用onscroll绑定事件将无效。如果不想更改父容器的溢出属性，可以使用

　　addEventListener(scroll ，function(){}，true)

　　请注意，添加true参数表示捕获模式(有关此函数的详细信息，请参考事件冒泡)。

　　到目前为止，发现的问题都解决了。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。