vue列表显示,
这篇文章主要为大家详细介绍了某视频剪辑软件在桌子表中悬浮显示数据及右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件在桌子表中悬浮显示数据及右键菜单的具体代码，供大家参考，具体内容如下
悬浮显示
这个文档里是存在的，但很容易被忽略，先看看效果图
鼠标放在哪行，就会弹出相对应的描述。
直接看代码
//列名及属性名
埃尔-表-列属性=成员标签=构件名称
//从数据数据调取
模板槽-范围="范围"
//悬浮显示数据
埃尔-波普沃触发器=悬停位置=顶部
p构建描述：{{ scope.row.memberTxt }}/p
p创建时间：{{ scope.row.date2 }}/p
div slot= reference class= name-wrapper
//行显示数据
埃尔标签大小=中等
{{ scope.row.member }}
//数据后加删除按钮
El-button icon= El-icon-delete type= text class= red @ click= handle delete(scope .$index，scope.row)
/el-button
/el-tag
/div
/el-popover
/模板
/El-表格-列
只是这些就足够了，表的设置无需做更改，用到右键菜单时才会更改；
右键菜单
这与上个可以没有关系，也可是同一个，取决于自己！
依旧是先看图
右下角的菜单就是右键的菜单了；
我们来看具体实现：首先就是表格的设置
文档中表格有这个事件，
el-table :data=tableData
type=expand
class=table
ref=multipleTable
header-cell-class-name=表格标题
@ row-context menu= row context menu //主要就是这个事件
@ selection-change= handleSelectionChange
当然，在表格下面，还要写重要的一步
上下文按钮v-if=菜单可见 @ foo= foo ref=上下文按钮
@ handle one= handle one @ handle two= handle two @ handle three= handle three
@ handle four= handle four @ handle five= handle five /上下文按钮
这些@手柄对应点击事件
接下来就是methods
rowContextmenu(行、列、事件){
this.menuVisible=false
this.menuVisible=true
//阻止右键默认行为
事件。预防默认()
这个. nextTick(()={
这个. refs.contextbutton.init(行、列、事件)
this.updForm=row
})
},
foo() { //取消鼠标监听事件菜单栏
this.menuVisible=false
/*文档。removeeventlistener( click ，this.foo) */
},
handleTwo () {
},
handleThree () {
},
handleFour (){
},
手柄五（世界其他地区){
}
那些处理开头的方法是右键菜单的方法，我自己写的就不公布了，知道是点击按钮事件就可以了重点，上面我们在表格下面写了神秘代码就要用到了
在你使用的某视频剪辑软件界面的目录下创建一个"上下文按钮"文件夹，对应上面的裁判员即可，注意大小写！
在文件夹下创建某视频剪辑软件页面
首先是html，也就是右键菜单显示的内容了
模板
div id=上下文菜单 class=上下文菜单
div class=上下文菜单_ _项 @ click= handle two()设计信息/div
div class=上下文菜单_ _项 @ click= handle three()查看图纸/div
div class=上下文菜单_ _项 @ click= handle four()查看模型/div
div class=上下文菜单_ _项 @ click= handle five()修改信息/div
/div
/模板
然后就是脚本
导出默认值{
名称："索引",
data () {
返回{
崩溃：假的，
}
},方法：{
初始化(行、列、事件){
让菜单=文档。查询选择器(#上下文菜单)
设cha=文档。身体。客户身高-事件。客户
控制台。日志(文档。身体。客户高度，事件.客户，cha)
if (cha 150) {
菜单。风格。top=事件。客户端-0 像素
}否则{
菜单。风格。top=事件。客户-60 像素
}
菜单。风格。左=事件。clientx-200 px
文档。addevent侦听器( click ，this.foo)
},
foo () {
这个发出( foo )
},
handleTwo () {
这个发出( handleTwo )
},
handleThree () {
这个emit(handleThree )
},
handleFour (){
这个发出( handleFour )
},
手柄五（世界其他地区){
这个发出( handleFive )
}
}
}
位置的话是随着你右键的不同位置二不同的
如果不喜欢这个位置，可以自己改变最后就是样式了。上下文菜单_ _项目{
显示：块；
行高：34px
文本对齐：居中；
}。上下文菜单_ _ item:not(:last-child){
边框-底部：1px实心rgba(64，158，255，2);
}。上下文菜单{
位置：绝对；
背景色：# ECF 5 ff；
宽度：100像素字体大小：12px
颜色：# 409EFF
边框-半径：4px
-WebKit-box-sizing:border-box；
框大小：边框-框；
边框：1px实心rgba(64，158，255，2);
空白：nowrap
z指数：1000;
}。上下文菜单_ _项目：悬停{
光标：指针；
背景：# 66 B1 ff
边框颜色：# 66 B1 ff
颜色：# fff
}
颜色什么的都是我喜欢的，不喜欢的话可以自己改变。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。