dialog组件的封装

1、新建一个Vue文件
关键点：
① :visible.sync=“dialogVisible”
② props:[‘row’,‘value’]
③ watch监听

<template><div><el-dialog title="提醒详情" :visible.sync="dialogVisible" class="qc-config-dialog"><div v-loading="detailLoading">我是Dialog组件</div><div class="textR mt20" style="display: flex;justify-content: end;align-items: end;"><div><el-button class="btn-primary-cancel" @click="dialogVisible = false">关 闭</el-button></div></div></el-dialog></div>
</template>
<script>export default {props:['row','value'],//data(){return {dialogVisible: false,detailLoading:false,form: {},detailData:[],}},created() {},methods: {},watch: {value: {handler(val) {this.dialogVisible = val;if (val) {this.form = {...this.row};//父组件传来的值}},immediate: true,},dialogVisible(val) {this.$emit("input", val);//关键input},},
}
</script>
<style scoped lang="scss">
.qc-config-dialog{/deep/ .el-form-item {margin-bottom: 20px;}
}
</style>

2、父组件引入子组件

import DialogDetail from "./DialogDetail.vue"//引入components: {DialogDetail //注册
}//使用 ①v-if为了每次打开弹窗都会刷新页面接口；②v-model="zkLogDetailDialog"在子组件用value接收；③:row="ListData"传父组件数据；
<DialogDetail v-if="zkLogDetailDialog" v-model="gtzkLogDetailDialog" :row="ListData"></DialogDetail>

dialog组件的封装相关推荐

vue 封装dialog_自己封装dialog组件
在项目中我们常常要求各页面样式统一,所以在使用组件时封装居多使用方法 import CustomDialog from '@/components/customDialog/index.vue' / ...
解剖vantweapp的dialog组件，论如何封装一个通用性高的组件。
首先我们先从dialog组件的源码开始分析. 先看dialog这个组件的目录: dialog.d.ts(作用大概是区分参数的类型,强类型化) dialog.js(dialog.alert(),clos ...
vue封装自己的组件库 02.封装dialog组件
link: https://blog.csdn.net/weixiaowei_2016/article/details/104702793 四.封装一个element-ui风格的dialog组件前置 ...
16.0 vue3 Teleport---自定义dialog组件
上一篇: 15.0 vue3 provide&inject跨组件通信方式_十一月的萧邦-CSDN博客上一篇:14.0 vue3 customRef的使用_十一月的萧邦-CSDN博客上一篇:vu ...
zCrud组件(vue2封装增删查改到一个组件)
文章目录一.前言二.参数总览 1. 搜索配置对象searchOption 1.1 查询项配置对象query 2. 列配置数组columns 3. 操作列配置对象handleOption 4. 分页 ...
Angular Dialog 组件的设计与实现
你好,我是徐晓东,笔名燕云长风.大漠穷秋于 2019-03-16 21:22 赠此笔名. 寓意:结合李白著名的边塞诗<关山月>取[燕云长风]-- 长风几万里,吹度玉门关. yycf-dia ...
ES6公用立体轮播组件的封装及使用
ES6公用立体轮播组件的封装及使用源码github链接:https://github.com/XieTongXue/how-to/tree/master/carousel-3d 1.效果展示 2.容 ...
ES6公用分页组件的封装及应用举例
ES6公用分页组件的封装及应用举例,以下源码使用到JQuery.Sass,重要的是方法,不合适可以根据自己的需要改改. 分页类以下为pagination.js源码 import './paginat ...
小程序 --- Tab组件的封装
1. Tabs组件的封装 1.1 组件的引入使用自定义的组件很简单,只需在使用组件的页面的配置文件.json文件中配置. // pages/goods_list/index.json {" ...

dialog组件的封装

dialog组件的封装相关推荐

最新文章

热门文章