木灵鱼儿
阅读:2599
关于element Tooltip组件与 Drawer和Dialog这种带遮罩层的冲突问题
问题
当通过Tooltip组件,click事件触发抽屉或者弹窗功能时,Tooltip的hover效果,会在抽屉和弹窗功能关闭后又再次触发显示。
bug图
解决思路
我估计是因为遮罩层的问题,导致元素的事件监听不到鼠标离开,导致关闭弹窗后,浏览器又自动选中了。
所以我的解决办法很简单,找到那个触发hover效果的dom元素,对他进行离开事件触发即可。
<el-tooltip effect="dark" content="通知" placement="bottom">
<a href="javascript:;" @click="onOpenNotification"></a>
</el-tooltip>
a元素就是tooltip 的触发对象,a被click点击是,会让弹窗组件显示,同时我们还需要对它进行事件触发
onOpenNotification(event) {
this.openNotification = true; //弹窗显示
event.target.blur(); //去除重复显示tooptis
},
如果存在子元素,我们可以通过currentTarget
获取到绑定事件的元素,从而获取到tooltip 的触发对象
onOpenNotification(event) {
this.openNotification = true; //弹窗显示
event.currentTarget.blur(); //去除重复显示tooptis
},
说明:
我这边也只是应对这种单一情况,有的可能被click点击触发的并不是tooltip的触发元素,可能是其他元素,具体这种情况,可以使用ref的方式获取触发的dom元素。
当然这也是抛砖引玉,不同的使用场景可能会有不同,但是原理是相同的。
修复后的效果
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
封装一个dialog弹窗组件
需求看了半天uniapp官方提供的插件,发现就是没有dialog弹窗的封装,有点难受,这个弹窗其实用的地方还挺多的, 但是uni-popup组件的用法实在是有点粗暴啊,需要通过ref获取popup组件实例,操作组件实例的open和close方法实现开关,和我们日常的v-model绑定差了好多,于是自己想着造一个。在网页端我们watch监听props的变量,然后在nextTick会调中使用popup组件实例是没有问题的,但是在微信小程序中发现这个方法有一个问题?如果我这个弹窗默认就是true打开的状态,那么在watch中即便使用了nextTick我们也无法获取到组件的实例,这个不知道是不是...
关于 element table多选里面实现单选的偷懒做法
在elment的table多选中增加单选逻辑,这个也不能说产品的问题,单选和多选应该算是比较基础的应用,但是,element并没有对单选做支持。于是我有了一个偷懒思路!前提由于table的一键全选按钮无法进行细致化操作,无法控制点击时选中的数量,只能在选中后的回调里面处理,所以,我的做法是单选时隐藏这个按钮。 selectable方法可以返回布尔值来表示当前格子是否允许勾选或者取消,其实就是禁用的意思。<el-table-column type="selection" :selectable="onSelectable"></el...

关于element el-input 输入的值需要转number的问题
前言经常是一个input表单需要输入数字和小数,那么如果仅仅是要求数据格式,我们可以通过表单校验的方式对输入的值进行限制,具体的做法,我之前就写过文章:《element input表单验证数字类型方法大全》里面有关于数字类型校验的方式,基本涵盖了日常需求。但是,仅仅就只能这样吗???no,如果后端要求你输入的数字,提交给他的时候也必须是数字类型呢?要知道,即便我们做了表单校验,校验它输入的必须是数字格式,但是input本身就是一个string类型的值,即便你设置type="number"也无法改变它值的类型。有人说用.number;其实这个问题之前就聊过了,这个修饰符...
关于element table合并格子的思路
效果图需要将第一个col值相同的格子row进行合并。实现element的表格提供了一个span-method方法,该方法会为每个格子运行一次。比如,有一个3行的表格,每行4个格子,那么span-method就会运行:3*4=12;共计12次。有时候我们并不需要每个格子都运行一次,在上面的需求上,我们只需要每行运行一次就行了,所以我们可以通过span-method的参数中,解构出columnIndex每行每个格子的下标。<script> export default { methods: { spanMethod({columnIndex}) { if(...

关于element侧边栏导航一些新想法
高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。常见的场景: 详情页为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢?我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。那么如果没有父级,就使用自己遵循这个原则,我们对el-menu的defau...
element input异步校验+自定义错误提示
主要的效果就是用户注册时,输入的账号如果已经注册了,要提示已经注册,然后提供一个按钮,直接前往登陆。效果图教程首先我们要知道怎么进行自定义错误提示<template> <el-form :model="form" :rules="rules" ref="ruleForm"> <el-form-item prop="account"> <el-input v-model="form.account" name="a...

element input表单验证数字类型方法大全
是不是常常头疼数字类型的校验,整数,小数,往往无法通过一个rules的type属性搞定,自定义校验又五花八门,是否有一套标准流程呢?整数校验整数校验简单,input使用.number修饰符,rules配置type属性即可。<template> <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="短信条数:" pr...
关于element el-checkbox组件click事件的一些想法
el-checkbox本身是没有click事件的,但是我们可以通过native的方式穿透下去,但是这样的话会有一个问题,我们先看下代码:<el-checkbox v-model="checked" @click.native="onClick">备选项</el-checkbox>如果你在onClick函数中进行输出,你会发现,click实际上运行了两次,native本身是将事件绑定给了组件的根元素,这就导致他会被子元素的click事件冒泡触发。哪怕你加了stop也没有效果,因为stop只能防止根元素往上冒泡,并不能阻止他本身...
vue 通过js触发element ui的图片预览组件
element ui的图片预览组件并没有单独提供出来,默认是在image组件里面一起使用,但是有的时候,我们需要点击某一个自定义按钮,然后弹出图片预览,但是,又不需要使用el-image组件,于是乎,有了这篇笔记。首先思路并不是我的,我也是看了下同事,他网上找的教程,然后我看了下,在掘金找到一篇文章:《Vue中使用element-ui的内置组件实现图片预览全局调用功能》;深受启发,于是也记下自己的笔记。首先思路是两个:element ui的图片预览本身是一个vue组件vue.extend构造器将vue组件通过js的方式构造出来,new出来的这个构造器,他的属性为组件的属性以及其他(其他就...

关于async-validator 表单重置后的初始值的问题
Element UI和iView 两个框架,他们表单验证使用的是async-validator,所他们的重置表单的方法是一样的。this.$refs[name].resetFields();使用该方法,会重置校验状态和表单值,表单的值会恢复成默认的值。那么,这个默认值的定义是什么?我今天就遇到了一个情况,就是我的表单绑定的对象,是一个空值,然后我在这个元素被创建时,拿到props传过来的值赋值给表单对象。当我再来改动表单内容后,进行表单重置时,发现,重置后表单显示的值居然是我从props中获取的那个。也就是说,重置表单,他并没有恢复我表单对象的空状态。所以我就在想,他的默认值是怎么判断的...