element dialog2

要素ダイアログ2

ネストして使用できるようにする element-dialog の拡張機能

• 依存
  要素 ui

バージョン

• 0.0.5
  openイベントとcloseイベント$emited繰り返されません。
• 0.0.4
  現在、[email protected]+ と [email protected]+ は正しく動作します。

使用法

• インストール

  npm install element-dialog2 --save

• 使用

   //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 )

• コード

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

属性

属性	要素の比較	説明	タイプ	受け入れられる値	デフォルト
タイトル	同じ	ダイアログのタイトル。名前付きスロットを使用して渡すこともできます (次の表を参照)	弦	—	—
サイズ	同じ	ダイアログのサイズ	弦	小さい/小さい/大きい/いっぱい	小さい
トップ	同じ	ダイアログ CSS のtopの値、 sizeがfullでない場合に機能します	弦	—	15%
モーダル	同じ	マスクが表示されるかどうか	ブール値	—	真実
モーダルボディへの追加	同じ	body要素にモーダルを追加するかどうか。 false の場合、モーダルはダイアログの親要素に追加されます。	ブール値	—	真実
ロックスクロール	同じ	ダイアログ表示中に本文のスクロールを無効にするかどうか	ブール値	—	真実
カスタムクラス	同じ	Dialog のカスタム クラス名	弦	—	—
クリック時に閉じるモーダル	デフォルト値が違う	マスクをクリックしてダイアログを閉じることができるかどうか	ブール値	—	false
閉じる、押す、エスケープする	同じ	ESC キーを押してダイアログを閉じることができるかどうか	ブール値	—	真実
ショークローズ	同じ	閉じるボタンを表示するかどうか	ブール値	—	真実
閉店前	同じ	閉じる前(閉じる)	関数	—	ヌル

• beforeClose new in [email protected]+

      beforeClose ( close ) {
          if ( ... ) {
              // hook of close
              close ( ) ;
          }
      }

スロット

名前	説明
—	ダイアログの内容
タイトル	ダイアログタイトルの内容
フッター	ダイアログフッターの内容