自制提示框vue2

最新推荐文章于 2024-07-24 21:03:00 发布

海绵飽飽

最新推荐文章于 2024-07-24 21:03:00 发布

阅读量195

点赞数

分类专栏： vue巩固班文章标签： css html javascript

本文链接：https://blog.csdn.net/weixin_43742407/article/details/127894067

版权

vue巩固班专栏收录该内容

1 篇文章 0 订阅

订阅专栏

message.vue文件

<!-- 自定义警告弹窗 -->
<template>
    <div class="message" v-if="visible">
        <svg fill="none" width="1em" viewBox="0 0 16 16" height="1em" class="icon">
            <!-- 感叹号图片 -->
            <path fill="currentColor" d="M15 8A7 7 0 101 8a7 7 0 0014 0zM8.5 4v5.5h-1V4h1zm-1.1 7h1.2v1.2H7.4V11z"
                fill-opacity="0.9"></path>
        </svg>
        {{ text }}
    </div>
</template>
<script>
export default {
    data() {
        return {
            visible: false,
            text: '',
        }
    },
    props: {},
    created() {

    },
    methods: {
        init(text) {
            clearTimeout(this.timer);
            this.visible = true;
            this.text = text || "";
            this.timer = setTimeout(() => {
            this.visible = false;
            clearTimeout(this.timer)
            }, 2000);

        }
    }
}
</script>
<style lang="scss">
.message {
    position: fixed;
    top: 160px;
    left: 50%;
    transform: translate(-50%, 0);
    border: solid 1px #4b4b4b;
    z-index: 99;
    display: flex;
    align-items: center;
    line-height: 22px;
    padding: 5px 30px;
    color: aliceblue;
    background-color: #242424;
    border-radius: 6px;
    font-size: 14px;
    .icon {
        color: #cf6e2d;
        font-size: 20px;
        margin-right: 8px;
    }
}
</style>

message.js文件

import Vue from 'vue';
import messageComponent from './message.vue'
let Message = null; 
var message=function(text){
    const instance = Vue.extend(messageComponent)//生成扩展message组件实例构造器；
   
    if (!Message) {
        Message = new instance({//创建mesaage组件实例对象
            data() {
                return {
                text
              } 
            }
        });
        Message.$mount();
    }
         Message.init(text);
        document.body.appendChild(Message.$el);
}
   message.install=(Vue)=> {
    Vue.prototype.$Message = message;
}//在 mian.js里Vue.use（message）一下，就会自动执行message里的install方法
export default message;

main.js里注册