Vue.js
文章平均质量分 96
Vue.js 很爽
sp42a
What the web can be
展开
-
开源一个通用的 HTTP 请求前端组件
像 Postman 这样可视化的 HTTP 请求工具是调试 API 不可或缺的利器。Postman 虽好但也越来越重,而且如果要整合到其他工具中,显然 Postman 又不是一个可行的方案。于是我想打造一个简单的前端组件(widget),它是一个标准 Vue 可复用的组件,能够轻易地被整合。整个组件最终界面如下。构建这么一个小组件可以说根本没什么难度,我也是一边仿着 Postman,一边“画界面”,两三天就完事了。当然后续还有很多的想法,很多的功能需要添加。不过前期肯定先出个初版,从最简单的开始。原创 2023-03-09 16:26:33 · 983 阅读 · 9 评论 -
用 TypeScript 写一个轻量级的 UI 框架之十四:Tree 树组件(上)
我们知道 JSON 是 JavaScript 里面的一大利器,特别是构建复杂的树状结构,简单不失强大。可见对于不同类型的树,事前应该要确定清楚何种数据结构。通过 TypeScript 强大的类型系统,可以轻松地为我们去表述那些复杂的 JSON 结构。一旦确定好结构如何,剩下的解析、转换工作就简单多了。总的来说,解析树结构无非遍历工作。而遍历来说大概也不会太难,比较多使用到的是函数的递归而已。还有一点就是离不开栈(Stack)、队列(Queen)的应用。原创 2021-04-01 02:54:29 · 1243 阅读 · 0 评论 -
用 TypeScript 写一个轻量级的 UI 框架之十二:Grid 表格组件(上)
Grid 其实就是表格 Table,不过窃以为英文中 Grid 比 table 来得高大上。最开始认识 Grid 控件是 ExtJS UI 库,它有很成熟的设计模型支持着,缺点就是性能不太好,使用比较繁琐。如今笔者也想学着来设计一个 Grid,发现也没想象中的困难,主要还是发挥来自 Vue.js 的威力。原创 2021-03-24 16:53:32 · 867 阅读 · 0 评论 -
用 TypeScript 写一个轻量级的 UI 框架之十一:列表组件综述
大量结构化数据的一种主要输出形式就是列表,——本文就打算介绍列表组件的设计与使用。原创 2021-03-23 15:46:12 · 511 阅读 · 0 评论 -
用 TypeScript 写一个轻量级的 UI 框架之十:表单控件之日历组件
开门见山,先说明一下这日历组件的核心算法不是笔者原创,而是来自于早期大神 cloudgamer 的作品,在这里向前辈致敬! 组件本身的原理不算复杂难懂,也就寥寥 140 行代码(原 JavaScript),足以展现日历渲染的原理。原创 2021-02-25 00:04:25 · 868 阅读 · 2 评论 -
用 TypeScript 写一个轻量级的 UI 框架之九:表单控件之文件上传
文件上传,无论前端还是后端,笔者都重写过好几次了,一直不太满意。这次前端的用 TypeScript 再写一次,发现旧的问题不少,——幸好在这次重构中,找到比较理想的办法来处理。原创 2021-02-24 18:37:06 · 703 阅读 · 0 评论 -
用 TypeScript 写一个轻量级的 UI 框架之八:表单控件之富文本编辑器
在很多开发者看来,富文本编辑器的编写是一件很神秘或者复杂的事情。神秘倒没有,复杂的话——也大可不必那样认为——它的基本原理并不复杂,可是说十分简单。网上有不少的教程和资源,参考一些也不错,至于源码,大多写得比较复杂,不利于说明原理。于是我想在本文中逐步演示一个“羽量级”富文本编辑器的产生,来简单勾勒其实现的过程和原理。原创 2021-02-23 14:02:12 · 1268 阅读 · 0 评论 -
用 TypeScript 写一个轻量级的 UI 框架之七:表单的处理
表单(Form)首先是一些零散的样式、布局 CSS 之类的问题,其次包含表单验证、序列化的功能,最后就是“无刷新”表单(即 AJAX 提交)。至于围绕表单的各种千变万化的控件,如日历控件、HTML 编辑器和文件上传等组件,它们篇幅较大,另文再述。原创 2021-02-15 10:59:52 · 1041 阅读 · 0 评论 -
TypeScript + VS Code 应用技巧三则
开发 Vue 组件过程中,偶有所得,不敢独享,以飨读者。原创 2021-02-14 16:25:24 · 312 阅读 · 4 评论 -
关于 Vue + TypeScript 组件化的一点思考
前面说过,组件化是使用 Vue 引入之后带来的一大优点。未有 Vue 之前——那个年代——苦苦寻思没有一个好的组件化方案。在当初 JavaScript 连类都尚未健全的情况下,真是费煞了苦心,最简单的“对象”是有了,可那不能构建复杂的大型 UI 系统,颗粒度太低了。对象、组件的关系,一小一大分别自然很清楚。那么加多一个“类 Class”呢?你能理清楚这些名词的关系吗?面向对象与组件有什么区别与联系呢?其实不清楚没啥关系。码多了,你自然明白:)。关于 JS Class,我写过不少博文(https://blo原创 2021-02-02 16:52:32 · 687 阅读 · 6 评论 -
用 TypeScript + Vue.js 打造一个渐现 Banner 组件
渐现 Banner,也是轮播图的一种。现在我们用 Vue.js 组件封装它,而且是 TypeScript 语法的。本组件不依赖其他库或者函数。原创 2020-12-31 19:45:51 · 376 阅读 · 0 评论 -
六行代码写个 Tab 控件
其实之前的方法都不是太聪明(例如我写过的《Vue Tab 组件再探究》),个人认为这种方法,区区六行代码,搞定!changeTab = function(e) { var old = aj('.show'); old.classList.remove('show'); old.classList.add('hide'); var el = aj('.config-tab-' + e.selectedIndex); el.classList.remove('hide'); el.classL原创 2020-07-18 22:33:25 · 288 阅读 · 0 评论 -
调用百度统计 API
百度统计为用户提供了 API 接入的方式,使得用户可以自定义 UI 而无须进入百度统计网站。百度统计存在两种账号体系:百度商业账号和百度账号,前者就是统计早期的用户账号,本文基于百度商业账号,说明如何接入统计 API。原创 2020-06-27 01:04:40 · 5962 阅读 · 19 评论 -
Vue Tab 组件再探究
初学 Vue 的时候,发现用 Vue 来写 Tab 组件是如此简单,利用“数据驱动”的思路还真和 js 控制 dom 不一样。请见下面第一版的代码,没有 js dom 那样 for 遍历各元素控制显示或隐藏,而是用 {‘selected’: index === selected} 控制样式,非常简洁。第一版的 tab 组件// 简单选项卡Vue.component('aj-simple-ta...原创 2020-03-22 23:00:46 · 1334 阅读 · 0 评论 -
Vue 组件放送之下拉省市区联动
省市区联动,又是一个常见的组件。一般来说,通过 `select` 元素的 `onchange` 事件来实现,难度不大。而如今换作 Vue 框架下,该如何实现呢?这正事我们接下来要探讨的,——但先请容我说,甚至比旧方法更简单!——这就是来自数据驱动——MVVM 的威力!原创 2019-01-24 10:54:07 · 4284 阅读 · 0 评论 -
制作常见的消息提示框
该控件的效果是从页面右上方徐徐显示出一个消息框,如下图所示。 然后暂时停留若干时间,完毕后自动收缩。在线演示地址:https://framework.ajaxjs.com/framework/ui_demo/form/msg.jsp首先,了解 HTML 结构如下:div class="topMsg">暮從碧山下,山月随人歸。卻顧所來徑,蒼蒼橫翠微。相攜及田家,童稚開荊扉。綠竹入幽原创 2018-01-24 23:57:12 · 2392 阅读 · 0 评论 -
前端新知
Vue点击事件解决300ms问题https://www.cnblogs.com/JRliu/p/5972068.htmlhttps://github.com/qingyangmoke/vue-plugin-touch/blob/master/src/VueTouch.jshttps://blog.csdn.net/qq_34986769/article/details/62046...原创 2018-09-12 22:18:39 · 462 阅读 · 0 评论 -
Vue 组件放送之文件上传
文件上传组件是常见的 Web 组件。HTML 提供了 input file 原始上传组件,我们在此基础上利用各种 HTML5 特性来封装该组件,而不是通过内嵌一个隐藏 Flash 上传(古老的做法)。又因,利用了 vue 的 MVVM 和组件化的强大特性,这一切都变得简单轻松。先谈谈组件的需求——一般图片上传的场景较多,故该组件除了任意文件上传,还特意针对图片上传来开发:可以无刷新上传可以无...原创 2019-01-22 23:43:26 · 2060 阅读 · 5 评论