vue2+elementui进行hover提示的使用

2024-07-28 22:56:38

vue2+elementui进行hover提示分为外部和内部，内部使用el-tooltip，外部使用mouseover和mouseout来让提示框显隐(两个事件要做节流处理，事件要在beforedestroy中销毁）

<template>
  <div class="hello">
<!-- <el-tooltip placement="top"> -->

    <!-- <div slot="content">外部1<br />外部2</div> -->
    <ol class="list-wrap" @mouseover.stop="mouseover" @mouseout.stop="mouseout">
      <li v-for="site in sites"
          :key="site.id">
        <el-tooltip placement="top">
          <div slot="content">多行信息<br />第二行信息</div>
          <span>span</span>
        </el-tooltip>
      </li>
    </ol>
    <div v-if="isShow">ol的提示信息</div>
     <!-- </el-tooltip> -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isShow: false,
      sites: [
        { id: 'sfdsfsd', name: 'Runoob' },
        { id: 'sfdsfdfdsd', name: 'Google' },
        { id: 'sfdssdffsd', name: 'Taobao' }
      ],
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    mouseover (e) {
      if (e.target.tagName === 'OL') {
        this.isShow = true
        console.log('enter', e.target.tagName)
      }
    },
    mouseout (e) {
      if (e.target.tagName === 'OL') {
        console.log('leave', e.target.tagName)
        this.isShow = false
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list-wrap{
  background-color: #42b983;
}
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

展示效果如下：

hover外部：

hover里面span：

扩展：如果是简单的hover提示文字（单行或者多行），可以使用::hover伪元素来实现，但是如果要使用html中属性值作为提示值，添加\A不能换行

到此这篇关于vue2+elementui进行hover提示的使用的文章就介绍到这了,更多相关vue2 element hover提示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue中的ElementUI的使用详解

登录+sessionStorage 效果展示登录成功后会把用户id存入前端的sessionStorage,拦截器会根据是否存在用户id来进行拦截也可以将用户权限存入sessionStorage,然后当访问某个页面的时候在created方法中判断是否具有权限 <template> <div class="login-wrap"> <el-form class="login-container" ref="loginFormR
Vue之ElementUI Form表单校验

表单校验是前端开发过程中最常用到的功能之一,根据个人的工作经验总结在此对表单校验功能的基础用法进行整理说明. 以下是form的demo el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email"
vue ElementUI的from表单实现登录效果的示例

目录 1.通过ElementUI构建基本的样式 2.用点击提交按钮将将账号密码框内的内容传给后台数据总结 1.通过ElementUI构建基本的样式不了解ElementUI官方网站 https://element.eleme.cn/#/zh-CN 对 ElementUI 进行基本的了解. 1.1 ElementUI的使用首先在项目中通过指令 npm i element-ui S 安装ElementUI 1.2 然后在官网中找到 from表单然后就可以基本的布局了那么下面是我
Vue2.0+ElementUI+PageHelper实现的表格分页功能

前言最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部缓存,然后分页显示,这样在数据量较大的时候会对浏览器的速度产生影响,所以考虑之后我使用了后端分页,后端分页的特点是对当前页的数据进行请求,每次当页码变化或者每页数据量变化的时候,就重新发一次请求.这里所用到的技术主要有以下几种: Spring SpringMVC Mybatis VueJS 2.0 ElementUI 后端数据库用的是Mys
Vue+ElementUI怎么处理超大表单实例讲解

最近公司由于业务的调整,之前的超长表单的逻辑改动较多,所以我就打算重构了(之前是一个已离职的后台写的,也没有注释,一个组件写了4000+行,实在有心无力).为了各位方便阅读,我这里把项目里拆分了14个组件进行了精简. 整体思路大表单根据业务模块进行拆分保存时使用el-form提供的validate方法进行校验(循环对每一个拆分的组件进行校验) mixin 对每个组件的公共提取(也利于后期项目的维护) 开始这里以拆分2个组件为例:form1, form2(方便读者观看,命名勿喷) 这里两个组
基于Vue结合ElementUI的换肤解决方案

目录写在前面方案一.使用全局的样式覆盖(前端通用) 方案二.自定义自己的Element-ui配色方案三.快速改变网站颜色方案四.实时更换主色调写在前面换肤这个功能,不能算是很常见,但是也是有需求的,所以这里提供几种前端的换肤解决方案,供大家参考. 本文将介绍几种基于Vue.Element-UI的换肤实现方案,力争通俗易懂,易上手,希望大家喜欢~ 方案一.使用全局的样式覆盖(前端通用) 这个应该是最常见,也是大家最容易想到的,也是最容易实现的一种方案. 我们单独写一份样式表(css 文
vue2+elementui进行hover提示的使用

vue2+elementui进行hover提示分为外部和内部,内部使用el-tooltip,外部使用mouseover和mouseout来让提示框显隐(两个事件要做节流处理,事件要在beforedestroy中销毁) <template> <div class="hello">  <!-- <div slot="conten
vue2+elementUI的el-tree的选中、高亮、定位功能的实现

在使用无选择框的el-tree时遇到的坑以及如何使用el-tree 最后附全部代码 ref="tree" ----> 必须写 accordion ----> 是否每次只打开一个同级树节点展开看个人选择 default-expand-all ----> 默认打开全部节点 :data="leftData" ----> 必写展示数据 @node-click="handleNodeClick" ----> 节点被点击时的
Vue2+element-ui实现面包屑导航

本文实例为大家分享了Vue2+element-ui实现面包屑导航的具体代码,供大家参考,具体内容如下 1.面包屑导航栏布局代码: <template>  <div style="padding: 25px 0;flex: 1"> <el-breadcrumb separator-class="el-icon-arrow-right">
vue2+elementUI的el-tree的懒加载功能

lazy 属性为true 时生效lazy ----> 是否懒加载子节点,需与 load 方法结合使用 isLeaf可以提前告知 Tree 某个节点是否为叶子节点,从而避免在叶子节点前渲染下拉按钮. HTML部分 <el-tree class="filter-tree" ref="tree" accordion :data="leftData" @node-click="handleNodeClick" node-k
仿照Element-ui实现一个简易的$message方法

前言在需要对用户进行提示时,有时会遇到这种场景:使用模态框提示太过硬核,使用toast提示又太轻了,这时候可以选择使用页面顶部滑下的消息提示.本文仿照element-ui的实现一个类似$message的方法. 思路梳理首先我们来看下element-ui中消息提示的效果是怎么样的,找些思路. 从图中我们可以看消息提示是可以同时显示多条的,并且定位看起来都是fixed,居中展示,我们自然可以想到使用数组来存储这些消息的信息,并且根据每一条提示消息的显示隐藏更改每一项的top值,然后就是加一些动画
前端vue2 element ui高效配置化省时又省力

目录前言一.场景介绍 1. 业务场景 2. 配置化想法萌生二.设计 & 实现 1. 设计协议 2. 实现渲染器 3. render函数 & 配置数据 4.丰富组件能力,实现业务三.配置静态化前言这篇文章是笔者曾经全盘负责了接近一年的广告投放系统沉淀下来的开发经验,大家各取所需,不喜勿喷-当然啦,有自己的见解.更好的建议的大牛朋友们,我们评论区见-hhh,大多提点高见,让笔者继续学习继续进步! 本文从场景介绍 . 设计&实现 . 性能优化三个部分进行讲解.笔者当时的技
Vue项目之ES6装饰器在项目实战中的应用

目录前言装饰模式(Decorator) ES6 装饰器装饰器应用 Validate CatchError Confirmation 总结参考前言在面向对象(OOP)的设计模式中,装饰器的应用非常多,比如在 Java 和 Python 中,都有非常多的应用.ES6 也新增了装饰器的功能,本文会介绍 ES6 的装饰器的概念.作用以及在 Vue + ElementUI 的项目实战中的应用. 装饰模式(Decorator) 装饰模式(Decorator Pattern)允许向一个现有的对象添
解决vue自定义全局消息框组件问题

1.发现问题在进行移动端适配的时候,为了在各个型号的设备上能够更好的提现结构排版,决定采用rem布局.采用rem布局的时候html的字体font-size是有一个标准的.我这边用的是750px的设计稿,就采用1rem = 100px. 在使用的过程中会用到一些第三方UI组件,而第三方UI组件是以px单位为标准的. 使用时发现:本来应该细长的提示语句变得很大! 最后发现可能是因为这个icon是继承了html设定的font-size,尝试加一些样式上去还是无效.(如果rem布局上有直接更改第三方组
如何在Vue项目中使用axios请求

在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以以下示例也是以 axios 为基础来进行封装的. 1.安装首先是 npm 安装 axios 很简单:npm install axios 2.没有封装存在的问题如果在没有封装接口的项目中,在文件中随处可以看到如下的接口调用方法: this.$axios.post("/user/add", { params: { name: this.name, age: this.age } }) .then(res =
Vue使用axios发送请求并实现简单封装的示例详解

目录一.安装axios 二.简单使用 1.配置 2.发送请求三.封装使用 1.创建js封装类 2.配置 3.发送请求一.安装axios npm install axios --save 二.简单使用 1.配置 main.js中加入如下内容 // 引入axios --------------------------------------------------- import axios from 'axios' Vue.prototype.$axios = axios Vue.proto

vue2+elementui进行hover提示的使用

相关推荐

随机推荐