vue简单得页面中的引导

<template>
  <div>
    <Model :opt="gaideOpt" v-if="show">
      <div style="position: absolute; left: 1100px; top: 120px;padding: 10px 20px;background: #fff;">
        管理者<input disabled type="text" />
      </div>  
    </Model>
    <button @click="hasPowerHandle">设置权限</button><br />
    <button @click="clearPowerHandle">清除权限</button><br />
    <button @click="hasValueHandle">设置值</button><br/>
    <button @click="clearValueHandle">清空值</button><br/>
  </div>
</template>
<script>
import Model from './Model.vue'

export default {
  components: {
    Model
  },
  data() {
    return {
      gaideOpt: {
        t: 180,//top
        l: 1100//left
      },
      hasPower: false,//是否有权限
      hasValue: false,//是否有值
      show: false
    }
  },
  created() {
    let power = localStorage.getItem('power');
    let value = localStorage.getItem('value');
    if(!power) {
      this.show = false
    } else {
      if(value) {
        this.show = false
      }else {
        this.show = true
      }
    }
    this.hasPower = localStorage.getItem('power') || this.hasPower
    this.hasValue = localStorage.getItem('value') || this.hasValue
  },
  methods: {
    //添加权限
    hasPowerHandle() {
      this.hasPower = true
      localStorage.setItem('power', true)
    },
    clearPowerHandle() {
      this.hasPower = false
      localStorage.removeItem('power')
    },
    hasValueHandle() {
      this.hasValue = true
      localStorage.setItem('value', true)
    },
    clearValueHandle() {
      this.hasValue = false
      localStorage.removeItem('value')
    }
  }
}
</script>
<style scoped>
</style>

<template>
  <div class="model-wrapper" v-show="show">
    <div>
      <slot></slot>
    </div>
    <template>
      <transition 
        v-on:before-enter="beforeEnter" 
        v-on:enter="enter"
      >
        <div v-if="show" class="guideline" id="guide">
          <div class="line"></div>
          <div>{{ title }}</div>
          <button @click="show = false">{{ stepDesc }}</button>
        </div>
      </transition>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    opt: {
      type: Object,
      default: () => { }
    },
  },
  data() {
    return {
      title: '这是必须要填写的',
      stepDesc: '完成',
      show: false,
    }
  },
  created() {
    // let guide = document.getElementById('guide')
    setTimeout(() => {
      this.show = true
    }, 500)
  },
  methods: {
    beforeEnter: function (el) {
      el.style.transform = `translate(-30px, 100px)`
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    enter: function (el, done) {
      el.offsetWidth
      el.style.transform = `translate(${this.opt.l}px, ${this.opt.t}px)`
      el.style.transition = 'all 1s ease'
      done()
    }
  }
}
</script>
<style scoped>
.model-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.2);
}

button {
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 0 40px;
}

.guideline {
  position: absolute;
  width: 200px;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  background-color: aquamarine;
}
</style>

都是进入页面时候得情况