一个vue的全局提示框组件

2018-06-24 01:32:50来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

<template>
  
      <!-- 全局提示框 -->
      <div v-show="visible" class="dialog-tips dialog-center">
          <div>{{message}}</div>
      </div>
  
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      message: ""
    };
  }
};
</script>
<style lang="scss">
.dialog-tips{
    position: fixed;
    z-index: 100;
    min-width: 220px;
    padding: 40px 22px;
    white-space: nowrap;
    background-color: #fff;
    box-shadow: 0px 8px 15px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    .dialog-tips-icon{
        width: 54px;
        height: 54px;
        @extend %bg-contain;
        display: inline-block;
        margin-bottom: 13px;
    }
}
.dialog-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

</style>

toast.js

import ToastComponent from './toast.vue'

const Toast = {};

// 注册Toast
Toast.install = function (Vue) {
    // 生成一个Vue的子类
    // 同时这个子类也就是组件
    const ToastConstructor = Vue.extend(ToastComponent)
    // 生成一个该子类的实例
    const instance = new ToastConstructor();

    // 将这个实例挂载在我创建的div上
    // 并将此div加入全局挂载点内部
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    // 通过Vue的原型注册一个方法
    // 让所有实例共享这个方法 
    Vue.prototype.$toast = (msg, duration = 1500) => {
        instance.message = msg;
        instance.visible = true;

        setTimeout(() => {
            instance.visible = false;
        }, duration);
    }
}

export default Toast

 

如何使用?

  在main.js中

  import Vue from 'vue'
  import Toast from './toast'
 
 
  Vue.use(Toast);

  在component中

this.$toast("XXXXXXXXX");

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:数组去重的三种方法

下一篇:vue-cli下的vuex的极简Demo(实现加1减1操作)