笔记-使用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 () {this.show = true},// 接收关闭事件，将show改为falsemodalClose () {this.show = false}
}

笔记-使用AntDesignVue的Modal组件相关推荐

modal组件 vue_Vue 2.0学习笔记：使用Vue创建Modal组件
Modal弹框在Web应用或者Web页面上非常常见,很多时候在不同的项目都会重写这样的一个Modal弹框.为了能偷懒,思考了一下,能不能写一个组件,比如说使用Vue创建一个组件,一个Modal组件,让 ...
Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
antd 日期选择框如何提交_基于Ant Design的Modal组件来实现一个可拖拽的React模态框...
引言写这篇文章的原因是因为在项目中用到了Antd Design的React组件,当有业务需求需要用到模态框的时候遇到了一些小问题,Antd的模态框Modal组件时不能拖拽的,一般情况下不可拖拽也没什 ...
React Native Modal组件 Android覆盖状态栏
在App开发中经常需要做模态框,我们第一时间就会想到 React Native 的 Modal 组件,确实Modal组件很方便.但也有一些不尽人意的地方,在安卓App开发的过程中发现,Modal不会覆 ...
微信小程序html modal,微信小程序 modal组件详细介绍
modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml 弹出modal title="退出应用" hidden=" ...
修改源码实现小程序UI库iview weapp的modal组件自定义宽高
记一下小程序端UI库iview weapp的modal模态窗自定义样式修改因为项目需要在模态窗中显示内容,小程序端的iview没有类似popup这种的弹出框,所以就选择了modal对话框来承载弹出内 ...
vue-strap 修改Modal组件
在用到vue-strap的Modal组件时,会有两个默认按钮,查看官方文档配置如下: 可以看到,ok-text和cancel-text都有一个默认值,在使用时即使不给这两个选项赋值,也会显示两个默认文 ...
Vue学习笔记（2）（组件化开发）
Vue2.x学习笔记.原视频教程:最全最新Vue.Vuejs教程,从入门到精通_哔哩哔哩 (゜-゜)つロ干杯~-bilibili 组件化 1. 什么是组件化? 组件化是Vue.js中的重要思想它提 ...
modal组件 vue_开发一个简单的 Vue 弹窗组件
https://github.com/woai3c/Front-end-articlesgithub.com 一个弹窗组件通常包含两个部分,分别是遮罩层和内容层. 遮罩层是背景层,一般是半透明或不透 ...
Android开发笔记（四十）组件通讯工具Intent
Intent的用途与组成 Intent用于处理Android各组件之间的通讯.Intent完成的工作主要有三部分: 1.Intent需标明本次通讯请求是从哪里来,到哪里去,要怎么走: 2.发起方携带上 ...

笔记-使用AntDesignVue的Modal组件

笔记-使用AntDesignVue的Modal组件相关推荐

最新文章

热门文章