https://github.com/foolishchow/element-dialog2

an extension of element-dialog that allow you to use it nested
https://github.com/foolishchow/element-dialog2

dialog element-ui nested vue

Last synced: 5 days ago
JSON representation

an extension of element-dialog that allow you to use it nested

• Host: GitHub
• URL: https://github.com/foolishchow/element-dialog2
• Owner: foolishchow
• Created: 2017-04-19T07:59:33.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-05-12T06:06:56.000Z (over 7 years ago)
• Last Synced: 2024-09-15T06:38:33.555Z (2 months ago)
• Topics: dialog, element-ui, nested, vue
• Language: JavaScript
• Homepage:
• Size: 54.7 KB
• Stars: 8
• Watchers: 5
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# element-dialog2

an extension of element-dialog that allow you to use it nested

[![aaa][npm-version]][npm-home]

[npm-version]: https://img.shields.io/npm/v/element-dialog2.svg 'npm-version'

[npm-home]: https://www.npmjs.com/package/element-dialog2 'element-dialog2'

- dependence      

    [element-ui][element]   

    

    [element]: https://github.com/ElemeFE/element "element-ui"

> versions 

- 0.0.5   

    `open` and `close` envents won't be `$emited` repeated.

- 0.0.4   

    currently [email protected]+ with [email protected]+ work correct.

> useage  

 - install

    ```shell

    npm install element-dialog2 --save

    ```

 - use

    ```javascript

    //common 

    var ElDialog2 = require('element-dialog2');

    Vue.component(ElDialog2.name,ElDialog2);

    //import form source

    import ElDialog2 from 'element-dialog2/src/index.js';

    Vue.component(ElDialog2.name,ElDialog2)

    ```

 - code

    ```html

    

        code of $slots.default

        


            code of $slots.footer

        

    

    ```

    ```html

    

        


            this is title

        

        code of $slots.default

        


            code of $slots.footer

        

    

    ```


> ### Attributes

| Attribute     |Compare Element | Description          | Type      | Accepted Values       | Default  |

|---------- |------|-------------- |---------- |--------------------------------  |-------- |

| title     |same| title of Dialog. Can also be passed with a named slot (see the following table) | string    | — | — |

| size      |same| size of Dialog | string    | tiny/small/large/full | small |

| top      |same| value for `top` of Dialog CSS, works when `size` is not `full` | string    | — | 15% |

| modal    |same | whether a mask is displayed | boolean   | — | true |

| modal-append-to-body     |same| whether to append modal to body element. If false, the modal will be appended to Dialog's parent element | boolean   | — | true |

| lock-scroll     |same| whether scroll of body is disabled while Dialog is displayed | boolean   | — | true |

| custom-class      |same| custom class names for Dialog | string    | — | — |

| close-on-click-modal |default value diffrent| whether the Dialog can be closed by clicking the mask | boolean    | — | `false` |

| close-on-press-escape |same| whether the Dialog can be closed by pressing ESC | boolean    | — | true |

| show-close |same| whether to show a close button | boolean    | — | true |

| before-close |same| beforeclose(close) | Function    | — | null |

- beforeClose

    new in `[email protected]+` 

    ```javascript

        beforeClose(close){

            if(...){

                // hook of close

                close();

            }

        }

    ```

> ### Slot

| Name | Description |

|------|--------|

| — | content of Dialog |

| title | content of the Dialog title |

| footer | content of the Dialog footer |