/element-dialog2

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

Primary LanguageJavaScript

element-dialog2

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

aaa

versions

  • 0.0.5
    open and close envents won't be $emited repeated.
  • 0.0.4
    currently vue@2.3.0+ with element-ui@1.3.0+ work correct.

useage

  • install
    npm install element-dialog2 --save
  • use
    //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
    <el-dialog2 title="this is title"  v-if="showed" v-model="showed"
        v-on:close="handleClose">
        <span>code of $slots.default</span>
        <div slot="footer">
            code of $slots.footer
        </div>
    </el-dialog2>
    <el-dialog2   v-if="showed" v-model="showed"
        v-on:close="handleClose">
        <div slot="title">
            this is title
        </div>
        <span>code of $slots.default</span>
        <div slot="footer">
            code of $slots.footer
        </div>
    </el-dialog2>

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 element-ui@1.3.0+
        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