实现用户操作指引功能
程序员文章站
2023-11-02 13:59:10
主要是通过定位找到需要指引的目标元素，然后再在蒙版上画一个div，设置为白色，定位到目标元素位置。思路大概就是这样。 图一： 图二： 图三： 代码如下： 实现效果如图二、图三所示。 ......
主要是通过定位找到需要指引的目标元素，然后再在蒙版上画一个div，设置为白色，定位到目标元素位置。思路大概就是这样。
图一：
图二：
图三：
代码如下：
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui@1.4/lib/theme-default/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.0"></script>
<style>
* {
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: 300px;
background: #eef2f6;
}
.wrapper .arc {
width: 250px;
height: 250px;
border-radius: 50%;
background: #fff;
transform: translate(25px, 25px);
position: relative;
margin-left: 100px;
float: left;
}
.wrapper .content {
width: 380px;
height: 250px;
float: left;
background: #fff;
border-radius: 4px;
border: 1px solid #ccc;
transform: translate(25px, 25px);
position: relative;
}
.wrapper .content div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background: #000;
}
.border_content {
width: 100px;
height: 50px;
border: 3px dashed #000;
border-radius: 5px;
}
.wrapper_mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.6;
z-index: 999;
}
.wrapper_mask .mask_content {
border-radius: 5px;
width: 100%;
height: 100%;
background: #fff;
}
.mask_content_border {
position: absolute;
border: 2px dashed #fff;
border-radius: 10px;
z-index: 9999;
box-sizing: content-box;
transition: all 0.2s linear;
padding:6px;
}
.clonebtn {
position: relative;
/*z-index: 99999;*/
right: -384px;
top: 10px;
}
.mask1 .mask_content_border .arrow1{
position: relative;
top: 20px;
left: 248px;
}
.mask_button{
position: absolute;
bottom: 20%;
left: 50%;
cursor: pointer;
}
/*禁止body滚动*/
.html-body-overflow
{
overflow-x:hidden;
overflow-y:hidden;
}
</style>
</head>
<body>
<div id="app">
<div class="wrapper">
<div class="content" ref="uploadreport">
<div></div>
</div>
<div class="arc" ref="arc"></div>
<el-button class="clonebtn" @click="start">操作指引</el-button>
</div>
<div class="wrapper_mask" v-show="showmask" ref="wrapper_mask">
<div class="mask1" v-if="showmaskcontent == 'mask1'">
<div class="mask_content_border" ref="maskborder">
<div class="mask_content" ref="maskcontent"></div>
<div class="arrow1">
<img src="./images/reportproject/arrow_1.png">
</div>
</div>
</div>
<div class="mask2" v-if="showmaskcontent == 'mask2'">
<div class="mask_content_border" v-for="(item,index) in showmask2elems" :ref="'mask2border'+index">
<div class="mask_content" :ref="'mask2content'+index"></div>
</div>
</div>
<div class="mask_button" @click="nextmask()">
<img v-if="showmaskcontent != 'mask2'" src="./images/reportproject/next_page_1.png">
<img v-if="showmaskcontent == 'mask2'" src="./images/reportproject/close_btn.png">
</div>
</div>
<el-table :data="data" border ref="table" :height="tableheight" ref="table" style="width: 100%">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="日期" width="120">
<template scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
<el-table-column label="操作列" show-overflow-tooltip>
<template scope="scope">
<el-button size="small" @click="handleedit(scope.$index, scope.row)"><i class=" el-icon-edit">编辑</i></el-button>
<el-button size="small" type="danger" @click="handledelete(scope.$index, scope.row)">
<i class="el-icon-delete2">删除</i>
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</body>
<script type="text/javascript">
new vue({
el: '#app',
data: {
data: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
tableheight: 300,
showmask: false,
showmaskcontent:'',
showmask2elems:[]
},
methods: {
start:function(){
this.showmask = true;
//如果当前页面数据比较多，出现了滚动条的话，需要禁用滚动条
$(document.body).addclass("html-body-overflow");
this.showmaskcontent = 'mask1';
this.getshowelemstyle();
},
//获取要显示的元素
getshowelemstyle:function(){
if(this.showmaskcontent == 'mask1'){
var uploadreport = this.$refs.uploadreport;
//对dom操作，需要在dom挂载和渲染完成之后再进行，这是需要将所进行的操作放在$nexttick()中
this.$nexttick(function(){
this.setmaskcontentstyle(this.$refs.maskcontent,this.$refs.maskborder,uploadreport);
});
}
if(this.showmaskcontent == 'mask2'){
var table = this.$refs.table;
var el_table__body = table.$el.queryselector('.el-table__body tr');
var alltd = el_table__body.queryselectorall('td');
//需要显示的三个元素
var td1 = alltd[1];
var td2 = alltd[3];
var td3 = alltd[4].queryselectorall('button');
this.showmask2elems.push(td1,td2,td3[0]);
this.$nexttick(function(){
for(var i=0;i<this.showmask2elems.length;i++){
var param1 = this.$refs['mask2content'+i][0];
var param2 = this.$refs['mask2border'+i][0];
this.setmaskcontentstyle(param1,param2,this.showmask2elems[i]);
}
});
}
},
//元素定位
setmaskcontentstyle:function(maskcontent,maskborder,targetele){
//getboundingclientrect用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
var contentrect = targetele.getboundingclientrect();
var styles = [
{ property: 'width', distance: 'distance'},
{ property: 'height', distance: 'distance' },
{ property: 'left' },
{ property: 'top' }
];
var paddingwidth = 12;
for(var i=0;i<styles.length;i++){
var finaldistance = 0;
if(styles[i].distance){
finaldistance = contentrect[styles[i].property];
}else{
finaldistance = contentrect[styles[i].property] - paddingwidth/2-2;
}
maskborder.style[styles[i].property] = finaldistance + 'px';
var borderradius = parseint(this.getstyle(targetele, 'borderradius')) ? this.getstyle(targetele, 'borderradius') : '4px';
maskborder.style.borderradius = borderradius;
maskcontent.style.borderradius = borderradius;
}
},
getstyle:function(el,attr){
return el.currentstyle ? el.currentstyle[attr] : getcomputedstyle(el,false)[attr];
},
//显示下一个mask
nextmask:function(){
if(this.showmaskcontent == 'mask1'){
this.showmaskcontent = 'mask2'
}else if(this.showmaskcontent == 'mask2'){
this.showmask = false;
this.showmaskcontent = 'mask1';
//恢复滚动条
$(document.body).removeclass("html-body-overflow");
}
this.getshowelemstyle();
}
}
});
</script>
</html>
实现效果如图二、图三所示。
下一篇： WPF ListBox的进阶使用（一）