vue+antd-design-vue+a-modal,从父组件打开子组件弹窗
之前弹窗都是写在同一个页面,后来发现代码越来越多,一个页面轻轻松松都过千了组件化开发,以组件的形式打开弹窗首先创建子组件,MoveTreeuserModules.vue在父页面引入并使用,子组件通设置refimport MoveTreeuserModules from './MoveTreeuserModules.vue'components: { MoveTreeuserModules },&l
·
之前弹窗都是写在同一个页面,后来发现代码越来越多,一个页面轻轻松松都过千了
组件化开发,以组件的形式打开弹窗
首先创建子组件,MoveTreeuserModules.vue
在父页面引入并使用,子组件通设置ref
import MoveTreeuserModules from './MoveTreeuserModules.vue'
components: { MoveTreeuserModules },
<move-treeuser-modules ref="moveTreeuserRef" :moveTreeuser="moveTreeuser" />
在父页面的点击按钮上,通过$refs.moveTreeuserRef.方法名 触发子组件的方法
<a-icon slot="addonAfter" type="check" @click="$refs.moveTreeuserRef.add($event)" />
在子组件中
<template>
<div class="maincontent">
<a-modal
title="创建方式"
destroyOnClose
:width="450"
v-model="visible"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
:zIndex="10000"
:footer="null"
>
<div>
<div class="labelClass">是否将当前项加入到项目中??</div>
<div class="buttonClass">
<a-button @click="subcommitCreate" type="primary" class="yesButton">是</a-button>
<a-button @click="subcommitNullCreate" class="noButton">否</a-button>
</div>
</div>
</a-modal>
</div>
</template>
在add方法中使 this.visible = true 打开弹窗
add(e) {
e.stopPropagation()
this.visible = true
},
更多推荐
已为社区贡献35条内容
所有评论(0)