Home > Web Front-end > JS Tutorial > Detailed explanation of the use of vue global prompt box component

Detailed explanation of the use of vue global prompt box component

php中世界最好的语言
Release: 2018-04-12 16:21:42
Original
3479 people have browsed it

This time I will bring you a detailed explanation of the use of the vue global prompt box component. What are the precautions when using the vue global prompt box component. The following is a practical case. Let’s take a look.

This article introduces you to a vue global prompt box component. The specific code is as follows:

<template>
   <!-- 全局提示框 -->
   <p v-show="visible" class="dialog-tips dialog-center">
     <p>{{message}}</p>
   </p>
</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>
Copy after login

toast.js

import ToastComponent from './toast.vue'
const Toast = {};
// 注册Toast
Toast.install = function (Vue) {
  // 生成一个Vue的子类
  // 同时这个子类也就是组件
  const ToastConstructor = Vue.extend(ToastComponent)
  // 生成一个该子类的实例
  const instance = new ToastConstructor();
  // 将这个实例挂载在我创建的p上
  // 并将此p加入全局挂载点内部
  instance.$mount(document.createElement('p'))
  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
Copy after login

how to use?

 In main.js

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

 In component

this.$toast("XXXXXXXXX");
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue determines the input content Are there spaces?

How to deal with the compatibility of easyui date and time box in IE

The above is the detailed content of Detailed explanation of the use of vue global prompt box component. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template