教你手写vue的提示组件

Prompt.vue

<template>
    <div id="prompt" :style="style">
        <span class="close" @click="destroy"></span>

        <p class="msg" :style="{fontSize: fontSize + 'px'}">{{msg}}</p>
        <i class="tip">{{tip}}</i>
    </div>
</template>

<script>
export default {
    name: 'Prompt',
    props: {
        msg: {
            type: String,
            required: true
        },
        tip: {
            type: String,
            default: ''
        },
        side: {
            type: String,
            default: 'right'
        },
        showTime: {
            type: Number,
            default: 3000
        },
        closeSpeed: {
            type: Number,
            default: 5
        },
        style: {
            type: String,
            default: 'backgroundColor: #BEFFF1; width: 260px; height: 100px; fontSize: 24px;'
        }
    },
    data() {
        return {
            length: [...document.querySelectorAll('#prompt')].filter(item => item.style.display !== 'none').length
        }
    },
    methods: {
        destroy() {
            this.$el.style.display = 'none';
        },
        animation() {
            for(let i = 0; i < this.width / 2 + 20; i++) {
                setTimeout(() => {
                    if(this.side === 'left') {
                        this.$el.style.transform = `translateX(-${i * 2}px)`
                    } else if(this.side === 'right') {
                        this.$el.style.transform = `translateX(${i * 2}px)`
                    }
                }, i * this.closeSpeed)
            }
        },
        combine() {
            setTimeout(() => {
                this.animation();
            }, this.showTime)
        
            setTimeout(() => {
                this.destroy();
            }, this.showTime + this.closeSpeed * (this.width / 2 + 20));
        }
    },
    mounted() {
        this.$el.style.bottom = `${this.length * (20 + this.height)}px`;
        
        if(this.side === 'left') {
            this.$el.style.left = '20px';
            this.$el.style.marginLeft = '20px';
        } else if(this.side === 'right') {
            this.$el.style.right = '20px';
            this.$el.style.marginRight = '20px';
        } else {
            throw new Error('[Prompt Error] side must be "left" or "right"');
        }

        this.combine();
    }
}


</script>

<style scoped>
#prompt {
    position: fixed;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    z-index: 999;
    margin-bottom: 20px;
}
.msg {
    font-weight: bold;
}
.tip {
    font-size: 14px;
    color: #999;
    margin-left: 10px;
}
.close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 20px;
    height: 20px;
    background-color: #444444;
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
}
</style>

App.vue

<template>
  <div id="app">
    <button @click="addPrompt">add prompt</button>
    <div class="prompts" v-for="(prompt, index) in prompts" :key="index">
      <prompt :msg="msg" tip="tip"></prompt>
    </div>
  </div>
</template>

<script>
import prompt from './components/Prompt'

export default {
  name: 'App',
  components: {
    prompt
  },
  data() {
    return {
      prompts: [],
      msg: 'Hello Vue!'
    }
  },
  methods: {
    addPrompt() {
      this.prompts.push({})
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}
</style>