|
|
|
@ -1,27 +1,26 @@ |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<el-popover ref="popover" :value="showPopover" trigger="manual" width="300"> |
|
|
|
<el-popover ref="popover" :value="showPopover" trigger="manual"> |
|
|
|
<div v-html="step.content" style="padding: 10px"/> |
|
|
|
<div class="guide-popover-container"> |
|
|
|
|
|
|
|
<div v-html="step.content"/> |
|
|
|
|
|
|
|
|
|
|
|
<div class="guide-popover-action"> |
|
|
|
<div class="guide-popover-action"> |
|
|
|
<div class="action-close"> |
|
|
|
<div class="action-close"> |
|
|
|
<el-button v-if="hasDone" size="small" @click="exit"> |
|
|
|
<el-button size="mini" type="dashed" plain @click="exit"> |
|
|
|
{{ step.doneBtnText }} |
|
|
|
{{ hasDone ? step.doneBtnText : step.closeBtnText }} |
|
|
|
</el-button> |
|
|
|
|
|
|
|
<el-button v-else size="small" @click="exit"> |
|
|
|
|
|
|
|
{{ step.closeBtnText }} |
|
|
|
|
|
|
|
</el-button> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="action-step"> |
|
|
|
<div class="action-step"> |
|
|
|
<el-button v-if="showPrevBtn" class="prev-btn" size="small" @click="previous"> |
|
|
|
<el-button v-if="showPrevBtn" class="prev-btn" size="mini" plain @click="previous"> |
|
|
|
{{ step.prevBtnText }} |
|
|
|
{{ step.prevBtnText }} |
|
|
|
</el-button> |
|
|
|
</el-button> |
|
|
|
<el-button v-if="showNextBtn" class="next-btn" size="small" @click="next"> |
|
|
|
<el-button v-if="showNextBtn" class="next-btn" size="mini" plain @click="next"> |
|
|
|
{{ step.nextBtnText }} |
|
|
|
{{ step.nextBtnText }} |
|
|
|
</el-button> |
|
|
|
</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div slot="reference" v-show="showStage" id="guide-stage" :style="stageStyle"/> |
|
|
|
<div slot="reference" v-show="showStage" id="guide-stage" :style="stageStyle"/> |
|
|
|
</el-popover> |
|
|
|
</el-popover> |
|
|
|
@ -35,10 +34,9 @@ |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
/** |
|
|
|
/** |
|
|
|
* 由driver.js改造而来 |
|
|
|
* 由driver.js改造而来 |
|
|
|
* vue里交互型的导航不太行，太多东西做不到，换成引导手册吧 |
|
|
|
|
|
|
|
*/ |
|
|
|
*/ |
|
|
|
import {debounce, isEmpty, deepClone} from "@/util" |
|
|
|
import {debounce, isEmpty, deepClone} from "@/util" |
|
|
|
import {addHighlightClasses, getCalculatedPosition, inMainPage, jump, removeHighlightClasses} from "./utils" |
|
|
|
import {addHighlightClasses, getCalculatedPosition, removeHighlightClasses} from "./utils" |
|
|
|
|
|
|
|
|
|
|
|
export default { |
|
|
|
export default { |
|
|
|
name: "Guide", |
|
|
|
name: "Guide", |
|
|
|
@ -73,9 +71,7 @@ export default { |
|
|
|
return this.currentStep === this.steps.length - 1 |
|
|
|
return this.currentStep === this.steps.length - 1 |
|
|
|
}, |
|
|
|
}, |
|
|
|
step() { |
|
|
|
step() { |
|
|
|
if (!this.isActive |
|
|
|
if (!this.isActive || this.steps.length <= 0 || !this.steps[this.currentStep]) { |
|
|
|
|| this.steps.length <= 0 |
|
|
|
|
|
|
|
|| !this.steps[this.currentStep]) { |
|
|
|
|
|
|
|
return {} |
|
|
|
return {} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -89,7 +85,7 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
watch: { |
|
|
|
watch: { |
|
|
|
isActive(v) { |
|
|
|
isActive(v) { |
|
|
|
v ? document.body.classList.add('overflow-hidden') : document.body.classList.remove('overflow-hidden') |
|
|
|
document.body.classList[v ? 'add' : 'remove']('overflow-hidden') |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
@ -115,11 +111,10 @@ export default { |
|
|
|
this.showOverlay = true |
|
|
|
this.showOverlay = true |
|
|
|
this.showStage = true |
|
|
|
this.showStage = true |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
exit(force) { |
|
|
|
exit() { |
|
|
|
|
|
|
|
if (!this.isActive) return |
|
|
|
if (!this.isActive) return |
|
|
|
|
|
|
|
|
|
|
|
if (this.beforeExit) { |
|
|
|
if (!force && this.beforeExit) { |
|
|
|
const result = this.beforeExit(this.hasDone) |
|
|
|
const result = this.beforeExit(this.hasDone) |
|
|
|
if (result && result.then) { |
|
|
|
if (result && result.then) { |
|
|
|
result.then(this.$_clear) |
|
|
|
result.then(this.$_clear) |
|
|
|
@ -138,13 +133,12 @@ export default { |
|
|
|
if (this.step.onPrevious) { |
|
|
|
if (this.step.onPrevious) { |
|
|
|
const result = this.step.onPrevious() |
|
|
|
const result = this.step.onPrevious() |
|
|
|
if (result && result.then) { |
|
|
|
if (result && result.then) { |
|
|
|
result.then(this.$_movePrevious) |
|
|
|
result.then(this.$_movePrevious, this.$_moveEnd) |
|
|
|
} |
|
|
|
} |
|
|
|
else result !== false && this.$_movePrevious() |
|
|
|
else result ? this.$_movePrevious() : this.$_moveEnd() |
|
|
|
} |
|
|
|
} |
|
|
|
else this.$_movePrevious() |
|
|
|
else this.$_movePrevious() |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
next() { |
|
|
|
next() { |
|
|
|
if (!this.isActive || this.moving) return |
|
|
|
if (!this.isActive || this.moving) return |
|
|
|
this.moving = true |
|
|
|
this.moving = true |
|
|
|
@ -152,9 +146,9 @@ export default { |
|
|
|
if (this.step.onNext) { |
|
|
|
if (this.step.onNext) { |
|
|
|
const result = this.step.onNext() |
|
|
|
const result = this.step.onNext() |
|
|
|
if (result && result.then) { |
|
|
|
if (result && result.then) { |
|
|
|
result.then(this.$_moveNext) |
|
|
|
result.then(this.$_moveNext, this.$_moveEnd) |
|
|
|
} |
|
|
|
} |
|
|
|
else result !== false && this.$_moveNext() |
|
|
|
else result ? this.$_moveNext() : this.$_moveEnd() |
|
|
|
} |
|
|
|
} |
|
|
|
else this.$_moveNext() |
|
|
|
else this.$_moveNext() |
|
|
|
}, |
|
|
|
}, |
|
|
|
@ -170,13 +164,15 @@ export default { |
|
|
|
this.currentStep-- |
|
|
|
this.currentStep-- |
|
|
|
this.$_highlight() |
|
|
|
this.$_highlight() |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
$_moveNext() { |
|
|
|
$_moveNext() { |
|
|
|
if (!this.isActive) return |
|
|
|
if (!this.isActive) return |
|
|
|
this.currentStep++ |
|
|
|
this.currentStep++ |
|
|
|
this.$_highlight() |
|
|
|
this.$_highlight() |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
$_moveEnd() { |
|
|
|
|
|
|
|
this.$refs.popover.updatePopper() |
|
|
|
|
|
|
|
this.moving = false |
|
|
|
|
|
|
|
}, |
|
|
|
$_clear() { |
|
|
|
$_clear() { |
|
|
|
if (!this.isActive) return |
|
|
|
if (!this.isActive) return |
|
|
|
this.isActive = false |
|
|
|
this.isActive = false |
|
|
|
@ -185,11 +181,10 @@ export default { |
|
|
|
this.currentStep = 0 |
|
|
|
this.currentStep = 0 |
|
|
|
this.steps = [] |
|
|
|
this.steps = [] |
|
|
|
this.beforeExit = null |
|
|
|
this.beforeExit = null |
|
|
|
if (this.highlightedElement) removeHighlightClasses(this.highlightedElement) |
|
|
|
this.highlightedElement && removeHighlightClasses(this.highlightedElement) |
|
|
|
this.highlightedElement = null |
|
|
|
this.highlightedElement = null |
|
|
|
this.lastHighlightedElement = null |
|
|
|
this.lastHighlightedElement = null |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
$_highlight() { |
|
|
|
$_highlight() { |
|
|
|
if (isEmpty(this.step.element)) throw new Error(`step${this.currentStep}中element为空`) |
|
|
|
if (isEmpty(this.step.element)) throw new Error(`step${this.currentStep}中element为空`) |
|
|
|
|
|
|
|
|
|
|
|
@ -199,23 +194,22 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
if (el === this.highlightedElement) return |
|
|
|
if (el === this.highlightedElement) return |
|
|
|
|
|
|
|
|
|
|
|
if (this.highlightedElement) removeHighlightClasses(this.highlightedElement) |
|
|
|
this.highlightedElement && removeHighlightClasses(this.highlightedElement) |
|
|
|
|
|
|
|
|
|
|
|
this.lastHighlightedElement = this.highlightedElement |
|
|
|
this.lastHighlightedElement = this.highlightedElement |
|
|
|
this.highlightedElement = el |
|
|
|
this.highlightedElement = el |
|
|
|
|
|
|
|
|
|
|
|
if (inMainPage(el)) jump(el) |
|
|
|
el.scrollIntoView({block: 'center'}) |
|
|
|
|
|
|
|
|
|
|
|
this.$_setStageStyle(getCalculatedPosition(el)) |
|
|
|
this.$_setStageStyle(getCalculatedPosition(el)) |
|
|
|
|
|
|
|
|
|
|
|
window.setTimeout(() => { |
|
|
|
window.setTimeout(() => { |
|
|
|
this.$refs.popover.updatePopper() |
|
|
|
this.$_moveEnd() |
|
|
|
this.moving = false |
|
|
|
this.step.onHighlighted && this.step.onHighlighted() |
|
|
|
}, 300) |
|
|
|
}, 300) |
|
|
|
|
|
|
|
|
|
|
|
addHighlightClasses(el) |
|
|
|
addHighlightClasses(el) |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
$_setStageStyle({top, left, right, bottom}) { |
|
|
|
$_setStageStyle({top, left, right, bottom}) { |
|
|
|
const width = right - left |
|
|
|
const width = right - left |
|
|
|
const height = bottom - top |
|
|
|
const height = bottom - top |
|
|
|
@ -224,7 +218,7 @@ export default { |
|
|
|
`height:${height}px;` + |
|
|
|
`height:${height}px;` + |
|
|
|
`top:${top}px;` + |
|
|
|
`top:${top}px;` + |
|
|
|
`left:${left}px;` + |
|
|
|
`left:${left}px;` + |
|
|
|
`backgroundColor:${this.step.stageBackground}` |
|
|
|
`background-color:${this.step.stageBackground}` |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
toesbieya
6 years ago