2018-05-28 06:36:06 +00:00
|
|
|
<template>
|
|
|
|
<div class="app-container">
|
|
|
|
<p class="warn-content">
|
2018-08-19 08:55:24 +00:00
|
|
|
{{ $t('guide.description') }}
|
2018-05-28 06:36:06 +00:00
|
|
|
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.
|
|
|
|
</a>
|
|
|
|
</p>
|
2018-08-19 08:55:24 +00:00
|
|
|
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">{{ $t('guide.button') }}</el-button>
|
2018-05-28 06:36:06 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import * as Driver from 'driver.js' // import driver.js
|
|
|
|
import 'driver.js/dist/driver.min.css' // import driver.js css
|
|
|
|
import steps from './defineSteps'
|
|
|
|
|
|
|
|
export default {
|
2018-08-19 08:55:24 +00:00
|
|
|
name: 'Guide',
|
2018-05-28 06:36:06 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
driver: null
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.driver = new Driver()
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
guide() {
|
|
|
|
this.driver.defineSteps(steps)
|
|
|
|
this.driver.start()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|