• 纯前端实现用户在线制作操作引导(图片区域画框并且可引导)intro.js

     前言

    最近接了一个需求,要求:由于页面太多,实施自己在图片上进行画框然后实现操作引导.这个需求分为两步:

    1.用户需要在页面上先上传指定大小图片

    2.用户在图片内绘制区域,并输入操作引导的引导语

    3.绘制好后保存到数据库中

    4.在项目中按需进行查询指定的引导即可

    引入相关依赖配置

    1.intor.js

    大家可以看我之前的文章是如何下载依赖引入的传送门→前端使用intro.js实现页面操作引导

    话不多说开始操作↓

    详细步骤

    这里我是用html文件写的，大家换成vue直接按需粘过去就行

    需要更改的地方:

    1.上传图片的地址连接,换成自己公司的地址

    2.样式可以自行更改~

    详细步骤备注我就写在代码注释里面啦

    1. html>
    2. <html lang="zh_CN">
    3. <head th:include="include :: header">
    4.     <title>引导设置title>
    5.     
    6.     <link rel="stylesheet" th:href="@{/css/introjs.css}">
    7. head>
    8. <style>
    9.     #big_Img {
    10.         position: relative;
    11.         /*使大图随着小图移动的定位*/
    12.         z-index: 2;
    13.     }
    14.  
    15.     #big_Img .requ {
    16.         border: 2px rgba(255, 27, 27, 0.76) dashed;
    17.         position: absolute;
    18.         cursor: move;
    19.         resize: both;
    20.         /*使绘制的div可以拖动改变大小的样式 */
    21.         overflow: auto;
    22.         z-index: 999;
    23.     }
    24.  
    25.     .drag {
    26.         border: 1px #5da8ff solid;
    27.         width: 50px;
    28.         height: 24px;
    29.         background: #fff;
    30.         cursor: pointer;
    31.         margin: auto;
    32.         margin-top: 8px;
    33.     }
    34.  
    35.     .drag:active {
    36.         box-shadow: 3px 3px 10px 0 #111111;
    37.         width: 51px;
    38.         height: 25px;
    39.     }
    40.  
    41.     #big_Img {
    42.         border: 1px solid #ccc;
    43.         width: 900px;
    44.         height: 450px;
    45.     }
    46.  
    47.     #img {
    48.         pointer-events: none;
    49.         user-select: none;
    50.         -webkit-user-drag: none;
    51.         width: 900px;
    52.         height: 450px;
    53.         margin: auto;
    54.         position: relative;
    55.     }
    56.  
    57.     .guanbi {
    58.         position: absolute;
    59.         left: 0px;
    60.         bottom: 0px;
    61.         height: 21px;
    62.         width: 20px;
    63.         border-radius: 50%;
    64.         background-color: #0f0f0f;
    65.         color: #fff;
    66.         text-align: center;
    67.         line-height: 20px;
    68.         cursor: pointer;
    69.     }
    70.     .el-form-item{
    71.         width: 380px !important;
    72.     }
    73.     .el-form-item__content {
    74.         width: 200px !important;
    75.     }
    76.     .el-form-item__label{
    77.         width: 140px !important;
    78.     }
    79. style>
    80. <body>
    81. <div id="main" style="display: flex;padding: 20px;" v-cloak>
    82.     <div style="width: 70%;">
    83.         <el-form label-width="160px" inline>
    84.             <el-form-item label="选择菜单">
    85.                 <el-select v-model="menu" clearable placeholder="请选择菜单">
    86.                     <el-option v-for="item in pageData" :key="item.value" :label="item.label" :value="item.value">
    87.                     el-option>
    88.                 el-select>
    89.             el-form-item>
    90.             <el-form-item label="选择对应功能">
    91.                 <el-select v-model="Feature" clearable placeholder="请选择对应功能">
    92.                     <el-option v-for="item in featureData" :key="item.value" :label="item.label"
    93.                                :value="item.value">
    94.                     el-option>
    95.                 el-select>
    96.             el-form-item>
    97.             <el-button type="primary" @click="dialogVisible = true">添加功能el-button>
    98.             <el-button type="primary" @click="removeMenu">删除功能el-button>
    99.             <br>
    100.             <el-form-item label="引导语">
    101.                 <el-input v-model="yindaoyu" style="width: 200px;" clearable>el-input>
    102.             el-form-item>
    103.             <el-form-item label="请拖拽右侧至图片区域">
    104.                 <div draggable="true" id="source" class="drag">div>
    105.             el-form-item>
    106.             <el-button @click="caozuo()">预览效果el-button>
    107.             <el-button type="primary" @click="save">保存el-button>
    108.         el-form>
    109.         <h3 style="color: #000;font-size: 20px">图片区域h3>
    110.         <div id="big_Img" class="v2" draggable="true">
    111.             <div id="img">div>
    112.         div>
    113.     div>
    114.     <div style="height: 148px">
    115.         <el-upload
    116.                 v-model="dialogImageUrl"
    117.                 action="/wyservice/workquery/uploadImg"
    118.                 list-type="picture-card"
    119.                 :on-preview="handlePictureCardPreview"
    120.                 :limit="1"
    121.                 :on-exceed="handleExceed"
    122.                 :on-success="((response, file, fileList)=>handleSuccess(response, file, fileList,'imgs'))"
    123.                 :on-remove="handleRemove">
    124.             <div style="text-align: center"><img style="margin-bottom: 20px"  src="/img/lushang/upload_pictures.png"/>
    125.                 <p style="margin-top: -110px;">点击上传图片p>div>
    126.         el-upload>
    127.         <el-dialog :visible.sync="dialogVisible1">
    128.             <img width="100%" :src="dialogImageUrl" alt="">
    129.         el-dialog>
    130.     div>
    131.  
    132.     
    133.     <el-dialog title="添加功能按钮" :visible.sync="dialogVisible" width="30%">
    134.         <el-form :model="formInline" class="demo-form-inline" label-width="160px">
    135.             <el-form-item label="选择菜单">
    136.                 <el-select v-model="formInline.formPage" clearable placeholder="请选择菜单">
    137.                     <el-option v-for="item in pageData" :key="item.value" :label="item.label" :value="item.value">
    138.                     el-option>
    139.                 el-select>
    140.             el-form-item>
    141.             <el-form-item label="输入功能标题">
    142.                 <el-input v-model="formInline.featureTitle" clearable>el-input>
    143.             el-form-item>
    144.             <el-form-item label="输入功能描述">
    145.                 <el-input v-model="formInline.featureContent" clearable>el-input>
    146.             el-form-item>
    147.             <el-form-item>
    148.                 <el-button type="primary" @click="btnAdd">确定el-button>
    149.             el-form-item>
    150.         el-form>
    151.     el-dialog>
    152. div>
    153.  
    154. <div th:include="include :: footer">div>
    155. <div th:include="include::load">div>
    157. <script th:src="@{/js/intro/intro.js}">script>
    158. <script th:src="@{/js/intro/introComponent.js}">script>
    159. <script th:src="@{/js/appjs/operationGuidance/operationGuidance.js}">script>
    160. body>
    161. html>
    1. let vm = new Vue({
    2.     el: '#main',
    3.     data: {
    4.         dialogImageUrl: 'https://t7.baidu.com/it/u=4198287529,2774471735&fm=193&f=GIF',
    5.         dialogVisible1: false,
    6.         dialogVisible: false,
    7.         yindaoyu: '',
    8.         formInline: {
    9.             formPage: '',
    10.             featureTitle: '',
    11.             featureContent: '',
    12.         },
    13.         menu: '',
    14.         Feature: '',
    15.         pageData: [],
    16.         featureData: [],
    17.  
    18.  
    19.         tag_number: 0,
    20.         mobileDiv: false,
    21.         move_x: '',
    22.         move_y: '',
    23.         lt: '',
    24.         ls: '',
    25.     },
    26.     mounted() {
    27.         //拖拽元素绘制div
    28.         source.ondragend = ev => {
    29.             if (this.yindaoyu) {
    30.                 this.draw(ev)
    31.             } else {
    32.                 layer.msg("请先输入引导语")
    33.             }
    34.         }
    35.     },
    36.     methods: {
    37.         //确定添加
    38.         btnAdd() {
    39.             this.dialogVisible = false
    40.         },
    41.         //删除功能
    42.         removeMenu(){
    43.  
    44.         },
    45.         //点击保存
    46.         save() {
    47.             let htmlCode = document.getElementById('big_Img').outerHTML;
    48.             console.log(htmlCode);
    49.         },
    50.         draw(ev) {
    51.             var oBox = document.getElementById("big_Img");
    52.             ev = window.event || ev;
    53.             var move_x1, move_y1, move_x2, move_y2, move_x3, move_y3, move_x4, move_y4;
    54.             var isMove = false;
    55.             var angle_x;
    56.             var x1 = ev.clientX - 130 - oBox.offsetLeft; //起始坐标,130是左边导航的宽度
    57.             var y1 = ev.clientY - 30 - oBox.offsetTop;
    58.             var x2 = x1 + 100;
    59.             var y2 = y1;
    60.             var x4 = x1;
    61.             var y4 = y1 + 100;
    62.             var x3 = ev.clientX - 80 - oBox.offsetLeft + 50; //终点坐标
    63.             var y3 = ev.clientY + 20 - oBox.offsetTop + 50;
    64.             var degree = 0;
    65.             var oDiv = document.createElement("div");
    66.             // var otext = document.createElement("div1");
    67.             // oBox.appendChild(otext);
    68.             oBox.appendChild(oDiv);
    69.             // otext.style.left = x1 - 15 + "px"; //在绘制的大div左上角的位置
    70.             // otext.style.top = y1 - 15 + "px";
    71.             //15是要减去小div的大小，这样位置才会在div的外面
    72.             this.tag_number++;
    73.             // otext.id = this.tag_number;
    74.             // otext.innerText = this.tag_number;
    75.             //在绘制的div1中加上文本,这里是加上左上角的编号
    76.             oDiv.style.left = (x3 > x1 ? x1 : x3) + "px"; //绘制oDiv的样式
    77.             oDiv.style.top = (y3 > y1 ? y1 : y3) + "px";
    78.             oDiv.style.width = Math.abs(x3 - x1) + "px";
    79.             oDiv.style.height = Math.abs(y3 - y1) + "px";
    80.             oDiv.id = this.tag_number
    81.             oDiv.setAttribute("class", "requ");
    82.             oDiv.setAttribute("data-step", this.tag_number); //添加指引步骤从0开始,如果用户删除中间的,也不会影响
    83.             oDiv.setAttribute("data-intro", this.yindaoyu); //这里是用户输入的引导语
    84.             oDiv.innerHTML = "
      "guanbi" + ">x
      " //关闭按钮
    85.  
    86.             let guan = oDiv.children[0]
    87.             guan.onclick = ev => {  //鼠标点击
    88.                 oDiv.remove()
    89.             }
    90.  
    91.             oDiv.onmousedown = ev => {
    92.                 var down_x1 = ev.clientX; //获取鼠标按下的坐标
    93.                 var down_y1 = ev.clientY;
    94.                 //获取元素的left，top值
    95.                 var l = oDiv.offsetLeft;
    96.                 var t = oDiv.offsetTop;
    97.                 if (ev.offsetX < oDiv.clientWidth - 10 && ev.offsetY < oDiv.clientHeight - 10) {  //判断是点击的右下角改变大小还是移动div
    98.                     this.mobileDiv = true   //移动div
    99.                 } else {
    100.                     this.mobileDiv = false   //改变大小
    101.                 }
    102.                 document.onmousemove = ev => {   //鼠标移动事件
    103.                     var ev = ev || event;
    104.                     //获取鼠标移动时的坐标
    105.                     var down_x2 = ev.clientX;
    106.                     var down_y2 = ev.clientY;
    107.                     //计算出鼠标的移动距离
    108.                     this.move_x = down_x2 - down_x1;
    109.                     this.move_y = down_y2 - down_y1;
    110.                     //移动的数值与元素的left，top相加，得出元素的移动的距离
    111.                     this.lt = this.move_y + t;
    112.                     this.ls = this.move_x + l;
    113.                     if (this.mobileDiv == true) { //移动div
    114.                         //更改元素的left，top值
    115.                         oDiv.style.top = this.lt + 'px';
    116.                         oDiv.style.left = this.ls + 'px';
    117.                     } else {
    118.                         //改变div大小开始
    119.                         //获取鼠标移动时的坐标
    120.                         var down_x2 = ev.clientX;
    121.                         var down_y2 = ev.clientY;
    122.                     }
    123.                 }
    124.                 document.onmouseup = ev => {  //鼠标抬起
    125.                     document.onmousemove = null;
    126.                     if (this.mobileDiv == true) {
    127.                         // otext.style.top = this.lt - 15 + 'px'; //随着大div的移动而移动
    128.                         // otext.style.left = this.ls - 15 + 'px';
    129.                     } else {
    130.                         //改变大小的鼠标抬起
    131.                     }
    132.                 }
    133.             }
    134.         },
    135.         caozuo() {
    136.             introJs('.v2').setOptions({
    137.                 nextLabel: "下一步", // 下一个的按钮文字
    138.                 prevLabel: "上一步", // 上一个按钮文字
    139.                 //   skipLabel: "跳过", // 跳过指引的按钮文字
    140.                 doneLabel: "完成", // 完成按钮的文字
    141.                 hidePrev: false, // 是否在第一步中隐藏“上一步”按钮;不隐藏，将呈现为一个禁用的按钮
    142.                 hideNext: false, // 是否在最后一步中隐藏“下一步”按钮（同时会隐藏完成按钮);不隐藏，将呈现为一个禁用的按钮
    143.                 exitOnEsc: true, // 点击键盘的ESC按钮是否退出指引
    144.                 exitOnOverlayClick: false, // 点击遮罩层时是否退出介绍
    145.                 showStepNumbers: false, // 是否显示步骤编号
    146.                 disableInteraction: true, // 是否禁用高亮显示框内元素的交互
    147.                 showBullets: true, // 是否显示面板的指示点
    148.                 overlayOpacity: 0.7, // 遮罩层的透明度 0-1之间
    149.                 helperElementPadding: 10, // 选中的指引元素周围的填充距离
    150.                 showProgress: true, //进度条
    151.             }).start();
    152.         },
    153.  
    154.         handleRemove(file, fileList) {
    155.             let url = this.dialogImageUrl.split('http://geecity-image.oss-cn-qingdao.aliyuncs.com/')
    156.             $.ajax({
    157.                 type: "POST",
    158.                 url: "/workquery/gdlist/delimg",
    159.                 data: {filename: url[1]},
    160.                 error: function (request) {
    161.                     parent.layer.alert("Connection error");
    162.                 },
    163.                 success: (data) => {
    164.                     this.dialogImageUrl = ''
    165.                     $("#img").css({
    166.                         "background": "url("+this.dialogImageUrl+")" + ""+ "no-repeat",
    167.                     });
    168.                     layer.msg("删除成功")
    169.                 }
    170.             })
    171.         },
    172.         handlePictureCardPreview(file) {
    173.             this.dialogImageUrl = file.url;
    174.             this.dialogVisible1 = true;
    175.         },
    176.         handleSuccess(response, file, fileList, type) {
    177.             this.dialogImageUrl = response.data.src
    178.             $("#img").css({
    179.                 "background": "url("+this.dialogImageUrl+")" + ""+ "no-repeat",
    180.                 "background-size": "950px"
    181.             });
    182.         },
    183.         handleExceed() {
    184.             return layer.msg("最多上传1张图片")
    185.         }
    186.     },
    187. })

    结束

    这里面代码都很详细啦，大家看一遍就懂了，如果不懂可以评论哦，回复超快

  • 相关阅读:
    Golang 结构化日志包 log/slog 详解（六）：slog.Record
    OpenTiny Vue 3.11.0 发布：增加富文本、ColorPicker等4个新组件，迎来了贡献者大爆发！
    【附代码案例】深入理解 PyTorch 张量：叶子张量与非叶子张量
    SpringBoot整合web放回json数据的方法
    基于注意力机制的LSTM液体管道非稳态工况检测
    【云原生 | 从零开始学Kubernetes】十、k8sPod节点亲和性和反亲和性
    第一章、基于Ruoyi-Vue开发脚手架之对象存储实现
    异步FIFO设计
    使用VBS编写xshell/SecureCRT自动化脚本
    vue3的ref,reactive的使用和原理解析
  • 原文地址：https://blog.csdn.net/m0_75116475/article/details/132619646