vue中自己封装message组件

messgae.vue

<template>
  <div class="tips_box_common" v-if="showTips">
      {{errorMessage}}
   </div>
</template>

<script>
export default {
    name: "message",
    data(){
        return{

        }
    },
    props:{
        showTips:Boolean,
        errorMessage:String
    }
}
</script>

<style scoped>
.tips_box_common{
    position: fixed;
    z-index: 99998999;
    top:0; /* 四周拉力相同 */
    right:0; /* 四周拉力相同 */
    bottom:0; /* 四周拉力相同 */
    left:0; /* 四周拉力相同 */
    margin:auto;
    background:rgba(0,0,0,1);
    opacity:0.8;
    padding: 0px 18px;
    display: inline-block;
    font-size:15px;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(255,255,255,1);
    border-radius: 5px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    height: 50px;
    line-height: 50px;
}
</style>

messgae.js

//在手机端H5中 弹窗的message提示，曾试过vux中的组件和mint-ui中的组件，但是在部分ios手机样式会兼容，因为message的字符长度不固定。所以自己封装了一个。

import Vue from 'vue'
import loadingComponent from '@/app-client/component/message.vue'

const LoadingConstructor = Vue.extend(loadingComponent)

const instance = new LoadingConstructor({
  el: document.createElement('div')
})

instance.show = false // 默认隐藏
const message = {
show(message) { // 显示方法
    instance.showTips = true;
    instance.errorMessage = message;
    document.body.appendChild(instance.$el)
    setTimeout(function () {
        instance.showTips = false
    },1500)
}
}

export default {
  install() {
    if (!Vue.$message) {
        Vue.$message = message
    }
    Vue.mixin({
        created() {
            this.$message = Vue.$message
        }
    })
}
}

使用

在main.js中引入，然后就可以在其他组件中调用了

import message from '@/app-client/component/message.js' // 引入message

调用

this.$message.show();//显示
this.$message.hide();//隐藏