Vue.component(封装一个全局组件-弹窗)
2019-08-19 17:07
881 查看
原文链接:https://blog.csdn.net/qq_24510455/article/details/82227020
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>
<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.新建一个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>
相关文章推荐
- 基于vue-upload-component封装一个图片上传组件的示例
- 在vue中全局组件的封装与使用
- 使用Vue组件实现一个简单弹窗效果
- Vue一个案例引发的动态组件与全局事件绑定总结
- vue 定义全局变量在一个组件内引用
- Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
- Vue自定义全局弹窗组件
- 按钮防多次点击。。。Vue封装一个button组件
- vue用mint-ui的picker组件封装一个省市区三级联动组件
- 项目实战之vue爬坑之路:vue框架中如何注册全局公共过滤器filter、全局公共插件、全局公共组件component
- Vue封装一个简单轻量的上传文件组件的示例
- 基于vue写一个全局Message组件的实现
- Vue封装一个简单轻量的上传文件组件的示例
- vue封装一个简单的div框选时间的组件的方法
- vue学习系列-完成一个分页组件的封装
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
- Vue 2.x折腾记 - (19) 基于Antd Design Vue 封装一个符合业务的树形组件
- Vue 封装一个自己写的组件或方法
- vue中实现一个全局的message组件
- Vue全局添加组件