Vue 自定义全局message组件

Message.vue

<template>
  <transition name="fade">
    <div class="message" :class="type" v-if="visible">
      <i class="icon-type iconfont" :class="‘icon-‘+type"></i>
      <div class="content">{{content}}
        <i v-if="hasClose" class="btn-close iconfont icon-close" @click="visible=false"></i>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "MyMessage",
    data() {
      return {
        content: ‘‘,
        time: 3000,
        visible: false,
        type:‘info‘,//‘success‘,‘warning‘,‘error‘
        hasClose:false,
      }
    },
    mounted() {
      this.close()
    },
    methods: {
      close() {
        window.setTimeout(() =>{
          this.visible = false
        }, this.time);
      }
    }
  }
</script>

index.js

给Vue添加$my_message方法,

判断参数,使用$mount()给组件手动挂载参数,然后将组件插入页面中

import Vue from ‘vue‘
import Message from ‘./Message.vue‘

Vue.prototype.$my_message = function(options) {
  if (options === undefined || options === null) {
    options = {
      content: ‘‘
    }
  } else if (typeof options === ‘string‘ || typeof options === ‘number‘) {
    options = {
      content: options
    }
  }
  var message = Vue.extend(Message)
  var component = new message({
    data: options
  }).$mount()
  document.body.appendChild(component.$el)
  Vue.nextTick(() => {
    component.visible = true
  })
}
Message.install=function(Vue){
  Vue.component(Message.name,Message);
}
export default Message

在main.js里全局引入

import Message from ‘@/components/common/message‘
Vue.use(Message)

页面中调用

this.$my_message(‘这是一个message‘);
//传参的方式
this.$my_message({
    content:‘这是一个success提示‘,
    time:5000000,
    type:‘success‘,
    hasClose:true,
});

效果图:

原文地址:https://www.cnblogs.com/conglvse/p/9641550.html

时间: 2024-10-30 05:30:22

Vue 自定义全局message组件的相关文章

vue自定义事件将组件内的数据传输到实例中去使用

vue自定义事件将组件内的数据传输到实例中去使用 <body> <div id="app"> <h1 style="color:deeppink">{{ outer_title }}</h1> //③给实例绑定一个方法 <hello :reader="new_msg"  v-on:chang_event="chang_tit"></hello> </

vue自定义事件 子组件把数据传出去

每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 1.使用v-on绑定自定义事件 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <s

vue 自定义步骤条组件(css)

话不多说直接上组件代码.. <template> <div> <ul class="steps"> <li v-for="(item,index) in SetData" :key="item+index" :class="{'active':Steps===index}" >{{item+Steps}}</li> </ul> </div> &

自定义全局插件 组件

官网地址:https://cn.vuejs.org/v2/guide/plugins.html 使用指令创建项目: 运行项目,看项目能否正常运行: 运行结果说明项目能正常运行: 在官网中有这样的部分: 在生成的项目中新建该目录: myButton.vue 1 <template> 2 <div class="mybtn"> 3 4 <button>{{name}}</button> 5 </div> 6 </templa

Vue自定义指令配置修饰符和传参

一和二,请参考https://www.cnblogs.com/zui-ai-java/p/11109213.html 三.index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-widt

[转] vue自定义组件(通过Vue.use()来使用)即install的使用

在vue项目中,我们可以自定义组件,像element-ui一样使用Vue.use()方法来使用,具体实现方法: 1.首先新建一个Cmponent.vue文件 // Cmponent.vue<template> <div> 我是组件 </div></template> <script> export default { }</script> <style scoped> div{ font-size:40px; color:

教你撸一个简单的Vue自定义动态组件

components下创建 toast 文件夹, 文件夹里面创建 toast.vue 和 index.js toast.vue: <template> <div id="toastWrap" :class="[className,showAnimation ?'fadein':'fadeout',appointId==''?'fixed':'absolute']" v-if="show"> <span :class=

vue引入全局组件和局部组件的区别以及全局注册公共函数

一,先看看全局组件的引用,就拿最常用的全局的暂无数据来举例,看看全局的是如何实现的. Step1,首先在components创建一个公共的目录,NoDatas目录里边包含index.vue和index.js,index.vue用来写公共的页面,index.js用来导出这个组件. <template> <!-- NoDataWords 可以灵活控制每个页面显示的内容 --> <!-- NoDataHeight 可以灵活控制每个页面的高度 --> <!-- 如果你的页

Vue 全局注册组件和局部注册组件

Vue 组件化的思想大大提高了模块的复用性和开发的效率,在使用组件时,一般分为几个步骤,分别是:定义组件.引入组件,注册组件,使用组件.本节主要针对Vue中如何注册组件进行阐述. 下面我们一起来看如何全局注册组件,如何局部注册组件. 页面显示结果如下: [说明]: 1. com-one  com-two 为全局注册组件, com-three  com-four 为局部注册组件: 2. 全局注册组件为 Vue.component()方法:局部注册组件为 components 属性,它的属性值是一个