笔记-使用AntDesignVue的Modal组件
点击出弹窗a-modal
// ChildCpn
<template>
<div class="index">
<a-modal
// 标题设置
title="规则设置"
// 显示隐藏，属性由父组件传进来控制
:visible="visible"
// 控制位置和圆角
:dialog-style="{
top: '.86rem',
borderRadius: '.06rem'
}"
// 控制宽度
width="2.23rem"
// 点击遮罩或者是关闭按钮
@cancel="cancelClick"
// 点击确认按钮
@ok="sureClick"
>
<a-row class="pcts">
<p>频次天数</p>
<a-input placeholder="请输入" />
</a-row>
<a-row>
<p>出入频次</p>
<a-input placeholder="请输入" />
</a-row>
</a-modal>
</div>
</template>
<script>
export default {
// 父组件传入控制显示隐藏
props: {
visible: {
type: Boolean,
default: false
}
},
methods: {
// 点击关闭或者是遮罩发射关闭信号给父组件，控制关闭
cancelClick () {
this.$emit('modalClose')
},
// 点击确认执行成功事件
sureClick () {
this.$emit('modalClose')
}
}
}
</script>
<style lang="less" scoped>
.pcts {
margin-bottom: .13rem;
}
</style>
// ParentCpn
// 导入
import ChildCpn from './ChildCpn'
// 使用
<modal-box
:visible="show"
@modalClose="modalClose"
/>
data () {
return {
show: false
}
},
components: {
ChildCpn
},
methods: {
// 点击按钮改为true，弹窗显示
modalClick () {
= true
},
// 接收关闭事件，将show改为false
modalClose () {
= false
}
}