Vue EasyUI 對(duì)話框

2020-06-24 11:50 更新

對(duì)話框( Dialog )是一個(gè)特殊類型的窗口。它的頂部有一個(gè)工具欄,底部有一個(gè)按鈕欄。 對(duì)話框( Dialog )在默認(rèn)情況下,只有一個(gè)顯示在右側(cè)的關(guān)閉工具。用戶可以自行配置對(duì)話框行為以顯示其他工具。

屬性列表

名稱 數(shù)據(jù)類型 作用描述 默認(rèn)值
title string 對(duì)話框標(biāo)題。 null
border boolean 是否顯示邊框。 false
borderType string 定義對(duì)話框邊框類型??蛇x值為:thin,thick,none。 thick
closable boolean 是否顯示關(guān)閉按鈕。 true
modal boolean 對(duì)話框是否是模態(tài)對(duì)話框。 false

事件列表

名稱 參數(shù) 作用描述
open none 對(duì)話框打開(kāi)時(shí)觸發(fā)。
close none 對(duì)話框關(guān)閉時(shí)觸發(fā)。

方法列表

名稱 參數(shù) 返回值 作用描述
open none void 打開(kāi)對(duì)話框。
close none void 結(jié)束對(duì)話框。
moveToTop none void 對(duì)話框移動(dòng)到屏幕上方。
center none void 在屏幕上居中顯示對(duì)話框。
hcenter none void 對(duì)話框只能水平居中。
vcenter none void 對(duì)話框只能垂直居中。

注:
- 繼承: Panel 。

使用方法

<Dialog ref="d1"
        :title="'Draggable And Resizable'"
        :dialogStyle="{width:'400px',height:'200px'}"
        :modal="true"
        :draggable="true"
        :resizable="true">
    <p style="text-align:center;margin:50px 0;font-size:16px">Welcome to W3Cschool!</p>
</Dialog>

  • 參考圖例:

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)