当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue的全局提示框组件实例代码

vue的全局提示框组件实例代码

2018年04月20日  | 移动技术网IT编程  | 我要评论

天全县,警务硕士,阿兹猫

这篇文章给大家介绍一个vue全局提示框组件，具体代码如下所示：

<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");

总结

以上所述是小编给大家介绍的vue的全局提示框组件实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网