element-dialog2

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

• dependence
  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

  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 [email protected]+

      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 |