Vue注册全局组件-弹窗组件

短命女 2022-05-14 00:52 267阅读 0赞

在src目录下新建components文件夹

1.新建module文件夹，然后新建v-alert.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>

<style lang="scss"
        rel="stylesheet/scss"
        scoped>
      .v-alert {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2000;
        .alert-wrap {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          /*z-index: 2000;*/
        }
        .v-cont {
          min-width: 100px;
          min-height: 100px;
          background-color: #ffffff;
          position: relative;
          border-radius: 2px;
          .shadow {
            box-shadow: 0 2px 30px rgba(42, 47, 59, 0.2);
          }
          z-index: 2001;
          .title {
            width: 100%;
            line-height: 70px;
            color: #ffffff;
            padding-left: 30px;
          }
          .title-data {
            color: #f8e19a;
          }
          .content {
            padding: 40px;
            /*padding: 60px 40px 50px 40px;*/
            word-wrap: break-word;
            text-align: left;
          }
        }
    
        .v-cancel {
          position: absolute;
          top: 0;
          right: 0;
          width: 100%;
          height: 70px;
        }
        .cancel-icon {
          position: absolute;
          text-align: center;
          width: 20px;
          height: 20px;
          line-height: 20px;
          right: 20px;
          top: 50%;
          margin-top: -10px;
          color: #ffffff;
          cursor: pointer;
          transition: 200ms;
          &:hover {
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
          }
        }
      }
    </style>

2.在nodule同级目录新建vue-component.js

import VAlert from './v-alert'; //弹窗
    
    export default {
      install(Vue) {
        Vue.component('VAlert', VAlert);
      }
    };

3.在main.js中注册为全局组件

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

4.在其他组件可以直接用了,无需import

<template>
        <v-alert
          v-if="is_alert"
          @cancel="is_alert=false"
          bg-color-tit="#40404C"
          cancel-col="#fff"
          :title="提示"
          :width="680">
          <div></div>
        </v-alert>
    </template>

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue注册全局组件的方法

1、在components文件夹下新建package文件夹（文件夹可以随意命名），然后在package文件夹下创建index.js ![在这里插入图片描述][202001

谁借莪１个温暖的怀抱￠/ 2023年02月22日 13:55/ 0 赞/ 197 阅读

相关 Vue3---组件注册(全局组件、局部组件)

全局组件通过 app.component() 方式注册 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_

Love The Way You Lie/ 2023年01月20日 08:11/ 0 赞/ 865 阅读

相关 Vue全局组件

1.写一个组件，然后在export default中给当前组件起一个名字 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

布满荆棘的人生/ 2023年01月13日 05:46/ 0 赞/ 168 阅读

相关 VUE_vue全局注册组件，uni-app全局注册组件，vue批量注册全局组件

单个组件注册 main.js import empower from '@/components/empower/index.vue' Vue.comp

深藏阁楼爱情的钟/ 2023年01月06日 11:48/ 0 赞/ 202 阅读

相关 vue基础组件的自动化全局注册

基础组件的全局化自动注册：某一些小组件在全局都会使用，而且数量比较多时，可以自动化全局注册；如果你使用了webpack(或在内部使用了 webpack 的 [Vue CLI

女爷i/ 2022年12月17日 07:30/ 0 赞/ 210 阅读

相关 Vue之简易弹窗组件

组件模板 Notice.vue <template> <div class="box" v-if="isShow"> <h3>{ {

古城微笑少年丶/ 2022年12月03日 09:14/ 0 赞/ 219 阅读

相关 vue注册组件跟注册局部组件

vue注册组件跟注册局部组件 > 由于以前都是用脚手架写的项目，因此常常忽略了这一点，由于最近入驻的公司是关于直播广告活动的，因此都是基于vue.js写出的项目，废话不多

红太狼/ 2022年11月09日 14:22/ 0 赞/ 202 阅读

相关 Vue注册全局组件-弹窗组件

在src目录下新建components文件夹 1.新建module文件夹，然后新建v-alert.vue <template> <transition

短命女/ 2022年05月14日 00:52/ 0 赞/ 268 阅读

相关 vue 封装弹窗组件注意

父组件 <template> <div> <p @click="onDelete"> 打开 </p>

ゝ一世哀愁。/ 2021年09月07日 06:13/ 0 赞/ 496 阅读

相关 vue 创建组件、组件选项、require.context全局自动注册组件

非脚手架环境：根实例: new Vue({ el: 'app', router, data: {

雨点打透心脏的1/2处/ 2021年07月24日 16:31/ 0 赞/ 477 阅读