return { // 是否显示弹出层 open: false, test:null, cmps:'task/index.vue' ###动态组件名称...}, //计算单独的组件 computed:{ loader(){ return () => import(`@/views/flowable/${this.cmps...> this.loader(); },) }, methods: { indexMethod() { ///TODO 网络加载 动态就改 this.cmps的地址
在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一， 在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的...， 也就是说如果你有过使用 Canvas 的开发经验你就可以来封装自己的组件。...下面我以一个进度环为例，来探究一下如何使用ht.js封装出一个拓扑组件。 效果图 ?...代码实现 前置知识 自定义组件 除了HT预定义的组件类型外，用户还可以自定义扩展类型，自定义有两种方式： 直接将type值设置成绘制函数：function(g, rect, comp, data...绘制组件 在绘制组件的过程中，我们需要把一些边界条件和特殊情况考虑到，来保持组件的扩展性和稳定性 下面就是一些我的心得 在做了 g 操作的头尾分别使用 save 和 restore ，以此来保障 g
---- 支持每列单独滑动 点击名字选中当前地址 点击蒙层 close响应 传递当前数据 点击确定 confirm响应 传递当前数据 ---- 目录 mixin ==> 混入文件 控制后三列滑动 util...==> 工具文件， 克隆传递过来的数据 getAddress.js //获取数据文件 需要在父组件混入 props visible 控制组件显示隐藏 province 第一列数据 city...第二列数据 county 第三列数据 street 第四列数据 — 每列数据 变量在 getAddress.js 中定义 请确保父组件中不予起冲突 valueData 初始化默认选中数据 数据格式单层对象...注意 每次改变数据 都会出发change响应 点击蒙层与确定会出发各自的事件 并 隐藏组件 使用 父组件中 component 引入 import AddressList from ‘…/…/newComponent...可以定义你自己需要的这里仅示例 getAddressData(data){ //父组件中动态展示 try { this.provinceText= data.rag
首页地址：https://www.hightopo.com/index.html 实现方式 HT 共有八种具有可配置 ToolTip 功能的的视图组件，分别是 ht.graph.GraphView、ht.graph3d.Graph3dView...首先建立一个视图组件（这里我们以 ht.graph.GraphView 为例，其余组件基本与之相同），通过调用组件的 enableToolTip() 方法可以启用 ToolTip 功能，之后创建一个测试用的...使用 HT UI 的 Popover 插件 UI 库是一款功能强大的界面组件库，基于 HT 核心包的优秀框架和 HTML5 先进的 Canvas 机制，具有易上手、高性能、易扩展、组件丰富、跨平台等特点...在这个例子中，添加了三个 UI 中的 Button 组件，并分别设置了三种不同的 Popover。...与前两种使用 UI 自带的组件不同，这里我们自定义了一个 ht.ui.EchartView 组件实现 Echarts 的显示功能，UI 库提供了自定义组件的功能，像上图中的 Button 也可以去自己定义
HT for Web的HTML5树组件有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间...http://www.hightopo.com/guide/readme.html 进入正题，今天用来做演示的Demo是，客户端请求服务器读取系统文件目录结构，通过HT for Web的HTML5树组件显示系统文件目录结构...整体的思路是这样子的，当然这离我们要实现的树组件的延迟加载技术还有些差距，那么，HT for Web的HTML5树组件的延迟加载技术是怎么实现的呢？不要着急，马上开始探讨。...= createData(file, parent); n.a('loaded', true); dm.add(n); }); } 如此，HT for Web的HTML5...树组件延迟加载技术就设计完成了，我在服务器的控制台打印出请求路径，看看这个延迟加载是不是真的，如下图： ?
Demo 链接：https://hightopo.com/demo/comp-knob/ 整体思路 组件参数 绘制旋钮 绘制刻度 绘制指针 绘制标尺 绘制文本 交互效果 1.组件参数 ?...到这就完成了基本的旋钮组件，下面继续做一些细节上的优化。 例如加一些阴影效果，颜色渐变，配色调整等。...', true); dm.a('rectSelectable', true); ht.Default.setCompType('knob',func); //注册组件
HT for Web的HTML5树组件有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间...http://www.hightopo.com/guide/readme.html 进入正题，今天用来做演示的Demo是，客户端请求服务器读取系统文件目录结构，通过HT for Web的HTML5树组件显示系统文件目录结构...我就不多说，大家自己研究去吧； 最重要的是要引入HT for Web的核心包，这个包不引入的话，下面的HT for Web组件就无法使用...整体的思路是这样子的，当然这离我们要实现的树组件的延迟加载技术还有些差距，那么，HT for Web的HTML5树组件的延迟加载技术是怎么实现的呢？不要着急，马上开始探讨。...= createData(file, parent); n.a('loaded', true); dm.add(n); }); } 如此，HT for Web的HTML5
HT for Web（http://www.hightopo.com/guide/readme.html）提供了涵盖通用组件、2D拓扑图形组件以及3D引擎的一站式解决方案，正如Hightopo官网所表达的我们希望提供...讨论前先设定话题的边界，HT是基于HTML5的图形组件库，因此文章的案例更多会涉及HTML和JavaScript语言，但并不局限于Web前端，设计思想上同样适用于任何GUI语言平台。...因此我选择在话题展开之前，先用HT来扩展定制几个应用案例，以便大家了解HT组件及其扩展设计思路。...此例子麻雀虽小五脏俱全，三个部分分别采用三种方式实现了自定义组件，同时不同组件共享同一数据源，在呈现的基础上还支持桌面和移动端的Mouse和Touch的交互，还有不同终端屏幕的组件布局功能。...这样的问题描述完全无法定位根源，到底时后台数据库问题，网络通讯问题，解析数据问题，设置模型问题还是组件封装问题？
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍如何运用QHostInfo...组件实现对主机地址查询功能。...在Qt网络编程中，QHostInfo是一个强大而灵活的组件，用于获取有关主机的信息，包括主机名、IP地址和域名解析等。...，输出效果如下图所示；QHostInfo组件既可以查询自身IP地址信息，也可以实现对特定域名的IP解析，通过使用QHostInfo::lookupHost则可以实现查询特定主机的地址信息，该函数需要传入一个回调...，如下所示我们在回调函数内查询主机所有的IP地址并输出，其实现原理与上述方法相同。
HT for Web的HTML5树组件有延迟加载的功能，这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用，需要获取数据的时候再向服务器发起请求，这样可减轻服务器压力，同时也减少了浏览器的等待时间...进入正题，今天用来做演示的Demo是，客户端请求服务器读取系统文件目录结构，通过HT for Web的HTML5树组件显示系统文件目录结构。...整体的思路是这样子的，当然这离我们要实现的树组件的延迟加载技术还有些差距，那么，HT for Web的HTML5树组件的延迟加载技术是怎么实现的呢？不要着急，马上开始探讨。...= createData(file, parent); n.a('loaded', true); dm.add(n); }); } 如此，HT for Web的HTML5...树组件延迟加载技术就设计完成了，我在服务器的控制台打印出请求路径，看看这个延迟加载是不是真的，如下图： ?
但，我还是不喜欢DOM上太重都是元素，不喜欢庞大包罗万象搞得没有一家能完美实现的标准，另外用XML、Flex的MXML或Sliverlgiht/WPF的XAML来描述图形实在是笨重不灵活，基于HTML5...sunrise', rect: [120, 80, 120, 80] } ] }); 如上代码注册了一个名为'group-sunrise'的新矢量，其由四部分组件...因此HT for Web不仅定义矢量格式、实现了矢量绘制，还提供了矢量编辑工具设计器，用户拖拖拽拽就能绘制出矢量图形，然后导出JSON，注册到HT之后即可使用到所有的HT组件上，注意哦：是所有组件，不仅仅是拓扑...、不仅仅是3D、还有所有通用组件: ?...Cavnas的2D孰优孰劣争论，SVG的确也有highcharts这样不错应用的案例，HT成功实现所有组件采用Canvas设计，而Sencha和Kendoui等流行的通用组件都采用DOM方式堆积也发展的不错
今天我们就来实现一把自定义HTML5表格组件的Renderer和Editor，为了更直观地演示编辑效果，我们正好利用HT for Web强大的HTML5拓扑图组件 首先来瞧瞧效果： ?...按照HT for Web组件的设计惯例，我们需要创建一个Div作为view，在view中包含一个canvas元素，组件内容在canvas上绘制； 2. editor需要与用户有交互，因此，需要在view...用户通过拖拉组件可以改变角度，这个改变是连续的，而且在拖拉的时候有可能鼠标会离开组件区域，要实现离开组件区域也能够正确的改变值，那么这时候就需要调用HT for Web的startDragging()方法...这些就是组件绘制的所有逻辑，但是有一点必须注意，在绘制完组件后，必须调用下restore()方法，因为在initContext()方法中做了一次save()操作，接下来看看具体实现（代码有些长）； setValue...原因很简单，就如第3点种提到的，用户在拖拉组件的时候，有可能拖离了组件区域，这时候只能通过window上的mousemove及mouseup两个事件监听令用户继续操作； // 监听window的mousemove
HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接，配合 AJAX 可以做到无刷新跳转。...pushState 方法 上面的语句实际上用到了 HTML5 的历史记录 API。这套 API 提供一种「人为操纵」浏览器历史记录的方法。 浏览器历史记录可以看作一个「栈」。...但是如果仅仅这样，地址栏是不会改变的，用户无法前进、后退，也无法收藏当前页面或者把当前页面分享给他人；搜索引擎抓取也有困难。这时，就可以使用 HTML5 的 History API 来解决这个问题。...当用户点击前进或后退按钮时，浏览器地址自动被转换成相应的地址，同时popstate事件发生。...例如，你不能把地址改成 Google 的首页。否则不怀好心的人就可以把地址改成网银等关键网站的地址，来迷惑用户了。 但是，URL 允许使用 query string 的形式。
今天我们就来实现一把自定义HTML5表格组件的Renderer和Editor，为了更直观地演示编辑效果，我们正好利用HT for Web强大的HTML5拓扑图组件 首先来瞧瞧效果： ?...按照HT for Web组件的设计惯例，我们需要创建一个Div作为view，在view中包含一个canvas元素，组件内容在canvas上绘制； 2. editor需要与用户有交互，因此，需要在...用户通过拖拉组件可以改变角度，这个改变是连续的，而且在拖拉的时候有可能鼠标会离开组件区域，要实现离开组件区域也能够正确的改变值，那么这时候就需要调用HT for Web的startDragging()方法...这些就是组件绘制的所有逻辑，但是有一点必须注意，在绘制完组件后，必须调用下restore()方法，因为在initContext()方法中做了一次save()操作，接下来看看具体实现（代码有些长）； setValue...原因很简单，就如第3点种提到的，用户在拖拉组件的时候，有可能拖离了组件区域，这时候只能通过window上的mousemove及mouseup两个事件监听令用户继续操作； // 监听window的mousemove
前面已经封装了很多常用、基础的组件了：base-module， 包括了： crash 处理 常用工具类 apk 升级处理 log 组件 logcat 采集 ftp 文件上传 blur 高斯模糊 fresco...这样一来，开发一个简单的 app 所需要的公共基础组件基本都已经封装好了，在这些组件基础上，应该可以快速完成第一版迭代，快速出包。...下一次的计划，也许是封装 OkHttp 的组件，也许是封装个播放器的组件，也可能是封装常用的自定义 View，视情况而定吧。...) { @Override public void onSuccess(String data) { //data 是图片文件保存的目录地址...globalParam("t", String.valueOf(System.currentTimeMillis())) .globalHeader("os", "android"); Github地址
在分布式系统中，由于服务数量巨多，为了方便服务配置文件统一管理，实时更新，所以需要分布式配置中心组件。...在Spring Cloud中，有分布式配置中心组件spring cloud config ，它支持配置服务放在配置服务的内存中（即本地），也支持放在远程Git仓库中。...在spring cloud config 组件中，分两个角色，一是config server，二是config client。
小程序与传统HTML5的区别 小程序刚开放公测，互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联，甚至小程序就是基于HTML5开发。...组件封装不同。 小程序独立出来了很多原生APP的组件，在HTML5需要模拟才能实现的功能，小程序里可以直接调用组件。 【如果大家对程序员，web前端感兴趣，想要学习的，关注一下小编吧。...这里小程序废弃了select组件，考虑到的是这个组件的交互不适合移动场景，最终用picker代替了。...navigator navigator支持相对路径和绝对路径的跳转，默认是打开新页面，当前页面打开需要加redirect; navigator仅支持5级页面的跳转; navigator不可跳转到小程序外的链接地址...，从体验和页面流畅度来说，都会比HTML5要优秀很多。
还是IP地址的方式？...构建项目 我们把之前章节SpringCloud组件：将微服务提供者注册到Eureka服务中心的源码复制一份修改项目名称为hengboy-spring-cloud-eureka-register-away...查看默认方式 我们仍然使用SpringCloud组件：搭建Eureka服务注册中心源码作为服务注册中心(Eureka Server)来完成本章的测试工作。...我们发现跳转地址栏的地址已经使用了我们配置的ip-address参数，地址为：http://127.0.0.1:20001/actuator/info。...SpringBoot配套源码地址：访问码云查看源码、访问GitHub查看源码 SpringCloud配套源码地址(本章源码在这)：访问码云查看源码 与恒宇少年面对面 如果你喜欢恒宇少年的相关文章，
、网络拓扑图组件、3D 组件、矢量图形、各种编辑器等等五法八门的 HTML5 例子盛宴，往往无从下手，为此我打算写个《数百个HTML5例子学习HT图形组件》的系列文章，引导各种电力、电信、工控 SCADA...等不同行业领域用户，学习使用 HT 这全套一站式 HTML5 图形组件。...HT 的拓扑图组件主要基于 HTML5 的 Canvas 技术，拓扑图是电力和电信的叫法，但该组件远不仅仅用于呈现节点和连线，在 HT 里面我们没把该组件狭义的称为 Topology、Network 或...除了混合第三方图形组件库外，HT 图扑还能嵌入 SVG 的图片进行矢量呈现，参见《绘制SVG内容到Canvas的HTML5应用》 ?...拓扑图篇就写这些吧，HT 的拓扑图组件还有非常多的功能，无法在一篇博客中说透，我只能蜻蜓点水的提到大部分拓扑图应用需要关注的功能点，HT 更多的 HTML5 拓扑图功能留给大家去探索吧。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
