欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

实现用户操作指引功能

程序员文章站 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>

实现效果如图二、图三所示。