Vue封装一个自己的组件(Alert信息提示框)

 

前言：

在项目中经常遇到提示信息组件，我们·一般会用ui库来做。但是当ui库无法满足自己的需求（比如自定样式，ui库的样式很难改变）。下面就是简单封装一个自己的Alert信息提示框。

一、实现思路

1.我们要做得是alert组件所以要预设几个字段

1. title  -标题
2. message -提示信息
3. duration -显示时间

2.给出创建组件的方法

3.挂载到全局vue实例

4.调用

二、实现过程

1.创建一个ui组件（Alert）

<template>
  <div class="box" v-if="isShow">
    <h3>{{title}}</h3>
    <p class="box-content">{{message}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    message: {
      type: String,
      default: ""
    },
    duration: {
      type: Number,
      default: 1000 //默认1000毫秒消失
    }
  },
  data() {
    return {
      isShow: false //是否显示标识
    };
  },
  methods: {
    show() {
      this.isShow = true;
      setTimeout(this.hide, this.duration);//设置时间自动消失
    },
    hide() {
      this.isShow = false;
      this.remove();//移除
    }
  }
};
</script>

<style>
.box {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
  background-color: #fff;
  border: grey 3px solid;
  box-sizing: border-box;
}
.box-content {
  width: 200px;
  margin: 10px auto;
  font-size: 14px;  
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  margin-bottom: 8px;
}
</style>

2.写一个创建Alert的函数（新建一个create.js）

import Vue from 'vue'

// 传入一个组件配置
// 创建它的实例，并且将它挂载到body上
// 返回组件实例
export default function create(Component, props) {//Component组件  props传进来的参数
  //方式一:使用Vue.extend创建
  const Ctor = Vue.extend(Component);
  //创建组件实例
  const comp = new Ctor({ propsData: props })
  //挂载
  comp.$mount();
  document.body.appendChild(comp.$el);//把元素追加到body后面
  //移除
  comp.remove = () => {
    document.body.removeChild(comp.$el) //移除元素
    comp.$destroy() //销毁
  } 

  // // 方式二：new一个Vue
  // const vm = new Vue({
  //   render(h) {
  //     return h(Component, { props })
  //   }
  // }).$mount() // $mount()本质上将vdom=》dom

  // // 通过vm.$el获取生成的dom
  // document.body.appendChild(vm.$el)

  // // 删除函数
  // // 获取组件实例
  // const comp = vm.$children[0]

  // comp.remove = () => {
  //   document.body.removeChild(vm.$el)
  //   vm.$destroy()
  // }

  return comp
}

3.挂载到全局vue实例中（方便调用）

   1.在main.js 里引入create文件和Alert组件

   2.挂载到vue的原型上

代码如下：

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import Create from './utils/create.js';
import Alert from './components/Alert.vue';
Vue.config.productionTip = false
Vue.prototype.$Alert= ((obj)=>{//挂载在原型上
return Create(Alert,obj).show(); //返回组件实例
})

new Vue({
  render: h => h(App),
}).$mount('#app')

   4.使用方式

this.$Alert({message:"5555",title:"测试",duration:3000});
          

 

如果不懂Vue.extends()/$mounted()/$destory可以看一下vue官方API---vue官方API文档传送门

三、总结

这个只是一个简单的组件，我只是给出了一个自定义组件的方法，可以自己往里面加样式，其他字段都行