笔记-使用AntDesignVue的Modal组件

原创已于 2022-09-03 07:42:23 修改 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #css

于 2022-09-02 21:56:21 首次发布

本文介绍了一个在Vue.js中使用的可定制弹窗组件（a-modal），展示了如何通过父子组件间的props和事件传递控制其显示、隐藏及输入框交互，以及如何响应关闭和确认操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击出弹窗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 () {
		this.show = true
	},
	// 接收关闭事件，将show改为false
	modalClose () {
		this.show = false
	}
}