欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue的全局提示框組件實例代碼

 更新時間：2018年02月26日 14:49:55   投稿：mrr  
這篇文章主要介紹了vue的全局提示框組件實例代碼,需要的朋友可以參考下

這篇文章給大家介紹一個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();
  // 將這個實例掛載在我創(chuàng)建的div上
  // 并將此div加入全局掛載點內(nèi)部
  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");

總結(jié)

以上所述是小編給大家介紹的vue的全局提示框組件實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論