Vue.component(封装一个全局组件-弹窗)

1.首先创建一个vue文件，然后写好自己想要全局使用的组件，当然组件的复用性和拓展性要足够高，弹窗的话一般需要自定义的有标题 背景色 等等

<template>
  <transition name="fade">
    <div
        class="v-alert g-center"
        :style="{zIndex}">
      <div
          class="v-cont"
          :class="{shadow:!hideCont}"
          :style="[innerWidth]">
        <div
            v-if="title.trim()"
            :style="[{backgroundColor:bgColorTit,color:cancelCol},titleStyle]"
            class="title g-font18">
          {{title}}
          <span class="title-data">{{titleData}}span>
        div>
        <div
            v-if="isCancel"
            class="v-cancel">
          <div
              class="cancel-icon"
              :style="{color:cancelCol}"
              @click="cancel">
            
          div>
        div>
        <slot name="slot3">slot>
        <div
            v-if="!hideCont"
            :style="styles"
            class="content">
          <slot>slot>
        div>
        <slot name="slot2">slot>
      div>
      <div
          class="g-fixed alert-wrap"
          @click="$emit('cancel')"
          :style="{backgroundColor:bgWrapColor}">div>
    div>
  transition>
template>

<script>
  export default {
    name: "v-alert",
    props: {
      title: {default: ""},
      // titFontSize:{default: '16'},
      bgColorTit: {default: "#40404C"},
      bgColor: {default: "#fff"}, // 背景色
      bgWrapColor: {default: "rgba(42, 47, 59, 0.6)"}, //外套背景色
      cancelCol: {default: "#fff"}, //按钮颜色
      width: {required: true, type: Number}, //宽度
      minWidth: {type: Number, default: 0},
      isCancel: {type: Boolean, default: true}, //是否显示关闭按钮
      titleData: {default: ""},
      hideCont: {type: Boolean, default: false}, //是否隐藏cont
      zIndex: {default: 2000},
      styles: {
        default() {
          return {};
        },
        type: Object
      },
      titleStyle: {
        default() {
          return {};
        },
        type: Object
      },
    },
    components: {},
    computed: {
      innerWidth() {
        let dfu = {
          backgroundColor: this.bgColor
        };
        this.minWidth > 0
          ? dfu.minWidth = `${this.minWidth}px`
          : dfu.width = `${this.width}px`;
        return dfu;
      }
    },
    methods: {
      cancel() {
        this.$emit("cancel");
      }
    },
    mounted() {
      document.addEventListener(
        "keydown",
        event => {
          let keyCode = this.$_lib.getKeycode(event);
          if (keyCode === 'Escape' || keyCode === 27) this.$emit("cancel");
        },
        false
      );
    }
  };
</script>

2.新建一个vue-component.js文件，然后把需要全局注册的组件引入进来

import VAlert from './v-alert'; //弹窗
import VScrollBar from './v-scroll-bar.vue'; //滚动条
import VNodata from './v-nodata.vue'; //无数据
import VLoding from './v-loding.vue'; //loding
import VCodeInput from './v-code-input.vue'; //发送验证码
import VSearch from './v-search.vue'; //搜索
 
export default {
  install(Vue) {
    Vue.component('VSearch', VSearch);
    Vue.component('VAlert', VAlert);
    Vue.component('VScrollBar', VScrollBar);
    Vue.component('VNodata', VNodata);
    Vue.component('VCodeInput', VCodeInput);
    Vue.component('VLoding', VLoding);
  }
};

3.在一个通用文件 类似于base.js这样引入其他js文件 方法库 的js文件中注册一下

import vueComponent from "../middleware/components/vue-component";
Vue.use(vueComponent);

4.引入一下base.js 然后就可以用了

<v-alert
     v-if="is_alert"
     @cancel="is_alert=false"
     bg-color-tit="#40404C"
     cancel-col="#fff"
     :title="$_lang('新增白名单')"
     :width="680">
</v-alert>