說明：本案例是封裝的一個(gè)彈框頁面，因?yàn)橹幌胍粋€(gè)遮罩，內(nèi)容自定義。因?yàn)镋lementUI上已經(jīng)提供了一個(gè)彈框組件，但覺得elementUI的組件內(nèi)容有點(diǎn)多，所有自己就封裝了全局組件。自己封裝的參考了elementUI組件的源碼。

主要步驟如下

1.創(chuàng)建一個(gè)文件夾my-dialog
2.在my-dialog文件夾下創(chuàng)建MyDialog.vue和index.js
3.index.js需要引入MyDiloag并封裝和拋出
4.在main.js中引入index.js

主要代碼如下

1、MyDialog.vue

<template>
? ? <transition
? ? ? ? ? ? name="dialog-fade"
? ? ? ? ? ? @after-enter="afterEnter"
? ? ? ? ? ? @after-leave="afterLeave">
? ? ? ? <div v-show="visible">
? ? ? ? ? ? <div class="md-wapper" >
? ? ? ? ? ? </div>
? ? ? ? ? ? <div class="md-content" @click.self="handleOut">
? ? ? ? ? ? ? ? <slot></slot>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </transition>
</template>

<script>
? ? export default {
? ? ? ? name: "MyDialog",
? ? ? ? data(){
? ? ? ? ? ? return{
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? props:{
? ? ? ? ? ? visible: {
? ? ? ? ? ? ? ? type: Boolean,
? ? ? ? ? ? ? ? default: false
? ? ? ? ? ? },
? ? ? ? ? ? closeOnClickModal: {
? ? ? ? ? ? ? ? type: Boolean,
? ? ? ? ? ? ? ? default: true
? ? ? ? ? ? },
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? afterEnter(){

? ? ? ? ? ? },
? ? ? ? ? ? afterLeave(){

? ? ? ? ? ? },
? ? ? ? ? ? handleOut(){
? ? ? ? ? ? ? ? // this.visible =false
? ? ? ? ? ? ? ? if(this.closeOnClickModal){
? ? ? ? ? ? ? ? ? ? this.$emit("closeMyDialog")
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },

? ? }
</script>

<style scoped lang="less">
? ? .md-wapper{
? ? ? ? z-index: 10;
? ? ? ? position: fixed;
? ? ? ? left: 0;
? ? ? ? top: 0;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? ? ? opacity: .5;
? ? ? ? background: #000;
? ? }
? ? .md-content{
? ? ? ? z-index: 11;
? ? ? ? position: fixed;
? ? ? ? left: 0;
? ? ? ? top: 0;
? ? ? ? width: 100%;
? ? ? ? height: 100%;
? ? }
</style>

2、index.js

import MyDialog from './MyDialog';

MyDialog.install = function(Vue) {
? ? Vue.component(MyDialog.name, MyDialog);
};

export default MyDialog;

3、在main.js中引入

// 引入自定義彈框組件
import MyDialog from '@/common/my-dialog/index'
Vue.use(MyDialog)

4、在項(xiàng)目中使用

<template v-else>
?<div class="ds-bg">
? ?<my-dialog :visible="true">
? ? ? ? <div class="da-sty">
? ? ? ? ? ? ?<div class="da-show">
? ? ? ? ? ? ? ?<div class="da-name">
? ? ? ? ? ? ? ? ?我要報(bào)名
? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ?</my-dialog>
? ? </div>
</template>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: