vue-begin-gride v1.0.9

Demo || Document

预览

开始

新手指引常用于网站首页以及 APP 欢迎页面，之前的引导页面太死了，有些还是设计师切图的 png 图片，发现切图太死板太浪费性能了，每次一个调整都要重新切图，完全做不到自定义，而且要考虑屏幕宽高，窗体出现滚动条根本又得动态定位，而且一个这个东西要占我好几百 k 的资源，所以就花了点时间研究了下具体的实现方式，用 svg 实现了相应的功能，还做了滑屏处理，防止引导元素超出可视化范围内看不到提示语。

安装

npm i vue-begin-gride -s

使用

注册插件

import beginGride from "vue-begin-gride"
Vue.use(beginGride)

使用

  this.$guide({
    list: [
      {
        el: this.$refs.login,
        width: "500px",
        lineStyle: "stroke:red",
        padding: 6,
        text:
          "第一步，输入您的在网站已经注册过的用户名信息，用户名长度应该在6-20位之前",
      }
    ]
  })

在 vue 中一定要等待 dom 渲染完成再给 list 数组的每一个 el 对象赋值，否则无法找到 dom，所以在请在 mounted 函数中获取到每个 ref 的 dom 节点或者通过其他 api 找到的节点对象

::: details 点击查看组件代码

<template>
  <div style="">
    <div style="margin-left: 100px;">
      <input type="text" ref="text" placeholder="请输入用户名" />
      <input type="text" ref="password" placeholder="请输入密码" />
      <div ref="login" style="width: 300px; height: 100px; background: green;">
        登录
      </div>
      <div ref="end" style="width: 300px; height: 100px; background: red;">
        end
      </div>
    </div>
  </div>
</template>

<script>
import VueBeginGride from "vue-begin-gride"
import Vue from 'vue'
Vue.use(VueBeginGride)
export default {
  components: {
    PointTool,
  },
  data() {
    return {
      lists: [],
    }
  },
  mounted() {
    this.lists = [
      {
        el: this.$refs.text,
        width: "500px",
        style: "border:3px red solid",
        padding: 5,
        text:
          "第一步，输入您的在网站已经注册过的用户名信息，用户名长度应该在6-20位之前",
      },
      {
        el: this.$refs.password,
        padding: 4,
        width: "300px",
        text: () => (
          <span style="color:white;width:500px">
            "第er步：请输入注册时该用户名下对应的密码，密码限制在6-20位字符串或者数字！！！"
          </span>
        ),
      },
      {
        el: this.$refs.login,
        text: () => (
          <span style="color:white">
            "点击登录：输入您以及注册过的用户名和密码，即可登录该系统！！",
          </span>
        ),
      },
      {
        el: this.$refs.end,
        padding: 20,
        text: () => (
          <span style="color:white">
            "第四步就会出现一个下次不再提示改选择，将状态存入session，勾选后第二次刷新页面将不再展示！",
          </span>
        ),
      },
    ]
    this.$guide({
      lists: this.lists,
      opacity: 0.2
    })
  },
}
</script>

:::

API 说明

vue serve test/边界固定.vue
vue serve test/normal.vue

publish

vue build --target lib --name main './src/index.js'
npm publish