vue自定义全局组件 - 提示框组件

最新推荐文章于 2024-05-14 11:43:17 发布

_Jester

最新推荐文章于 2024-05-14 11:43:17 发布

阅读量1.1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/qq_41049816/article/details/106123825

版权

vue 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

该组件挂载在Vue原型上，通过调用方法显示隐藏提示框，并定义了三种状态：加载、警告及成功

1、定义组件Toast.vue，以便extend方法使用

<template>
  <div id="toast-mask" v-if="show">
      <div class="toast-container" :class="{ 'toast-none-icon': icon=='none' }" >
        <template v-if="icon!=='none'">
          <!-- 加载loading -->
          <Loading v-if="icon==='loading'" color="#ffffff" />
          <!--  成功icon -->
          <Success v-if="icon==='success'" color="#ffffff" />
          <!--  警告icon -->
          <Warning v-if="icon==='warning'" color="#ffffff" />
        </template>
        <div v-if="title" :class="[{'no-margin': icon=='none'},'toast-title']">{{title}}</div>
      </div>
   </div>
</template>
<script>

export default {

  name: 'Toast',
  props: {
    show: Boolean,
    title: {
      type: String,
      default: '加载中',
    },
    icon: {
      type: String,
      default: 'loading',
    },
  }
}
</script>
<style lang="scss" scoped>
  #toast-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .toast-container {
    position: absolute;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    min-width: 1.3rem;
    min-height: 1.3rem;
    color: #ffffff;
    font-size: 0.28rem;
    z-index: 30000;
    transition: opacity 0.3s;
    border-radius: 0.16rem;
    padding: 0.2rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .toast-none-icon {
    min-width: auto;
    min-height: auto;
  }

  .toast-title {
    margin-top: 0.1rem;
    text-align: center;
    &.no-margin {
        margin-top: 0;
    }
  }
</style>

2、Toast.js编写组件的主要逻辑

import ToastCom from './Toast.vue'

const Toast = {}    // 定义插件对象
// Vue的install方法，用于定义vue插件
Toast.install = function (Vue) {
    // 使用Vue构造器，创建“子类”
    const ToastConstructor = Vue.extend(ToastCom)
    // 实例化
    const instance = new ToastConstructor()
    // el官方注解：
    // 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
    // 在实例挂载之后，元素可以用 vm.$el 访问。
    // 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译
    // 提供的元素只能作为挂载点。所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 <html> 或者 <body> 上。
    
    // 挂载到元素上;$el访问元素并插入到body中
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)
    // Vue原型上添加显示方法，以便全局调用
    Vue.prototype.$$showToast = (options = {}) => {
        if (this.toastTimer) clearTimeout(this.toastTimer)
        // 通过传入的props改变组件中的属性来显示不同提示效果以及显示时间
        intance.title = options.title || ''
        instance.show = options.show !== false
        instance.icon = options.icon || 'loading'
        this.toastTimer = setTimeout(() => {
            instance.show = false
        }, options.duration || 2000)
    }
    // Vue原型添加隐藏方法
    Vue.prototype.$$hideToast = function () {
        // this.$$showToast({ show: false })
        instance.show = false
    }
}

export default Toast

3、最后在main.js中全局注册

import Toast from '@components/plugin/toast/Toast.js'

Vue.use(Toast)

然后就可以在项目中全局使用

this.$$showToast()    // 默认加载
this.$$showToast({title: '标题', icon: 'success'})
this.$$showToast({title: '标题', icon: 'success', duration: 5000})
this.$$hideToast()    // 隐藏toast

_Jester

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue自定义全局组件 - 提示框组件

组件挂载在Vue原型上，通过调用方法显示隐藏提示框，并定义了三种状态：加载、警告及成功定义组件Toast.vue<template> <div class="toast-container" :class="{ 'toast-none-icon': icon=='none' }" v-if="show"> <template v-if="icon!=='none'">  <
复制链接

扫一扫