前端组件

周末好，今天给大家带来一款接地气的环形进度条组件 vue-awesome-progress 。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下： 我的第一反应还是找现成的组件，市面上很多组件都实现了前3点，独独没找到能画进度圆点的组件，不然稍加定制也能复用。既然没有现成的组件，只有自己用 vue + canvas 撸一个了。 效果图 先放个效果图，然后再说下具体实现过程，各位看官且听我慢慢道来。 安装与使用 源码地址 ，欢迎 star 和提 issue 。 安装 npm install --save vue-awesome-progress 使用 全局注册 import Vue from 'vue' import VueAwesomeProgress from "vue-awesome-progress" Vue.use(VueAwesomeProgress) 局部使用 import VueAwesomeProgress from "vue-awesome-progress" export default { components: { VueAwesomeProgress }, // 其他代码 } webpack配置 由于当前版本发布时，未进行 babel 编译，因此使用时需要自行将 vue

Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件，来了个大汇总，方便查找使用，便于工作和学习。很全的vue插件汇总，赶紧收藏下吧！ github上的vue汇总 https://github.com/vuejs/awesome-vue#qr-code 一、UI组件及框架 　　element - 饿了么出品的Vue2的web UI工具套件 　　mint-ui - Vue 2的移动UI元素 　　iview - 基于 Vuejs 的开源 UI 组件库 　　vux-ui -Vue.js 移动端 UI 组件库 　　Keen-UI - 轻量级的基本UI组件合集 　　vue-material - 通过Vue Material和Vue 2建立精美的app应用 　　muse-ui - 三端样式一致的响应式 UI 库 　　vuetify - 为移动而生的Vue JS 2组件框架 　　vonic - 快速构建移动端单页应用 　　vue-blu - 帮助你轻松创建web应用 　　vue-multiselect - Vue.js选择框解决方案 　　VueCircleMenu - 漂亮的vue圆环菜单 　　vue-chat - vuejs和vuex及webpack的聊天示例 　　radon-ui -

Create by jsliang on 2018-9-17 17:58:56 Recently revised in 2018-11-19 08:19:13   Hello 小伙伴们，如果觉得本文还不错，记得给个 star ， 你们的 star 是我学习的动力！ GitHub 地址 写在前面  首个微信小程序实践记录:  工作量: PSD 18 张 (导出的 JPG 30 张)  耗时：12 个工作日  总结1: 在页面制作商，需要 3 周工作日（工作 15 天）搞定，前后端对接口另计。实际上，12 个工作日可以搞定所有页面，但是应该往前铺 1.5D 熟悉框架，往后铺 1.5D 整理代码。当然每个人的耗时可能不同，可根据个人实际情况进行调整。  总结2：在 API 调用上，根据接口数量可能需要 7-12 个工作日进行 API 调用，难点表现在： 1. 接口不够丰富，数据量不足； 2. 接口数据不够正式真实，跟前面的假数据相差太大； 3. 接口可能没法正常调用 等原因。故因根据小程序业务逻辑进行工作时长的报备。   这里有 jsliang 微信小程序开发中遇到的所有坑，以及在填坑过程中的一些个人经验。jsliang 利用这篇教程存储一些常用的微信小程序开发技巧，方便查找。它可能教不了你什么，但至少能省下你百度的功夫。   请结合 《目录》 和 《返回目录》 来进行跳转

uni-app 开发微信小程序 前言 9月份，开始开发微信小程序，也曾调研过 wepy / mpvue ，考虑到后期跨端的需求，最终选择使用了 uni-app ，本文主要介绍如何使用 uni-app 搭建小程序项目，以及自己对框架的补充，包括封装 request 接口，引用 color-ui ,动态设置底部 tab 页等，详情见下文 uni-app 介绍（官网） uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS 、 Android 、 H5 、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。 即使不跨端， uni-app 同时也是更好的小程序开发框架。详见 评测 好处如图： 我使用 uni-app 框架主要用来开发微信小程序，我使用过程中感觉的好处是： uni-app 框架使用的开发工具 HBuilderX ， HBuilderX 内置相关环境，开箱即用，无需配置 nodejs ， 需要什么插件可直接下载，测试、打包、发布特别方便。 uni-app 采用 Vue.js 语法，基本支持 vue 大部分语法（ vue 的动态组件 component 不支持）。 PC 端使用 vue 封装的一些 js 方法，以及建构思想，可直接移植到 uni-app 中，比如：本人 pc 项目中 api 接口 js 文件

Angular Material 的设计之美 Ng-Matero 0.3 已发布，新增 module schematic 以及 page schematic，详见 README 前言 Angular Material 作为 Angular 的官方组件库，无论是设计交互还是易用性都有着极高的质量。正如官方所说其目的就是构建基于 Angular 和 TypeScript 的高质量组件库。 官方列举了如下几点来解释“高质量”的含义。 国际化和可访问性，以便所有用户都可以使用。 不会让开发人员感到困惑的简单 API。 在各种各样没有 bug 的用例中按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范的范围内进行定制。 将性能开销降至最低。 代码简洁，文档友好，可以作为 Angular 开发人员的一个例子。 Material Design 作为一个非常流行的设计语言，它有多个版本的实现。React 版的 Material Design 有着很高的人气，大家可以自行对比，我就不赘述了，以免引起无谓的争吵，进而扯到框架层面。我可以说一下自己的感受，Angular Material 的交互更加流畅，细节做的更好。 Angular Material 组件库虽然很优秀，但是却被戴上了只适合做 C 端界面的帽子。这也是我刚开始不敢选择 Angular

element UI表格排序sortable最简单的按大小排序，需要添加prop,不然无法使用 表格后面增加的sortable没有作用 解决办法：没有给表格添加prop属性 <el-table-column align="center" label="闸门名称" prop='gatename' sortable> <template slot-scope="scope"> <span>{{scope.row.gatename}}</span> </template> </el-table-column> 表单清空没有效果，也不是提示报错的原因 解决方法：model中绑定的数据字段和Dom里prop的数据字段是不是完全一致 tagview 下拉关闭菜单窗口对不上 侧边栏 顶部固定定位 偏移距离引起的 解决办法：下拉关闭菜单事件x要减去想对应的距离 组件内的样式优先级大于外链全局样式 比如在一个页面里写了一个类名+样式，在其它页面也要用到这个类名，在其它页面第一次刷新时，样式不起作用，而要在设置样式的页面 刷新后，其它页面的样式才会被渲染出来 解决办法： 把样式写在全局文件index里面 styles---index.scss Dialog 对话框 Vue开发中出现对话框被遮罩层挡住问题解决方案 解决办法：在el-dialog 标签上增加这个属性 :modal-append-to

　　我一直在做中小型项目，这些项目的业务逻辑相对比较简单，一直没有专门的把model层抽出来，因为如果面对的是node中间层，他已经把所有的业务逻辑梳理了一边并提供给我一个标准的接口，如果我把model层在抽出来的话，只是在api层上面再封装一下，本身没有任何意义，但是最近开发一个日历板组件改变了我之前的想法， 　　在开发日历板组件的时候，日历板组件需要面对不同的业务场景，但是这些业务场景在视图操作上是一致的，我针对这种情况的设计是：开发一个通用的、面向任何场景、不考虑具体业务场景的、输出数据尽量多且全、功能尽量丰富、定制化选项多的一个组件，在开发完这个组件之后，我又针对具体业务场景编写了一个日历板组件扩展库，该库可针对具体业务场景做适配，具体用法是：使用方先确定自己的业务场景，然后引入指定的扩展库，然后使用扩展库将业务数据转换成组件想要的格式，然后转递给组件，同样在接收组件输出的数据的时候，使用具体的扩展库的转换方法，将输出数据转换为具体业务场景想要的数据格式，这样做的好处是： 　　　　1：随着业务的不断迭代，组件本身不需要更改，只需要修改扩展库即可，除非是大的功能升级 　　　　2：通过扩展库的方式，日历板组件可以适配任何业务场景，因为只是增加一个扩展库而已 　　 　　在这里 组件相当于视图层，而扩展库相当于中间层，具体的业务场景相当于model层（在这里 是api层）

抉择系列：在技术开发的过程中我们会面临着各种各样的抉择，我们在不同情境下该如何选择恰当的技术，这是本系列文章想要解决的问题。 在 React 开发的过程中我们常常会遇到一些抉择，下面我将选取其中一些个人认为重要的抉择来一一分析。但请记住以下所说的都只是的建议，可能有一些方面也没有考虑到，大家还是需要依据实际情况自己选择最合适的，切勿随波逐流。 抉择 1：开发环境搭建 当开始React开发之前，你或你的团队必须先考虑选择什么样的开发环境，先愉快的呈上群众的选择图。 通用场景建议使用 create-react-app ，它将满足你大部分的开发需求。如果默认配置不能满足你的需求，运行 npm run eject 按需修改你的配置吧（温馨提示：此过程式不可回退的）。 其他可替代 Gatsby 适用于开发静态网站 Next.js 适用于前后端同构方案 如果以上皆不能满足你的需求时，亲，自己动手，丰衣足食。 抉择 2：类型 JavaScript 是弱类型语言，你可能忽视类型检查，也可能需要引入类型检查。下图是群众的选择图，你将如何选择？ 如果你懒得折腾，那 prop-types 可以满足你的类型验证，也会避免大部分的类型问题。 如果你喜欢折腾，追求完美，没有问题还有下面两种选择： TypeScript JavaScript 的超集，最终可编译成清晰与整洁的原生JavaScript代码.

　1、背景 　　　　平时我们在书写form表单时，经常都是手动的去写一些input标签，让用户输入一些功能，进行一些校验的判断，等等。Django中的form表单就能够帮我们去实现这些功能，比较便捷。 　2、Django form表单的功能 　　　　　　1、生成页面可执行的HTML标签 　　　　　　2、对应户的数据进行校验 　　　　　　3、保留上次输入的内容 3. 用Form表单实现 1.先写一个 Form类 class Myform(forms.Form): user = forms.CharField( max_length=30, min_length=6, required=True, error_messages={'max_length': '太长了', 'min_length': '太短了', 'required': '不能为空'}, ) # required True不可以空 CharField(约束条件 属性等) 例如min_length max_length 会给name前边生成一个lable标签 pwd = forms.CharField( max_length=30, min_length=6, error_messages={'max_length': '太长了', 'min_length': '太短了'}, ) 2.写视图函数 def index2

转载自：https://www.cnblogs.com/loveyt/p/10905662.html vue Router——基础篇 1.导航守卫 正如其名， vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。 记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫 全局前置守卫 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中 每个守卫方法接收三个参数： to: Route : 即将要进入的目标 路由对象 from: Route : 当前导航正要离开的路由 next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。 next() : 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的) next(false) : 中断当前的导航