艾前端

摘要： mozilla 对于美化 select 元素的样式有这样一段描述（ "用 CSS 美化 Select 元素" ）： 众所周知，select 元素很难用 CSS 进行高效的设计。你可以影响任何元素的某些方面 例如，操纵框模型，显示的字体等，你可以使用 appearance 属性来删除默认的系统外观。 阅读全文

摘要： 在前端开发写CSS时，往往不能很好的把握格式和属性顺序，阅读起来不友好。CSScomb帮助我们解决了这个问题！ CSScomb(CSS梳理)是一个可以用来格式化和排序CSS属性的插件，官网地址http://csscomb.com/。 一、安装CSScomb 要使用CSScomb，需要先安装CSSco 阅读全文

摘要： daterangepicker daterangepicker 是一款日期时间控件，可选择“年，月，日，时，分，秒”，可选择单面板，也可选择双面板(起止时间)。 单面板示例：daterangepicker 单面板 codepen 在线示例 双面板示例：daterangepicker 双面板 code 阅读全文

摘要： 在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法。 说明了自己解决当“每一条曲线的横坐标不相同”时，在各条曲线上，它们的值采用数组类型，也就是 series.data[i] (i 表示该条曲线的索引)的值采用数组类型，第一个值对应 阅读全文

摘要： Echarts 用来做可视化曲线是非常优秀的一个库。建议使用 Echarts 作为项目的可视化图标库时，仔细研究 官方实例，根据需求来选择类似的示例，下载实例模板来开发，节省时间，减少出错，提高效率。 最近在项目中遇到了一个棘手的问题： 1. 在图表中要显示多条曲线 2. 每一条曲线的横坐标(时间轴 阅读全文

摘要： 在某些场景下，我们需要根据兄弟元素的总数来为它们设置样式。最常见的场景就是，当一个列表不断延长时，通过隐藏控件或压缩控件等方式来节省屏幕空间，以此提升用户体验。 为保证一屏内容能展示更多的内容，需要将多余的列表项隐藏。 二级导航菜单：当菜单项为 1 项时，宽度为 100%；当菜单项为 2 项时，每项 阅读全文

摘要： angular 生命周期钩子的详细介绍在 https://angular.cn/guide/lifecycle-hooks 文档中做了介绍。 ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件； ngAfterViewInit() 初始化完组 阅读全文

摘要： 最近在工作中遇到了一些不常用的布局，很多使用 CSS table 属性，并结合 ::before，::after 伪元素完成了，使得 HTML 的结构相对更简单，更具有语义性。当 HTML 结构越清晰，越有规律时，便于阅读，循环套数据时也可以少很多的判断。 一、有下面这样一个设计，上面是标题，中间是 阅读全文

摘要： 一、需求演变及描述： 1. 有一个“客户对公司的总体评价”的字段（evalutation）。字段为枚举类型，0-5，对应关系为：0-暂无评价，1-很差，2-差，3-一般，4-好，5-很好 2. 后来需要根据评分使用星星来表现，一共5颗星，分为实星和空星，例如，当3分时，三颗星星被点亮，即3颗实星2颗 阅读全文

摘要： datetimepocker 是一个日期时间选择器，bootstrap datetimepicker 是 bootstrap 日期时间表单组件。访问 bootstrap-datetimepicker 。 这次在项目中用到日期时间选择器，分享其用法和总结。 一、截图 功能完成后的项目截图 1. 时间起 阅读全文

摘要： Angular 的应用就是一棵组件树，一个页面可以是一个组件，某一页面的一个区块也可以是一个组件。为了弄明白组件及组件树，我将原来做过的一个静态网站进行组件改造。 原项目地址 https://github.com/xinjie-just/tuobei-customer-back-end.git。 原 阅读全文

摘要： 要弄清楚 Angular 的启动过程，就要弄明白 Angular 启动时加载了哪个页面，加载了哪些脚本，这些脚本做了哪些事？ 通过 Angular 的编译依赖文件 .angular-cli.json 可以看到 apps 这个对象类的数组 这个对象中有 root 这个属性，这个是 Angular 应用 阅读全文

摘要： 工欲善其事必先利其器，开发 Angular 项目首先要搭建环境。Angular 的环境搭建包括三个方面，开发环境 WebStorm，命令行工具 Angular CLI，以及 nodejs。 一、安装 nodejs 进入到 nodejs 的官网 https://nodejs.org/en/ 去下载安装 阅读全文

摘要： 首先推荐两款个人比较优秀的控件： 一、https://huangchanghuan.github.io/city-picker/ 这个是由 city-picker 控件(npm 安装方法： npm install city-picker)，地址三级改造而来，数据由京东数据库提供。 优点： 1. 样式 阅读全文

摘要： 通过 CSS 来插入换行的需求在越来越多的场景中运用到，例如我们使用定义列表来呈现一行行的名值对，例如下面一段代码： 我期望达到下面的效果： 我依次做了下面的尝试： 1. 在每一个 <dd> 后面添加了一个 <br> ，让他们换行，可效果却是这样的： 查找资料我明白了，<dd> 本来是块级元素，并且 阅读全文