MUI中vue的@click事件没反应

最新推荐文章于 2024-01-31 11:01:48 发布
最新推荐文章于 2024-01-31 11:01:48 发布
阅读量484 收藏
点赞数 1
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32864189/article/details/106833687
版权

这是因为mui中上拉加载更多或下拉刷新中的滑动事件和vue事件冲突导致的

只需要将   @click  改为@tap

就是这么简单

另外mui中 双 webview 模式 不会出现这个问题，只有 单webview模式会有。

b--d
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
mui+vue轮播图
01-03
在移动端开发中，MUI（Mobile UI）框架与Vue.js结合使用可以构建高效、高性能的移动应用。MUI提供了一套完整的UI组件库，而Vue.js则是一个轻量级但功能强大的前端MVVM框架，两者结合能实现快速的前端开发。本教程将...
Vue+Mui实现列表侧滑删除功能.zip
04-16
在本文中，我们将深入探讨如何使用Vue.js框架与Material UI（Mui）库来实现一个具有列表侧滑删除功能的应用。Vue.js是一个轻量级、高性能的前端JavaScript框架，而Material UI则是基于Google的Material Design规范...
【踩坑日记】Vue组件@click事件点击没有反应
热门推荐
LadenxxxxD
10-25 1万+
项目场景： 在自定义组件上绑定@click事件无法触发 问题描述： 在自定义组件上绑定@click事件无法触发 <template> <div>自定义组件<div> </template> <MyComponent @click="myMethods"></MyComponent> 原因分析： 凡是组件中绑定的事件，都应该是这个组件本身就存在的事件。 因此在自定义组件上绑定的click会被vue认为是组件内部的事件。 事实
点击事件@click 失效问题
qiaoqiaoBigBoss的博客
03-09 3083
问题： 在标签上设置点击事件@click，发现无法触发事件发生 原因： 发现这个标签上有个全局样式，对它造成了影响; pointer-event: none 解决： 将这个属性值改为auto即可 pointer-event: auto 结束 祝你今天好心情！！！ ...
在Vue中@click方法不起效
m0_52228992的博客
01-31 1061
在跟项目的时候，我们可能会遇到我们click点击时，需要执行多个操作，如：调用方法，修改变量等。举个例子，像这样，我们在管理项目中想要编辑某一值，编辑好后，我们希望我们的点击可以关闭弹窗的同时，将修改的值返回到后台。这时候，就可能出现点击方法不起效的情况。当然我是根据自己的来说的，情况可能不同。我在调用单方法时，一般这么写。语法问题，当点击事件包括调用方法，改变变量值时。但是，像文中这种情况却不太适用。
@click失效了
weixin_35753291的博客
01-23 534
@click 代表的是 HTML 中的一个事件属性,它可以用来在用户点击元素时执行特定的 JavaScript 代码.如果 @click 失效了,可能是由于 JavaScript 代码有语法错误或者事件监听函数未正确绑定导致的.建议检查 JavaScript 代码并确保事件监听函数已正确绑定. ...
Vue+mui 上拉加载
07-11
在本文中，我们将深入探讨如何在Vue.js项目中结合MUI框架实现上拉加载功能。Vue.js是一款轻量级的前端JavaScript框架，以其简洁的API和强大的功能深受开发者喜爱。而MUI则是一个针对移动设备优化的前端组件库，提供...
MUI 官方实列
09-10
MUI 针对移动设备的特点，优化了事件处理机制，如 tap 事件代替 click 事件，解决了触摸设备上的点击延迟问题。通过学习实列，你可以了解 MUI 如何优雅地处理页面交互事件。 5. **MUI 数据绑定和动态渲染** MUI ...
vue日历/日程提醒/html5本地缓存功能
12-29
先上图 功能： 1、上拉日历折叠，展示周 2、左右滑动切换月 2、“今天”回到今天；“+”添加日程 3、localStorage存储日程 index,html <body> 　 ...　<span class=add click=eventAdd>+ 　
vue中@click绑定事件点击不生效
jiangjunyuan168的博客
10-24 1万+
原因： 根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。 解决方法： 方法1：在@click后加上.native（监听根元素的原生事件，使用 .native 修饰符） @click.native = "..." 方法2：向外发送click事件 添加 methods 内添加 _click 方法： methods: { _click: functi
Vue中@click不生效的解决办法
weixin_45336090的博客
11-21 5552
问题产生的原因：     如果是普通的HTML，@click可以触发。     如果是使用ElementUI组件和路由，@click会失效。 因为Vue使用的是一套自己的事件传递机制，@click等事件是经过Vue封装的，需要为 @click 添加标识符 .native <el-button type="primary" @click.native="clickFunction()">点击按钮</el-bu
vue中div@click不起作用
sinat_23336093的博客
09-08 1万+
vue中div@click不起作用 前提，一个外层div，样式：position: relative;，设置了点击事件@click 里面用了position: absolute;绝对定位，之后点击就不起作用 目前已知两种解决方法 1、最外层div的z-index层级设置比里面绝对定位的大 2、用@click.prevent也是可以的 v-on的指令修饰符 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .
处理mui使用下拉刷新页面模板时，容器内的带参数的onclick事件没有触发问题
qq_26369317的博客
09-12 1130
在使用mui的下拉刷新和加载更多模板时，发现容器里面的onclick事件或者a超链接事件失效； 因为 mui相关的一些控件是通过拦截a标签上的href来实现的，所以mui.js会阻止a标签上的href跳转，因此需使用JS对标签添加事件监听。 因此可以使用 top方法进行点击监听； 如下 mui('body').on('tap','#addApplyCard',function(){ ...
MUI click事件无效 click没反应 click监听不到
武当山道士的博客
09-27 7547
mui click无效，click没反应
Vue下拉框使用@click点击失效的解决方案
ws135867的博客
07-18 1508
通过各种尝试后，我发现在option中设置@click事件可以完美的解决以上问题。但是select下的option标签理论上是无法监听点击事件的，所以我在@click后面添加了.native修饰符。给select组件设置@click事件点击没有反应，设置@change事件也无法满足要求（这里涉及到click和change事件得执行顺序。@change：选择下拉框中的某个选项，当将要选择的选项与正在框中的值不一样才为一次change事件。但是文本框中的内容总是与我下拉框选中的值不一致。
vue自定义组件@click点击失效问题，附解决方案
c1518589418的博客
12-03 1万+
问题描述： 自定义组件在使无法，无法绑定原vue文件内的原生click事件 原因分析： 根据查询vue官方文档，得知click事件作用于组件内部，如果组件内没有写click事件，便会无响应。 问题解决： 1.参照官方文档，可以用@click.native=“click”解决 2.可以用：将事件传递至组件内，也符合组件间的单向数据流，我就是这样解决的 主组件写法： 被调...
mui下拉刷新，和解决内容中onclick事件操作不了的问题
weixin_44540229的博客
10-24 952
实现下拉刷新 <div id="refreshContainer" class="mui-content mui-scroll-wrapper" style="z-index: 2"> <div class="mui-scroll"> 这里存放你的内容，容器。 </div> </div&g...
vue 绑定对象内点击事件失效问题
wsh2467991332的博客
04-18 1万+
突然的发现某段 html 代码中点击事件失效了。仔细观察才发现，这段代码内的元素都在 vue 绑定对象中。因此失效。解决办法是将绑定对象内的元素点击事件换成 v-on:click。...
vue mui创建项目
最新发布
05-30
Vue MUI是一款基于Vue.js和MUI的移动端UI框架，使用它可以快速构建高质量的移动应用程序。 创建Vue MUI项目的步骤如下： 1. 安装Vue CLI 如果你还没有安装Vue CLI，可以通过npm全局安装，执行以下命令： ``` npm install -g @vue/cli ``` 2. 创建项目 在命令行中执行以下命令来创建Vue MUI项目： ``` vue create my-project ``` 在弹出的选项中，选择“Manually select features”，然后按空格键选中“Babel”、“Router”、“Vuex”、“CSS Pre-processors”、“Linter / Formatter”和“Mocha”等选项，接着按下回车键。 3. 安装Vue MUI 进入到项目目录中，执行以下命令来安装Vue MUI： ``` npm install vue-mui --save ``` 4. 引入Vue MUI 在main.js中引入Vue MUI： ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import VueMUI from 'vue-mui' Vue.use(VueMUI) new Vue({ router, store, render: h => h(App) }).$mount('#app') ``` 5. 使用Vue MUI组件 现在你可以使用Vue MUI提供的各种组件来构建移动应用程序了。例如，在template中添加以下代码： ```html <mui-button type="primary" @click="handleClick">Click Me</mui-button> ``` 在script中添加以下代码： ```javascript export default { methods: { handleClick() { console.log('button clicked!') } } } ``` 这就是用Vue MUI创建项目的基本步骤。祝你好运！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值