DSkin封裝的WebUI開發模式開發桌面應用，使用Vue很方便。使用起來有點像WPF 下麵用 element-UI 做個簡單的例子。 運行效果；可以自己根據需求改佈局效果。 主框架的element-UI 模板代碼 其中 activeIndex 是模板中定義的一個屬性， handleSelect 是 ...
DSkin封裝的WebUI開發模式開發桌面應用，使用Vue很方便。使用起來有點像WPF
下麵用 element-UI 做個簡單的例子。
運行效果；可以自己根據需求改佈局效果。
主框架的element-UI 模板代碼
<div id="page" class="shadow"> <el-container> <el-header onmousemove="if(event.button == 0){ MoveWindow(); }" ondblclick="Command_MaxOrNor()"> <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">DSkin WebUI開發</el-menu-item> <el-submenu index="2"> <template slot="title"> 我的工作台 </template> <el-menu-item index="2-1">選項1</el-menu-item> <el-menu-item index="2-2">選項2</el-menu-item> <el-menu-item index="2-3">選項3</el-menu-item> <el-submenu index="2-4"> <template slot="title"> 選項4 </template> <el-menu-item index="2-4-1">選項1</el-menu-item> <el-menu-item index="2-4-2">選項2</el-menu-item> <el-menu-item index="2-4-3">選項3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4">訂單管理</el-menu-item> <span index="5" id="minimize" class="sys-btn" onclick="Command_Min();" onmousemove="event.stopPropagation()">0</span> <span index="6" id="maximize" class="sys-btn" onclick="Command_MaxOrNor()" onmousemove="event.stopPropagation()">1</span> <span index="7" id="close" class="sys-btn" onclick="Command_Close()" onmousemove="event.stopPropagation()">r</span> </el-menu> </el-header> <el-container> <el-aside width="200px"> <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-submenu index="1"> <template slot="title"> <i class="el-icon-location"></i> <span>導航一</span> </template> <el-menu-item index="1-1" class="open-page" href="button.html">按鈕</el-menu-item> <el-menu-item index="1-2" class="open-page" href="form.html">表單</el-menu-item> <el-menu-item index="1-3" class="open-page" href="table.html">表格</el-menu-item> <el-submenu index="1-4"> <template slot="title"> 選項4 </template> <el-menu-item index="1-4-1">選項1</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="2"> <i class="el-icon-menu"></i> <span slot="title">導航二</span> </el-menu-item> <el-menu-item index="3" disabled> <i class="el-icon-document"></i> <span slot="title">導航三</span> </el-menu-item> <el-menu-item index="4"> <i class="el-icon-setting"></i> <span slot="title">導航四</span> </el-menu-item> </el-menu> </el-aside> <el-main> <iframe frameborder="0" allowtransparency="true" src="button.html"></iframe> </el-main> </el-container> </el-container> </div>
其中 activeIndex 是模板中定義的一個屬性， handleSelect 是Select事件綁定的方法，我們可以直接在C#中定義這兩個，它會自動綁定過來。不需要手動寫JS來new 一個Vue對象綁定，這些在DSkin中自動完成了的。
//這個C#代碼相當於 JS的 var page=new Vue({el:"#page",data:{ activeIndex:"1",},methods:{handleSelect(a,b,c){ }}});
public class mainframe : DSkin.Forms.MiniBlinkPage { string _activeIndex = "1"; public string activeIndex { get { return _activeIndex; } set { OnPropertyChanged(value, ref _activeIndex); } } [JSFunction] public void handleSelect(string a, JsValue b, JsValue c) { } }
右下角的內容，我採用的是iframe框架頁面來做，這樣做方便C#綁定以及 業務邏輯分離到單獨C#類中。
簡單的表格添加數據的例子
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery-1.9.0.min.js"></script> <script src="js/vue.js"></script> <link href="css/element.css" rel="stylesheet" /> <script src="js/element.js"></script> <link href="css/main.css" rel="stylesheet" /> </head> <body onload="$('body').addClass('body-active');"> <div id="page"> <el-table :data="Data" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> </el-table-column> <el-table-column prop="address" label="地址"> </el-table-column> </el-table> <el-button onclick="AddData()">添加數據</el-button> </div> </body> </html>
其中有一個添加數據的按鈕，點擊按鈕會添加一行數據到表格中
public class table : MiniBlinkPage { public table() { Data.Add(new data { date = "sdaf", name = "dgsda", address = "hfdgdsfa" }); Data.Add(new data { date = "sdaf測試", name = "dgsda", address = "hfdgdsfa" }); } MiniBlinkCollection<data> data; //模板中綁定的數據 public MiniBlinkCollection<data> Data { get { if (data == null) { data = new MiniBlinkCollection<data>(this); } return data; } }
[JSFunction]//按鈕調用的添加數據的方法，點擊按鈕添加一行，同時會更新UI顯示出來 public void AddData() { Data.Add(new data { date = "測試數據", name = "3sda", address = "gdsa" }); Data.SaveChanges(); } } public class data { public string date { get; set; } public string name { get; set; } public string address { get; set; } }
運行效果
總體來說還是很簡單，很方便的，有豐富的前端資源，可以快速開發出自己想要的效果
