| | |
| | | overflow: 'hidden', |
| | | marginTop: `-${addUnit(negativeTop)}` |
| | | }" |
| | | :closeable='closeable' |
| | | @close='closepoup' |
| | | :closeOnClickOverlay="closeOnClickOverlay" |
| | | :safeAreaInsetBottom="false" |
| | | :duration="400" |
| | |
| | | * @event {Function} confirm 点击确认按钮时触发 |
| | | * @event {Function} cancel 点击取消按钮时触发 |
| | | * @event {Function} close 点击遮罩关闭出发,closeOnClickOverlay为true有效 |
| | | * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" /> |
| | | * @example <u-modal :show="show" /> |
| | | */ |
| | | export default { |
| | | name: 'u-modal', |
| | |
| | | if (n && this.loading) this.loading = false |
| | | } |
| | | }, |
| | | emits: ["confirm", "cancel", "close"], |
| | | emits: ["confirm", "cancel", "close", "update:show",'closemodal'], |
| | | methods: { |
| | | addUnit, |
| | | // 点击确定按钮 |
| | |
| | | // 如果配置了异步关闭,将按钮值为loading状态 |
| | | if (this.asyncClose) { |
| | | this.loading = true; |
| | | } else { |
| | | this.$emit('update:show', false) |
| | | } |
| | | this.$emit('confirm') |
| | | }, |
| | | // 点击取消按钮 |
| | | cancelHandler() { |
| | | this.$emit('update:show', false) |
| | | this.$emit('cancel') |
| | | }, |
| | | // |
| | | closepoup(){ |
| | | this.$emit('closemodal') |
| | | }, |
| | | // 点击遮罩 |
| | | // 从原理上来说,modal的遮罩点击,并不是真的点击到了遮罩 |
| | |
| | | // 透明遮罩的子元素做了.stop处理,所以点击内容区,也不会导致误触发 |
| | | clickHandler() { |
| | | if (this.closeOnClickOverlay) { |
| | | this.$emit('update:show', false) |
| | | this.$emit('close') |
| | | } |
| | | } |