vue使用mui遇到的坑及解决

目录
  • 使用mui遇到的坑记录
  • mui的js冲突了,有2种解决方法
    • 方法1
    • 方法2

使用mui遇到的坑记录

主要用到webpack打包工具与mui，mint ui，其中mui有不少坑，在此记录

先是用mui的tab组件做了个底部选项卡，如下

不错，样式还行，但是后期发现切换选项的时候会报错Unable to preventDefault inside passive event listener due to target being treated as passive，如下

但是这个错误并不会影响运行 ，但是我有强迫症，查阅资料发现是touch事件不能侦听preventDefault的问题，就是触发触摸事件时候引起的问题，可以简单点给通配选择器加个样式touch-action:none，发现成功解决。

之后根据需求需要一个横向滚动的导航栏，大概长这样

要求可以区域滚动，mui很友好 的给我们提供了这个组件，当然目前这个横向滚动的例子似乎没在官网上，需要我们下载官方的文档，github网址https://github.com/dcloudio/mui 里面可以找到这个案例

路径可以在图中看到，可以双击点开查看

废话不多说，然后官方要求加载js文件，ok直接引入，之后我用webpack打包后发现报错了

Uncaught TypeError: ‘caller’,‘callee’,and ‘arguments’ properties may not be accessed on strict mode

于是查阅资料发现webpack默认使用js的严格模式，但mui有些并不是严格模式，所以需要修改一下，安装babel包 并进入 .babelrc 文件 添加代码

transform-remove-strict-mode

问题解决，之后又需要指定初始化滚动位置，根据官方文档需要使用scrollTo(x,y,time)函数，ok，直接复制过来，问题来了，

Uncaught TypeError: (0 , _muiMin2.default)(…).scroll(…).scrollTo is not a function

找了半天资料发现要在mounted钩子函数中使用，因为在此之前改组件还未完全渲染完成，放created中都不行（我大多数时候习惯在created中处理业务）。

可是问题又来了，头都要爆炸了，设置初始滚动位置后，发现滑动一下就空白了，后来发现是scrollTo的参数要求要数字类型，而我给的是字符串类型，用parseInt转换一下即可。

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

没错，问题又来了，我点击底部的选项卡发现不能切换，查阅资料才发现这是因为类名mui-tab-item冲突的问题

mui的js冲突了,有2种解决方法

方法1

把mui-tab-item 的样式复制过来，然后改一下类名，可以改mui-tab-item-s之类的不容易混乱

方法2

在主组件中（一般是app组件）加入如下代码

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

注意，一定要在mounted钩子函数中使用。

还有个小问题，vue的滚动事件问题，若父容器设置了overflow:hidden，使用onscroll绑定事件会无效，若不想改变父容器overflow属性，可以用

addEventListener('scroll',function(){},true)

注意加上true参数表示捕获模式（该函数详情可参考事件冒泡）。

到此，目前已发现的问题已解决

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

赞 (0)

相关推荐

  • Vue cli+mui 区域滚动的实例代码

    vue cli+mui配合使用达到区域滚到的效果 ,方法如下 第一步 引入mui css js @import url("/static/mui.min.css"); JS import mui from '../../../static/mui.min.js'; 第二步 写结构 mui的区域滚动结构是这样的 <div class="mui-scroll-wrapper"> <div class="mui-scroll">

  • Vue+mui实现图片的本地缓存示例代码

    下面一段代码给大家分享基于Vue+mui实现图片的本地缓存,具体代码如下所示: const menu = { state: { products: {}, GLOBAL_CONFIG:GLOBAL_CONFIG['GLOBAL_CONFIG'] }, mutations: { get_product: function (state, products) { //商品列表 state.products = products; for(let i = 0; i < state.products.l

  • vue里面使用mui的弹出日期选择插件实例

    如下所示: comm.loadjs("js/mui.picker.min.js","js/mui.poppicker.js") 因为是点击才弹出的,所以就不用在index.html里面写<script src=""></script>这样的方式来引入js了.因为index.html这个页面是每个组件即.vue都会引用的,所以你如果在这里面引入太多js肯定会影响网页的加载速度的. 对于页面加载以后需要引入的js你可以使用上面

  • VUE中使用MUI方法

    VUE中如何使用MUI 1.第一步:下载MUI 百度搜索MUI进入其官网点击右上角github地址,下载MUI文件 2.第二步:拷贝文件 拷贝下载文件的dist目录中的三个文件复制到自己项目中创建的mui目录中 . 若引入的mui.css报错,可能是mui中url会指向一些图片,将图片地址的单引号改为双引号就可以了. 3.第三步:引入MUI的样式 在main.js文件中,引入mui的样式 import 'mui.css文件的相对路径'; 如 import '../mui/css/mui.css'

  • vue使用mui遇到的坑及解决

    vue使用mui遇到的坑及解决

    目录 使用mui遇到的坑记录 mui的js冲突了,有2种解决方法 方法1 方法2 使用mui遇到的坑记录 主要用到webpack打包工具与mui,mint ui,其中mui有不少坑,在此记录 先是用mui的tab组件做了个底部选项卡,如下 不错,样式还行,但是后期发现切换选项的时候会报错Unable to preventDefault inside passive event listener due to target being treated as passive,如下 但是这个错误并不会

  • 使用vue导出excel遇到的坑及解决

    使用vue导出excel遇到的坑及解决

    目录 vue导出excel遇到的坑 需求 准备工作 vue导出excel表报错处理 vue导出excel遇到的坑 需求 Vue+element UI el-table下的导出当前所有数据到一个excel文件里. 先按照网上的方法,看看有哪些坑 准备工作 1.安装依赖:yarn add xlsx file-saver -S 2.在放置需要导出功能的组件中引入 import FileSaver from "file-saver"; import XLSX from "xlsx&q

  • vue监听scroll的坑的解决方法

    vue监听scroll的坑的解决方法

    最近开始用vue写个小项目,踩了不少坑,这里记录下爬坑过程,给有同样经历的人帮助. 问题 今天想在vue的项目里面用下拉加载,然后就直接写了: 但是我发现我切换路由以后依旧其他页面也触发了scrollHandler函数,然后我想到使用了vue-router做的spa项目,window对象不变的,所以需要在每次使用后销毁. 解决办法 我回去看了下vue文档的生命周期,看到了destroyed,然后直接在这个周期内销毁就可以了. 使用throttle出现的新问题 下拉加载一般需要配合throttle

  • vue项目热更新的坑及解决

    vue项目热更新的坑及解决

    目录 vue项目热更新坑 vue项目热更新慢 查找热更新慢是哪里慢—分析原因 解决办法 vue项目热更新坑 今天在使用vue-cli构造的vue项目时,遇到一个坑. setInterval(() => { console.log('This is one.') }, 10000) 运行后如下: 这时我们修改其中的代码,不刷新网页: setInterval(() => { console.log('This is two.') }, 1000) 结果如下,发现之前的计时函数以久存在,热更新 !=

  • vue+freemarker中遇到的坑及解决

    目录 vue+freemarker遇到的坑 在这个过程中遇到了几个坑 freemarker的一些坑问题 1.对空对象十分敏感 2.freemarker中的${}与js中的${}冲突 3.渲染数字时出现逗号分隔 4.拼接渲染 5.将对象或数组渲染进js vue+freemarker遇到的坑 java后端开发者做后台管理系统,用模版技术还是挺方便的,但是如果在页面上对数据进行修改,怎么办呢? 可以用jQuery选中各个dom节点的值,然后组装成后台接口中需要的Form,再用ajax请求后台,这种方式

  • vue中this.$refs的坑及解决

    vue中this.$refs的坑及解决

    目录 vue this.$refs的坑 以下三点小坑坑 vue的坑 this.refs为空 总结来说 vue this.$refs的坑 在开发中,有时需要使用到this.$refs ,用于操作真实的DOM节点. 说一说我在使用的时候,在开发时碰到了一个小需求,需要子组件向父组件传参,而且是不需要通过事件传递的,一开始使用this.$emit()来写的,但是一直没有接受到参数,于是放弃了使用this.$emit()的使用. 于是,使用了在父组件中调用子组件的方法,来获取传递的参数.但是还是没有获取

  • 浅谈vue引入css,less遇到的坑和解决方法

    在使用vux开发手机页面时,引入vux的公共样式less一直报错,通过各种百度,Google都没有解决,走了很多弯路.最后才发现钻牛角尖了,可以换一种方法引入. 1.报错的使用:在App中 @ ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vux/src/styles/reset. less 3:10-115 @ ./~/css-loader?{"minimize":false,&

  • vue项目配置element-ui容易遇到的坑及解决

    vue项目配置element-ui容易遇到的坑及解决

    目录 vue配置element-ui遇到的坑 步骤1.npm安装 步骤2 步骤3.测试 vue element-ui需要注意的问题 vue配置element-ui遇到的坑 注意:本文章参照element-ui官方文档,快速上手部分,的部分教程 步骤1.npm安装 npm i element-ui -S 步骤2 2-1.完整引入 在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element-ui'; import

  • Vue关于对象直接赋值的坑及解决

    Vue关于对象直接赋值的坑及解决

    目录 Vue对象直接赋值的坑 Vue对象的赋值Object.assign({}, row) Vue对象直接赋值的坑 受JavaScript的限制,Vue不能监听到对象属性的添加或删除.如果这样做了,你会发现添加或删除的属性不是响应式的,即无法及时更新视图. 如果我们需要将a对象赋值给b对象时,要么把b对象的所有属性都在a对象中定义一下,要么 使用this.$set(this.object,key,value)将b对象中有a对象中没有的属性set进去,或者使用Object.assign(this.

  • VUE 使用中踩过的坑

    前言 vue如今可谓是一匹黑马,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了,本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结,帮助大家踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家! 1.路由变化页面数据不刷新问题 出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周

随机推荐