VUE封装ElementUI中的Dialog表单弹窗

逻辑散客

于 2020-05-09 14:30:48 发布

阅读量5.4k

点赞数 4

文章标签： vue

本文链接：https://blog.csdn.net/qq_42391080/article/details/106016620

版权

本文介绍如何在Vue项目中封装ElementUI的Dialog表单弹窗。首先，通过vue-cli搭建项目并引入ElementUI。接着，创建一个Vue组件，复制Dialog组件的表单弹窗内容。然后，在父组件中引入并声明该组件，模板中添加组件实例。最后，为按钮添加点击事件以展示表单弹窗。

摘要由CSDN通过智能技术生成

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

vue的手脚架搭建大家可参考：使用vue-cli搭建vue项目完整版或者官方的网站
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=