if you use XDialog inside ViewBox or use overflowScrolling:touch，please should import directive:transfer-dom to fix z-index invalid issue。
otherwise, you don't need to use v-transfer-dom.
import { TransferDomDirective as TransferDom } from 'vux'
export default {
directives: {
TransferDom
}
}
<div v-transfer-dom>
<x-dialog></x-dialog>
</div>
API
Variables
Props
| name | type | default | description | required version |
| show | boolean | false | visibility of the dialog, supports the .sync modifier | -- |
| mask-transition | string | vux-mask | transition of mask | -- |
| dialog-transition | string | vux-dialog | transition of dialog body | -- |
| hide-on-blur | boolean | false | if closing dialog when clicking on mask | -- |
| scroll | boolean | true | [deprecated]if body content can scroll when scrolling on dialog | -- |
| dialog-style | object | set dialog styles, you can use it for overwritting default width and background style | v2.2.2 | |
| mask-z-index | number string | 1000 | zIndex of mask | v2.6.4 |
Events
| name | params | description | required version |
| @on-show | -- | emits when opening dialog | -- |
| @on-hide | -- | emits when closing dialog | -- |
Slots
| name | description | required version |
| default | main content of the dialog | -- |
Variables
| name | default | description | inherited name |
| @dialog-button-text-primary-color | #0BB20C | -- | |
| @dialog-button-text-default-color | #353535 | -- | |
| @dialog-button-text-warn-color | #E64340 | -- | |
| @dialog-width | 80% | -- | |
| @dialog-max-width | 300px | -- | |
| @dialog-gap-width | 1.6em | title and content's padding-left and padding-right | |
| @dialog-mask-background | rgba(0, 0, 0, .6) | -- |
Contributors
Contributors
Total commits quantity: 46，Total contributors quantity: 6
airylandvv13Annall万刚光君Lin SenChangelog
Releases
- v2.9.0 [feature] support variable dialog-gap-width #2640
- v2.9.0 [enhance] support dialog-width and dialog-max-width variable #2577
- v2.7.4 [fix] fix position:absolute issue #2220
- v2.7.1 [fix] fix prevent-body-scroll.css not found (less-loader issue) #2118
- v2.7.0 [feature] add event:on-click-mask #2102
- v2.6.4 [feature] support prop:mask-z-index
- v2.6.0 [fix] fix body still scrolls when scrolling on dialog
- v2.5.12 [change] prop:scroll is deprecated #1858 #1877
- v2.5.3 [feature] Add prop:show, supports the .sync modifier
- v2.2.2 [feature] Support prop:dialog-style #1282
- v2.1.1-rc.14 [fix] Fix cannot set value to true initially #1138
- v2.1.1-rc.11 [enhance] Better mask transition and dialog transition
- v2.1.1-rc.11 [enhance] Add transfer-dom demo
- v2.1.1-rc.11 [enhance] Clean unused code
- v2.1.1-rc.2 [fix] fix button text color variables
- v2.1.0 [fix] fix `transition` binding