design-vue-ui

# d-tour 引导

# 何时使用


引导组件

# 代码演示


开始引导 第一个按钮 第二个按钮 第三个按钮
基本

配置steps
显示代码 
<template>
  <div class="tour-main">
    <d-tour
      v-model="current"
      :open="open"
      :steps="steps"
      @close="open = false"
    ></d-tour>
    <br />
    <a-space>
      <a-button type="primary" @click="open = !open">开始引导</a-button>
      <a-button type="default" ref="b1">第一个按钮</a-button>
      <a-button type="primary" ref="b2">第二个按钮</a-button>
      <a-button type="primary" ref="b3">第三个按钮</a-button>
    </a-space>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      open: false,
      // steps: [],
      steps: [
        {
          title: 'Upload File',
          description: 'Put your files here.',
          cover: '/logo.jpg',
          target: () => this.$refs?.b1.$el
        },
        {
          title: 'Save',
          description: 'Save your changes.',
          target: () => this.$refs?.b2.$el
        },
        {
          title: 'Other Actions',
          description: 'Click to see other actions.',
          target: () => this.$refs?.b3.$el
        }
      ]
    }
  },
  mounted() {
    console.log(this.$refs)
  },
  methods: {}
}
</script>
<style scoped lang="less"></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
显示代码

开始引导 第一个按钮 第二个按钮 第三个按钮
自定义

slot 操作
显示代码 
<template>
  <div class="tour-main">
    <d-tour
      v-model="current"
      :open="open"
      :steps="steps"
      @close="open = false"
    >
  <template slot-scope="{ current }">
    <div v-if="current.key === 1">
      <div>key === 1</div>
    </div>
    <div v-else-if="current.key === 2">
      <div>key === 2</div>
    </div>
    <div v-else-if="current.key === 3">
      <div>key === 3</div>
    </div>
  </template>
  </d-tour>
    <br />
    <a-space>
      <a-button type="primary" @click="open = !open">开始引导</a-button>
      <a-button type="default" ref="b1">第一个按钮</a-button>
      <a-button type="primary" ref="b2">第二个按钮</a-button>
      <a-button type="primary" ref="b3">第三个按钮</a-button>
    </a-space>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      open: false,
      // steps: [],
      steps: [
        {
          key: 1,
          target: () => this.$refs?.b1.$el,
        },
        {
          key: 2,
          target: () => this.$refs?.b2.$el,
        },
        {
          key: 3,
          target: () => this.$refs?.b3.$el
        }
      ]
    }
  },
  mounted() {
    console.log(this.$refs)
  },
  methods: {}
}
</script>
<style scoped lang="less">
.tour-main {
  padding: 48px;
  padding-left: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
显示代码

# API

# tour props

# tour-steps props

← 更新日志 →