参考资料地址1:https://pan.baidu.com/s/1ZlkRAbUu1mQE5JEAlbuTvw 提取码: 24b2 参考资料地址2:https://share.weiyun.com/7RUYskT6 密码:adbvfp
WPF概念: WPF即Windows Presentation Foundation,翻译为中文“Windows呈现基础”,是微软推出的基于Windows Vista的用户界面框架,属于.NET Framework 3.0的一部分。它提供了统一的编程模型、语言和框架,真正做到了分离界面设计人员与开发人员的工作;同时它提供了全新的多媒体交互用户图形界面。
WPF特点 1、统一的编程模型 WPF提供的编程模型统一普通控件、语音、视频、文档3D等技术,这些媒体类型能够统一协调工作,降低了我们的学习成本。 2、与分辨率无关 WPF是基于矢量绘图的,因此它产生的图形界面能够支持各种分辨率的显示设备,而不会像WinForm等在高分辨率的现实设备上产生锯齿。 3、硬件加速技术 WPF是基于Direct3D创建。在WPF应用程序中无论是2D还是3D的图形或者文字内容都会被转换为3D三角形、材质和其他Direct3D对象,并由硬件负责渲染,因此它能够更好的利用系统的图像处理单元GPU,从硬件加速中获得好处。 4、声明式编程 WPF引入一种新的XAML语言(Extensible Application Markup Language)来开发界面。使用XAML语言将界面开发以及后台逻辑开发很好的分开,降低了前后台开发的耦合度,使用户界面设计师与程序开发者能更好的合作,降低维护和更新的成本。 5、易于部署 WPF除了可以使用传统的Windows Installer以及ClickOnce方式来发布我们的桌面应用程序之外,还可以将我们的应用程序稍加改动发布为基于浏览器的应用程序。
现在很多WPF项目都开源了,不过反编译工具还是少不了的。比起dnSpy和JustDecompile,我更喜欢ILSpy,因为有很多BAML只有ILSpy能反编译出来。
为何从 .NET Framework 升级 将应用程序从 .NET Framework 升级到 .NET 时,你将受益于: 性能更好 新的 .NET API 最新语言改进 改进的辅助功能和可靠性 更新的工具及其他
通过 WPF,可以使用标记和代码隐藏开发应用程序,这是 ASP.NET 开发人员已经熟悉的体验。 通常使用 XAML 标记实现应用程序的外观,同时使用托管编程语言(代码隐藏)来实现其行为。 这种外观和行为的分离具有以下优点: 降低了开发和维护成本,因为特定于外观的标记与特定于行为的代码不紧密耦合。 开发效率更高,因为设计人员在实现应用程序外观的同时,开发人员可以实现应用程序的行为。
创建 src/views/chart/components/table-sheet/components/s2.vue 作为图表渲染组件 <el-card :body-style="{ padding: 0 }"
<div class="container" ref="target">s2</div>
在 src/api/chart.js 中创建数据获取方法:
在 user-manage 中获取对应数据
根据数据利用 el-table 和 el-pagination 渲染视图
<el-pagination
class="pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[2, 5, 10, 20]"
:page-size="size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</el-card>
在 src/views/chart/components/table-sheet/components/s2.vue 中,监听 data 的变化,触发 render 函数: onMounted(() => { // 配置对象 const s2Options = { ... } // 生成 S2 实例,数据对象置为 null s2 = new TableSheet(target.value, {}, s2Options) })
/**
图标渲染函数
/ const renderChart = () => { // 数据对象 const s2DataCfg = { ... }
// 更新数据 s2.setDataCfg(s2DataCfg) // 渲染视图,传入 true 表示数据发生了更新 s2.render(true) }
/**
- 监听数据变化
- / watch( () => props.data, () => { renderChart() } )