dotnet html 桌面开发,用HTML，Vue+element-UI做桌面UI

dskin封装的webui开发模式开发桌面应用，使用vue很方便。使用起来有点像wpf

下面用 element-ui 做个简单的例子。

运行效果；可以自己根据需求改布局效果。

主框架的element-ui 模板代码

class="el-menu-demo"

mode="horizontal"

@select="handleselect"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

dskin webui开发

我的工作台

选项1

选项2

选项3

选项4

选项1

选项2

选项3

消息中心

订单管理

0

1

r

class="el-menu-vertical-demo"

background-color="#545c64"

text-color="#fff"

active-text-color="#ffd04b">

导航一

按钮

表单

表格

选项4

选项1

导航二

导航三

导航四

其中  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#类中。

简单的表格添加数据的例子

添加数据

其中有一个添加数据的按钮，点击按钮会添加一行数据到表格中

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;

//模板中绑定的数据

public miniblinkcollection data

{

get

{

if (data == null)

{

data = new miniblinkcollection(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; }

}

运行效果

总体来说还是很简单，很方便的，有丰富的前端资源，可以快速开发出自己想要的效果