使用 VUE 和 Element 创建一个 dialog 对话框组件的详细过程

关注

发布于: 2021 年 03 月 30 日

一、子组件（对话框）：

效果如下图：

代码如下：

<template>    <el-dialog title="标题名" :visible.sync="changOrder" :before-close="handleClose" :close-on-click-modal="false">        <el-form label-width="120px" ref="turntorepairorderform" :model="turntorepairorderform" :rules="rules">            <el-form-item prop="first" label="项目1：">                    <el-input v-model="turntorepairorderform.first" ></el-input>            </el-form-item>            <el-form-item prop="second" label="项目2：">                    <el-input v-model="turntorepairorderform.second"></el-input>            </el-form-item>            <el-form-item prop="third" label="项目3：">                    <el-input  v-model="turntorepairorderform.third"></el-input>            </el-form-item>            <el-form-item prop="fouth" label="项目4：">                    <el-input  v-model="turntorepairorderform.fouth"></el-input>            </el-form-item>        </el-form>        <template slot="footer">            <el-button type="default" @click="handleClose">取消</el-button>            <el-button type="primary" @click="handleSubmit">提交</el-button>        </template>    </el-dialog></template>
<script>    import qs from "qs"    export default {        name: "turntorepairorder",        data(){            return{                changOrder: false,                turntorepairorderform:{//绑定表格数据                    first:"",                    second:"",                    third:"",                    fouth:""                },                rules:{                    first:[                        {required: true, message: "项目不能为空", trigger: "blur"}                    ],                    second:[                        {required: true, message: "项目不能为空", trigger: "blur"}                    ],                    third:[                        {required: true, message: "项目不能为空", trigger: "blur"}                    ],                    fouth:[                        {required: true, message: "项目不能为空", trigger: "blur"}                    ]                }            }        },        methods:{            //页面初始化时加载的事件            init(){               this.changOrder = true;            },
            //关闭页面            handleClose() {                this.changOrder = false;                this.$emit("tyonke", this.changOrder);            },            //表单提交            handleSubmit(){
            }        },        //监听        watch:{            changOrder(newValue, oldValue) {                this.changOrder = newValue;            }        }    }</script>
<style scoped>
</style>

复制代码

二、父组件：（点击页面中的按钮会弹出一个上图中的对话框）

效果如下图：

代码如下：

1.首先你需要引入子组件：

import 子组件名 from '子组件的路径'

复制代码

2.使用子组件：

(1)、父组件的 template:

<el-form-item>	<el-button type="info" @click="turnOrder()">标题</el-button></el-form-item><!--弹框--><turntorepairorder v-if="changOrder" ref="turnOrder"></turntorepairorder>

复制代码

（2）、data 的 return 里面：

data(){

return:{

changOrder: false,//标题

}

（3）、components 导入一下：

components:{          子组件名},

复制代码

（4）、methods 里面：

        turnOrder() {            let _this = this;            _this.changOrder = true;            _this.$nextTick(() => {                _this.$refs.turnOrder.init();               })            },

复制代码

三、拓展总结：

很多东西看着很简单，但是你不去练习，不去使用可能几天你就忘了，没事多敲！！！

最近经常看前端或者计算机技术别人写的不错博客（个人只是推荐看看，自己也看）：

在vue中通过使用$attrs实现组件之间的数据传递

IoT时代：Wi-Fi“配网”技术剖析总结

「2019 JSConf.Asia - 尤雨溪」在框架设计中寻求平衡

个人能力有限，写的不对的地方还望好心提醒！转载请注明出处！

#vue#element#js#前端

发布于: 2021 年 03 月 30 日阅读数: 14