guide-canvas v1.0.5

guide

介绍

web guide,网页指引、提示。页面无滚动条时使用最佳。

效果图

Vue中使用

1 下载依赖：

npm i guide-canvas -S

2 在vue文件中使用

  import guideCanvas from "guide-canvas";
  mounted() {
    let cc= document.getElementById('cc');
    let stepArr=[
      {
        el: cc,
        text: {
          fontSize: 16,
          color:'red',
          message: "内容内容aaaaaaaaaa",
          position: [400, 699],
          maxWidth: 200,
        },
        button: {
          message: "下一步",
        },
      },
      {
        el: cc,
        text: {
          fontSize: 16,
          color:'red',
          message: "内容内容aaaaaaaaaa",
          position: [400, 599],
          maxWidth: 200,
        },
        button: {
          message: "下一步",
        },
      },
      {
        el: cc,
        text: {
          fontSize: 16,
          color:'red',
          message: "内容内容aaaaaaaaaa",
          position: [400, 499],
          maxWidth: 200,
        },
        button: {
          message: "下一步",
        },
      },
      {
        el: cc,
        text: {
          fontSize: 16,
          color:'red',
          message: "内容内容aaaaaaaaaa",
          position: [400, 399],
          maxWidth: 200,
        },
        button: {
          message: "完成",
        },
      }
    ]
    guideCanvas(stepArr,()=>{
      console.log('指引结束后的回调')
    });
  }

html中使用

<script src="https://github.com/wdhcgp/guide-canvas/blob/main/dist/guideCanvas.min.js"></script>
<script>
    window.onload=()=>{
        let round1=document.getElementsByClassName('round1')[0]
        let rect=document.getElementsByClassName('rect')[0]
        let rect2=document.getElementsByClassName('rect2')[0]
        let stepsArr=[
      {
        el: round1,
        shape:'round',
        text: {
          fontSize: 16,
          message: "内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,",
          position: [810, 200],
          maxWidth: 200,
        }
      },
      {
        el: round1,
        text: {
          fontSize:25,
          lineHeight:30,
          color:'#fff',
          message: "内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,",
          position: [810, 200],
          maxWidth: 200,
        },
        button: {
          fontSize: 26,
          color:'black',
          message: "第一步",
          width: 200,
          height: 70,
        },
      },
      {
        el: rect,
        text: {
          fontSize: 16,
          color:'red',
          message: "内容内容提示",
          position: [1000, 799],
          maxWidth: 200,
        },
        button: {
          message: "完成",
          position:[1000, 900]
        },
      },
      {
        el: rect2,
        shape:'round',
        text: {
          fontSize: 16,
          color:'red',
          message: "内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,",
          position: [810, 200],
          maxWidth: 200,
        },
        button: {
          fontSize: 16,
          color:'red',
          message: "下一步",
          width: 100,
          height: 70,
        },
      },
      {
        el: rect2,
        text: {
          fontSize: 16,
          color:'red',
          message: "内容内容提示提示提示提示提示提示提示,内容内容提示提示提示提示提示提示提示,",
          position: [810, 200],
          maxWidth: 200,
        },
        button: {
          fontSize: 16,
          color:'red',
          message: "下一步",
          width: 100,
          height: 70,
        },
      },
    ]
    guideCanvas(stepsArr,()=>{
      console.log('指引结束后的回调')
    })
    }
</script>

API 说明