(css样式)权限控制el-button是否显示 + 鼠标悬浮停留才会显示el-button

前提:

(1)当前物理席位是主任席(seatType==‘1’)

(2)管制席位TWR_ONE账号发布了内容:管制席——zhouzebiao——。。。。

(3)主任席tatai账号发布了内容:666——6666

原来是哪个账号发布的内容,自己都修改删除(只要判断item.userId == userId就行)

最新需求:

(1)在主任席登录的账号能删除修改所有人发布的。

(2)删除修改图标在鼠标悬浮的时候才会显示。

效果为:

代码:

<div class="message-panel">
    <div class="content-div">
      <div :class="['one-message-div', (seatType == '1' ||item.userId == userId) ? 'my-message' : '']"
        v-for="item in contentList"
        :key="item.id"
        @dblclick="onLookBtn(item)"
      >
        <span class="title-content-span">
          <span class="one-message-title-span">{{ item.theme }}</span> ——
          <span :title="item.content">{{ item.content }}</span>
        </span>
        <span
          class="one-btn-div delete-btn"
          @click="onDeleteBtn(item)"
          v-isLogin
          v-if="seatType == '1' || item.userId == userId"
          title="删除"
        ></span>
        <span
          class="one-btn-div edit-btn"
          @click="onEditBtn(item)"
          v-isLogin
          v-if="seatType == '1' || item.userId == userId"
          title="修改"
        ></span>
      </div>
    </div>
</div>
<style scoped>
@import "./common.css";
.message-panel {
  height: 100%;
}

.message-panel .content-div {
  width: 100%;
  height: calc(100% - 21px);
  overflow-y: auto;
}

.message-panel >>> .add-btn {
  background-image: url("~@/assets/imgs/add.png");
  width: 22px;
  height: 22px;
  float: right;
  margin-top: 2px;
  cursor: pointer;
  z-index: 2;
  margin-right: 3px;
}

.message-panel .one-message-div {
  width: 100%;
  height: 25px;
  margin-top: 10px;
  line-height: 25px;
  background: #595959;
  font-size: 14px;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

.message-panel >>> .one-btn-div {
  width: 22px;
  height: 22px;
  float: right;
  display: inline-block;
  cursor: pointer;
  display: none;
  z-index: 3;
}
.message-panel >>> .edit-btn {
  margin-right: 10px;
  background-image: url(~@/assets/imgs/edit.png);
}

.message-panel >>> .delete-btn {
  margin-right: 5px;
  background-image: url(~@/assets/imgs/delete.png);
}

.message-panel >>> .one-message-title-span {
  font-weight: 700;
}

.message-panel >>> .title-content-span {
  width: 100%;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

<style lang="less" scoped>
.my-message:hover {
  .one-btn-div {
    display: inline-block;
  }
  .title-content-span {
    width: calc(100% - 64px);
  }
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/311691.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++|47.动态数组 48.C++的std:vector使用优化

动态数组 动态数组叫vector&#xff0c;也是一种定义好的类/数据结构。“定义好”意味着 vector处在std命名空间之中。 vector的存在代表着一种可以调用的数据结构&#xff0c;不用 动态的意思是可以将该数组的大小进行动态调整。 也就意味着起初vector是没有固定大小的。 它是…

Git 基础指令

Git 基础指令 本章涵盖了我们在使用 Git 完成各种操作时将会用到的各种基本命令。 在学习完本章之后&#xff0c;我们应该能够配置并初始化一个仓库&#xff08;repository&#xff09;、开始或停止跟踪&#xff08;track&#xff09;文件、暂存&#xff08;stage&#xff09;…

QT第四天

头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTime>//时间类 #include<QTimerEvent>//定时器事件类 #include<QtTextToSpeech> //语言播报类 #include<QPushButton> namespace Ui { class Widget; }clas…

【Scala】——变量数据类型运算符

1. 概述 1.1 Scala 和 Java 关系 1.2 scala特点 Scala是一门以Java虚拟机&#xff08;JVM&#xff09;为运行环境并将面向对象和函数式编程的最佳特性结合在一起的静态类型编程语言&#xff08;静态语言需要提前编译的如&#xff1a;Java、c、c等&#xff0c;动态语言如&#…

js 数据回调 异步 Promise

回调顺序 JavaScript 函数按照它们被调用的顺序执行。而不是以它们被定义的顺序。 js数据顺序问题 <!DOCTYPE html> <html> <body><h2>JavaScript 函数序列</h2><p>JavaScript 函数按照它们被调用的顺序执行。</p><p id"de…

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-3Phase Portrait相图,相轨迹

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-3Phase Portrait相图&#xff0c;相轨迹 1. 1-D2. 2-D3. General Form4. Summary5. 爱情中的数学-Phase Portrait 相图动态系统分析 1. 1-D 2. 2-D 3. General Form 4. Su…

你为什么还在用Promise.all?

请停止在JavaScript中使用Promise.all() 什么是JavaScript中的Promise 如果您偶然发现这篇文章,那么您可能已经熟悉了promise。 但是,对于那些JavaScript新手来说,让我们来详细说明一下。 从本质上讲,Promise对象表示异步操作的最终完成或失败。 有趣的是,当创建promise时,其值…

【昕宝爸爸小模块】ConcurrentHashMap为什么不允许null值

ConcurrentHashMap为什么不允许null值 一、✅典型解析二、✅要实现一个HashMap怎么做2.1 ✅需要考虑以下几个方面2.2 ✅基于数组和链表的HashMap实现Demo2.3 ✅扩容后如何解决链表长度过长的问题 三、✅拓展知识仓3.1 ✅在多线程环境下如何保证数据的正确性和性能3.2 ✅那如何在…

git 的安装

git 的安装 在我们开始使用 Git 前&#xff0c;需要将它安装在我们的电脑上。即便已经安装&#xff0c;最好将它升级到最新的版本。 我们可以通过软件包或者其它安装程序来安装&#xff0c;或者下载源码编译安装。 本文只介绍通过在 windows 上安装软件包的方式&#xff0c;其…

vue Element Plus Cascader级联选择器点击标签选中复选框

element-plus原功能 element-plus的Cascader级联选择器点击标签时是不会选中复选框的&#xff0c;我们想要实现点击标签时也能选中复选框这个效果&#xff0c;那么就要用到一些原生的方法 实现效果 mounted() {// Cascader 级联选择器: 点击文本就让它自动点击前面的input就可…

Vue 自定义仿word表单录入之日期输入组件

因项目需要&#xff0c;要实现仿word方式录入数据&#xff0c;要实现鼠标经过时才显示编辑组件&#xff0c;预览及离开后则显示具体的文字。 鼠标经过时显示 正常显示及离开时显示 组件代码 <template ><div class"paper-input flex flex-col border-box "…

JAVA基础学习笔记-day17-反射

JAVA基础学习笔记-day17-反射 1. 反射(Reflection)的概念1.1 反射的出现背景1.2 反射概述1.3 Java反射机制研究及应用1.4 反射相关的主要API1.5 反射的优缺点 2. 理解Class类并获取Class实例2.1 理解Class2.1.1 理论上2.1.2 内存结构上 2.2 获取Class类的实例(四种方法)2.3 哪些…

Android基于Matrix绘制PaintDrawable设置BitmapShader,以手指触点为中心显示原图像圆图,Kotlin

Android基于Matrix绘制PaintDrawable设置BitmapShader&#xff0c;以手指触点为中心显示原图像圆图&#xff0c;Kotlin 手指在上面的图上移动&#xff0c;“剪切”出上面图中以手指触点为中心的图&#xff08;半径图&#xff09;&#xff0c;然后在下面的ImageView显示。 impor…

【AI视野·今日Robot 机器人论文速览 第七十三期】Tue, 9 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Tue, 9 Jan 2024 Totally 40 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Digital Twin for Autonomous Surface Vessels for Safe Maritime Navigation Authors Daniel Menges, Andreas Von Brandis, A…

鸿蒙原生应用再添新丁!万达 入局鸿蒙

鸿蒙原生应用再添新丁&#xff01;万达 入局鸿蒙 来自 HarmonyOS 微博1月11日消息&#xff0c;#万达酒店及度假村启动鸿蒙原生应用及元服务开发# 作为具有中国特色的国牌服务酒店标杆之一&#xff0c;万达酒店及度假村Wanda 将带来全新的服务和交互方式&#xff0c;一步获取“…

3 快速前端开发

3 前端JavaScript 3 前端JavaScript1. JavaScript1.1 代码位置1.2 注释1.3 变量1.4 字符串类型案例&#xff1a;跑马灯 1.5 数组案例&#xff1a;动态数据 1.6 对象&#xff08;字典&#xff09;案例&#xff1a;动态表格 1.7 条件语句1.8 函数 2.DOM2.1 事件的绑定 3.知识点的…

大模型训练营Day3 基于 InternLM 和 LangChain 搭建你的知识库

本次的授课人是一个提示词开发项目的负责人。下面一起进入本期课程吧》 本次课程内容主要如下&#xff1a; 开篇交代了大模型的局限性&#xff0c;然后引出主题&#xff1a; 简单总结&#xff0c;大模型是根据数据集训练&#xff0c;很难使用具有实时性的数据进行重新训练&am…

SpringBoot中使用LocalDateTime踩坑记录

文章目录 前言一、为什么推荐使用java.time包的LocalDateTime而不是java.util的Date&#xff1f;二、使用LocalDateTime和LocalDate时遇到了哪些坑&#xff1f;2.1 Redis序列化报错2.1.1 问题现象2.1.2 问题分析2.1.3 解决方案 2.2 LocalDateTime和LocalDate类型的属性返回给前…

Spark SQL进阶

DataFrame详解 清洗相关API 去重API 删除空缺值的API 替换缺失值的API from pyspark import SparkConf, SparkContext import os from pyspark.sql import SparkSession# 绑定指定的Python解释器 os.environ[SPARK_HOME] /export/server/spark os.environ[PYSPARK_PYTHON]…

函数——自制函数(c++)

今天进入自制函数。 自制函数&#xff0c;需要自己定义其功能。比如&#xff0c;设置一个没有参数没有返回值的积木&#xff0c;叫“aaa”。那么&#xff0c;如果想要运行“aaa”&#xff0c;就需要以下代码&#xff1a; void aaa(); 告诉系统有“aaa”…