main demo

6 | 7 | ## 开始 8 | 9 | 新手指引常用于网站首页以及 APP 欢迎页面，之前的引导页面太死了，有些还是设计师切图的 png 图片，发现切图太死板太浪费性能了，每次一个调整都要重新切图，完全做不到自定义，而且要考虑屏幕宽高，窗体出现滚动条根本又得动态定位，而且一个这个东西要占我好几百 k 的资源，所以就花了点时间研究了下具体的实现方式，用 svg 实现了相应的功能，还做了滑屏处理，防止引导元素超出可视化范围内看不到提示语。 10 | 11 | ### 安装 12 | 13 | ```bash 14 | npm i vue-begin-gride -s 15 | ``` 16 | 17 | ### 使用 18 | ##### 注册插件 19 | ```js 20 | import beginGride from "vue-begin-gride" 21 | Vue.use(beginGride) 22 | ``` 23 | ##### 使用 24 | ``` js 25 | this.$guide({ 26 | list: [ 27 | { 28 | el: this.$refs.login, 29 | width: "500px", 30 | lineStyle: "stroke:red", 31 | padding: 6, 32 | text: 33 | "第一步，输入您的在网站已经注册过的用户名信息，用户名长度应该在6-20位之前", 34 | } 35 | ] 36 | }) 37 | ``` 38 | 39 | 在 vue 中一定要等待 dom 渲染完成再给 list 数组的每一个 el 对象赋值，否则无法找到 dom，所以在请在 mounted 函数中获取到每个 ref 的 dom 节点或者通过其他 api 找到的节点对象 40 | 41 | ::: details 点击查看组件代码 42 | 43 | ```vue 44 | 58 | 59 | 117 | ``` 118 | ::: 119 | 120 | ## API 说明 121 | 122 | | 参数 | 类型 | 默认值 | 是否必填 | 说明 | 123 | | ---------------- | :----------------: | ----------------------- | -------- | ----- | 124 | | opacity | Float | 0.3 | false | 背景透明度,请输入 0-1 之间的小数 125 | | neverOpenHandler | func | (isChecked) => ({}) | false | 点击是否下次弹出回调，参数单选框是否选中 | 126 | | [list] | Array | null | true | 每个遮罩层的信息 | 127 | | [list].el | Node | | true | 节点的 DOM 对象，请在 mounted 的函数中赋值调用 | 128 | | [list].width | string | 默认跟随 el 宽度 | false | 当给定一个固定宽度时请使用 string 类型的 px 宽度 | 129 | | [list].style | style-string | color:white;border-radius: 20px;;border:dashed 2px white; | false | 提示区域自定义样式，默认 2 像素虚线白色边框，可覆盖 | 130 | | [list].text | Function or String | | true | 提示区域内容，可传入字符串或者 jsx 渲染函数 | 131 | | [list].lineStyle | string | "stroke-dasharray: 5px 5px;stroke-width:2px" | false | 链接线条的 svg 样式，详情请阅读 svg 文档 | 132 | | [list].padding | Number | 10 | false | 遮罩层相对 DOM 节点的 padding 值 | 133 | 134 | 135 | 136 | ```bash 137 | vue serve test/边界固定.vue 138 | vue serve test/normal.vue 139 | ``` 140 | 141 | ## publish 142 | 143 | ```bash 144 | vue build --target lib --name main './src/index.js' 145 | npm publish 146 | ``` 147 | -------------------------------------------------------------------------------- /src/BeginGride.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 77 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import beginGride from "./BeginGride.vue" 2 | export default { 3 | install (_V){ 4 | _V.prototype.$guide = function ({lists = [], opacity= 0.7, neverOpenHandler = () => {}}) { 5 | const isfingerPoint = window.localStorage.getItem("isfingerPoint") 6 | if(isfingerPoint && (isfingerPoint === 'true')) return 7 | const parent = document.createElement('div') 8 | const el = document.createElement('div') 9 | parent.appendChild(el) 10 | document.body.appendChild(parent) 11 | const vm = new _V({ 12 | el, 13 | render() { 14 | return 15 | } 16 | }) 17 | function destroy () { 18 | vm.$destroy(); 19 | parent.innerHTML = '' 20 | document.body.removeChild(parent) 21 | } 22 | return { 23 | vm, 24 | destroy 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/points.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | 51 | -------------------------------------------------------------------------------- /src/rect.js: -------------------------------------------------------------------------------- 1 | const defaultWrapStyle = 2 | "color:white;border-radius: 20px;border:dashed 2px white;display: inline-block;padding:10px" 3 | const lineStyle = "stroke-dasharray: 5px 5px;stroke-width:2px" 4 | export default { 5 | props: ["item", "len", "curIdx", "idx", "incrment", "opacity"], 6 | data() { 7 | return { 8 | position: { 9 | left: 200, 10 | top: 200, 11 | height: 200, 12 | width: 200, 13 | }, 14 | scrollTop: 0, 15 | scrollLeft: 0, 16 | wrapHeight: 0, 17 | offsetPoint: { 18 | x: 0, 19 | y: 0, 20 | }, 21 | } 22 | }, 23 | mounted() { 24 | const { left, top, width, height } = this.item.el.getClientRects()[0] 25 | this.position = { 26 | left, 27 | top, 28 | width, 29 | height, 30 | } 31 | window.addEventListener("scroll", this.autoScroll) 32 | }, 33 | destroyed() { 34 | window.removeEventListener("scroll", this.autoScroll) 35 | }, 36 | methods: { 37 | autoScroll(e) { 38 | window.requestAnimationFrame(() => { 39 | this.scrollTop = e.target.scrollingElement.scrollTop 40 | this.scrollLeft = e.target.scrollingElement.scrollLeft 41 | }) 42 | }, 43 | neverAlert(e) { 44 | e.stopPropagation() 45 | }, 46 | handleChange(e) { 47 | this.$emit('neverOpenHandler', e.target.checked) 48 | if (e.target.checked) { 49 | window.localStorage.setItem("isfingerPoint", "true") 50 | }else{ 51 | window.localStorage.setItem("isfingerPoint", "false") 52 | } 53 | }, 54 | }, 55 | render() { 56 | let { height, left, top } = this.position 57 | top -= this.scrollTop 58 | left -= this.scrollLeft 59 | const { x, y } = this.offsetPoint 60 | return ( 61 | this.curIdx === this.idx && ( 62 | 63 | 67 | 77 | 85 |

89 | {typeof this.item.text === "function" 90 | ? this.item.text() 91 | : this.item.text} 92 |
93 | {this.len - 1 === this.curIdx && ( 94 | 98 | 105 | 下次不再提示 106 | 107 | )} 108 |

109 | this.incrment(this.curIdx + 1)} 111 | style="float:right;margin:10px;border:solid 1px white;padding:8px;border-radius:5px;cursor:pointer" 112 | > 113 | {this.len - 1 === this.curIdx ? "完成" : "下一步"} 114 | 115 | 116 | 117 | ) 118 | ) 119 | }, 120 | computed: { 121 | wrapPosition() { 122 | let { top, left } = this.position 123 | this.$nextTick().then(() => { 124 | const el = this.$refs["innerContent"] 125 | el && (this.wrapHeight = el.offsetHeight) 126 | }) 127 | left -= this.scrollLeft 128 | top -= this.scrollTop 129 | let foreignPosition = { 130 | left: left, 131 | top: top + this.position.height + 60, 132 | width: this.item.width 133 | ? Number(this.item.width.replace("px", "")) 134 | : Number(this.position.width), 135 | height: this.wrapHeight + 60, 136 | } 137 | foreignPosition["bottom"] = foreignPosition.top + foreignPosition.height 138 | foreignPosition["right"] = foreignPosition.left + foreignPosition.width 139 | if ( 140 | foreignPosition["bottom"] > window.innerHeight && 141 | this.scrollTop < this.position.top 142 | ) { 143 | this.offsetPoint.x = -(foreignPosition["bottom"] - window.innerHeight) 144 | } 145 | if (foreignPosition["right"] > window.innerWidth) { 146 | this.offsetPoint.y = -(foreignPosition["right"] - window.innerWidth) 147 | } 148 | if (this.scrollLeft > this.position.left) { 149 | this.offsetPoint.y = this.scrollLeft - this.position.left 150 | } 151 | if ( 152 | this.scrollTop > this.position.top + this.position.height && 153 | foreignPosition["bottom"] < window.innerHeight 154 | ) { 155 | this.offsetPoint.x = 156 | this.scrollTop - this.position.top - this.position.height 157 | } 158 | 159 | return foreignPosition 160 | }, 161 | path() { 162 | let { width, height, left, top } = this.position 163 | top -= this.scrollTop 164 | left -= this.scrollLeft 165 | const wwidth = window.innerWidth, 166 | wheight = window.innerHeight, 167 | padding = this.item.padding || 10 168 | return ` 169 | M${left - padding} ${top + height + padding}, 170 | 0 ${wheight}, 171 | ${wwidth} ${wheight}, 172 | ${wwidth} 0, 173 | 0 0, 174 | 0 ${wheight}, 175 | ${left - padding} ${top + height + padding}, 176 | ${left - padding} ${top - padding}, 177 | ${left + width + padding} ${top - padding}, 178 | ${left + width + padding} ${top + height + padding} 179 | Z` 180 | }, 181 | }, 182 | } 183 | -------------------------------------------------------------------------------- /test/normal.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 75 | -------------------------------------------------------------------------------- /test/边界固定.vue: -------------------------------------------------------------------------------- 1 | 23 | 24 | 78 | --------------------------------------------------------------------------------