VUE封装ElementUI中的Dialog表单弹窗

第一步，我们先搭建好手脚架以及把需要的elementUI也映入进来。

1. vue的手脚架搭建大家可参考：使用vue-cli搭建vue项目完整版或者官方的网站
2. elementUI的引入也挺简单的，大家可以直接去官方网站就可以找到引入的方法。

第二步，在components中建立一个vue文件，然后可以去elementUI的官网中把Dialog组件中的表单弹窗复制过来

<template>
<div>
<el-dialog
:modal="true"
:modal-append-to-body="true"
:title="tittle"
:visible.sync="isShow"
:width="width"
:height="height"
:close-on-click-modal="false"
:show-close="true"
:close-on-press-escape="true"
center>
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="quxiao()">取 消</el-button>
<el-button type="primary" @click="sumbim()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
isShow: {
type: Boolean,
default: true
},
switchStyle: {
type: Boolean,
default: true
},
tittle: {
type: String,
default: '新增'
},
width: {
type: String,
default: "35%"
},
height: {
type: String,
default: "1000px"
},
},
data(){
return {
form: {
name: '',
region: '',
},
isShow:'',
formLabelWidth: '120px'
}
},
methods: {
sumbim(){
this.isShow = false
},
quxiao(){
this.isShow = false
}
}
}
</script>
<style scoped>
.divauto{
margin:  10px auto 0 auto;
}
</style>

第三步，把组件引入到父组件的中script中以及在components函数中声明他

import dia from "@/components/xxx.vue";//引入组件
components: { dia } //在export default的components函数中声明组件

第四步，在父组件中的template加入组件dia

<dia :title="tittle" :isShow="isShow"  :width="width" :height="height"></dia>
//在data中声明变量
tittle:"新增",
isShow:false,
width:"60%",
height:"2000px",

第五步，给button加一个点击事件，让表单弹窗显示

show(){
this.isShow=true;
this.isShow== !this.isShow;
}

到这里这个案例就可以简单的结束了。