JNPF快速开发平台的博客

以上就是本文全部内容了，一个还不错的绘制小技巧，最后来回顾一下一些实现要点羽化其实就是将边缘变得模糊，在 CSS 中其实就是创建一个边缘模糊的遮罩，也就是需要一种半透明的渐变。圆形的边缘很好羽化，因为径向渐变可以直接绘制矩形的边缘就稍微复杂点，因为不能直接通过渐变绘制边缘模糊在 CSS 中很好实现，用 box-shadow 就行了可以通过 SVG foreignObject 将 dom 转换成图片SVG 转换成内联形式，好处是减少资源依赖，转换后仍然保持自适应特性。

方法，从函数名可以大概知道是复制文件，三个文件的类型也很清晰，分别是。中很多我们没有用到的内容是不需要的，但是因为我们导入了包含所有。安装完后自动执行的事情就做完了，其实就是根据用户项目中安装的。中响应系统的限制仍旧还是存在的，所以需要提供两个类似。对象的，因为用不上，但是构建工具不知道，所以它会把。版本不手动导出一个呢，原因很简单，因为这个方法在。，但是可以看到前后有两行注释，还记得前面提到的。相比之前的版本，最大区别是不再提供一个单独的。的名称再导出了一遍，这是为啥呢，其实是因为。

Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?虽然可以将函数作为props传递，但这种方式不好。相反，Vue 有一个专门为解决这问题而设计的功能，接下来，我们来看看。

经过调试定位到了签名算法所在的地方，然后取前后若干代码作为特征码，到时候只需要把要插入的内容以合适的方式添加到特征码里面，然后替换原文件中的特征码，就可以达到篡改 JS 的效果了。但是管用就行，对于自家网站来讲，最好的办法当然是在源码里修改。// 不过先返回一个“信标”，注入到 dom 里作为注入 JS 的凭据。// 这个函数要同步返回，因此我们不能在这里篡改文件。// 修改后的特征码，替换到原文中去。，这里就需要一个“传送门”来发送这些内容。你可能注意到了上面的代码片段中，调用的。中过滤带有签名算法的。

当我们想要复制原始值和引用值（对象）时，它们的行为会大不相同。

与静态资源相对应的还有一个动态资源，先让我们看看网上的各位大佬们怎么解释的。静态资源：一般客户端发送请求到web服务器，web服务器从内存在取到相应的文件，返回给客户端，客户端解析并渲染显示出来。动态资源：一般客户端请求的动态资源，先将请求交于web容器，web容器连接数据库，数据库处理数据之后，将内容交给web服务器，web服务器返回给客户端解析渲染处理。其实上面的总结已经很清晰了。静态资源就是直接存放在项目中的资源，这些资源不需要我们发送专门的请求进行获取。

注意不能是el-dialog元素上，否则无法实现 可能是el-dialog使用了teleport组件，导致v-loading无法正常工作。在管理后台开发过程中，涉及到太多的弹窗业务弹窗，其中最多的就是“添加XX数据”，“编辑XX数据”，“查看XX详情数据”等弹窗类型最多。接下来，再处理下底部内容，默认提供两个按钮，分别是“确定”和“关闭”，这个名称也是可以通过。这些弹窗组件的代码，很多都是相同的，例如组件状态，表单组件相关的方法...实例，负责控制弹窗内标题及清空表单中的校验结果，减少多余的代码 ~

这个需求场景很常见，几乎很多项目都会用上，之前项目也实现过，最近刚好有个项目要实现，重新梳理一番。

在工作中我们经常可以通过一些小细节来增加代码可读性，让代码看起来更加优雅。这次我就给大家分享一些一看就会的实用JavaScript优雅小技巧。「难度：🌟」「推荐阅读时长:5min」

在项目开发的过程中，设计师不免会做一些动画效果来提升用户体验。如果当前效果不需要交互，只是用来展示的话，我们完全可以利用 GIF 或者 APNG 来实现效果。不了解 APNG 小伙伴可以看看这篇博客。但是如果当前动画除了展示还需要其他交互，甚至是一个组件需要动画效果，使用图片格式就不合理了。于是我写一个极其简单的 css 动画库。这里直接使用作为 css 动画的依赖库。animate.css 不但提供了很多交互动画样式类，也提供了动画运行速度，延迟，以及重复次数等样式类。

你是一台电脑，你的名字叫 A很久很久之前，你不与任何其他电脑相连接，孤苦伶仃。直到有一天，你希望与另一台电脑 B 建立通信，于是你们各开了一个网口，用一根网线连接了起来。用一根网线连接起来怎么就能"通信"了呢？我可以给你讲 IO、讲中断、讲缓冲区，但这不是研究网络时该关心的问题。如果你纠结，要么去研究一下操作系统是如何处理网络 IO 的，要么去研究一下包是如何被网卡转换成电信号发送出去的，要么就仅仅把它当做电脑里有个小人在开枪吧~反正，你们就是连起来了，并且可以通..

本文已经授权掘金开发者社区公众号独家使用，包括但不限于编辑、标注原创等权益。有一些问题不限于 Vue，还适应于其他类型的 SPA 项目。1. 页面权限控制和登陆验证页面权限控制页面权限控制是什么意思呢？就是一个网站有不同的角色，比如管理员和普通用户，要求不同的角色能访问的页面是不一样的。如果一个页面，有角色越权访问，这时就得做出限制了。一种方法是通过动态添加路由和菜单来做控制，不能访问的页面不添加到路由表里，这是其中一种办法。具体细节请看下一节的《动态菜单》。另一种办法就是所有的

本文是可视化拖拽系列的第三篇，之前的两篇文章一共对 17 个功能点的技术原理进行了分析：编辑器 自定义组件 拖拽 删除组件、调整图层层级 放大缩小 撤消、重做 组件属性设置 吸附 预览、保存代码 绑定事件 绑定动画 导入 PSD 手机模式 拖拽旋转 复制粘贴剪切 数据交互 发布本文在此基础上，将对以下几个功能点的技术原理进行分析：多个组件的组合和拆分 文本组件 矩形组件 锁定组件 快捷键 网格线 编辑器快照的另一种实现方式如果你对我之前的两篇文章不是很

上一篇文章主要讲解了以下几个功能点：编辑器 自定义组件 拖拽 删除组件、调整图层层级 放大缩小 撤消、重做 组件属性设置 吸附 预览、保存代码 绑定事件 绑定动画 导入 PSD 手机模式现在这篇文章会在此基础上再补充 4 个功能点，分别是：14.拖拽旋转15.复制粘贴剪切16.数据交互17.发布和上篇文章一样，我已经将新功能的代码更新到了 github：github 项目地址 在线预览友善提醒：建议结合源码一起阅读，效果更好（这个 DEMO 使用的是

之前在知乎看到一个很有意思的讨论 一行代码可以做什么？那么，一行 CSS 代码又能不能搞点事情呢？CSS Battle首先，这让我想到了，年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是：官方给出一张图形，在给定的 400 x 300 的画布上，能够用越短的代码实现它，分数就越高。注意是，完全一模一样还原。其中，第一题就非常有趣，看看题目：嗯，想一想，如果给定这样一张图形，告诉你 HTML 的大小是 400px x 300px，图片中使用到的颜色是 #

这个问题源自于掘金上的一个留言，一个朋友问到，为什么我下面这段代码的高度过渡动画失效了？伪代码大概是这样：{ height: unset; transition: all 0.3s linear; will-change: height; &.up { height: 0; } &.down { height: unset; }}复制代码把它还原成一个实际的 Demo，效果大概是这样（

今天逛博客网站 -- shoptalkshow，看到这样一个界面，非常有意思：觉得它的风格很独特，尤其是其中一些边框。嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。border 属性谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。除了最常见的 solid，dashed，CSS border 还支持 none，hidden， dotted， double， groove， ridge， inset，

本文属于 CSS 绘图技巧其中一篇。之前有过一篇：在 CSS 中使用三角函数绘制曲线图形及展示动画想写一篇关于 CSS 创造艺术的文章已久，本文主要介绍如何借助 CSS-doodle ，利用 CSS 快速创造美妙的 CSS 图形。中心布局本文的所有技巧都会围绕这个布局展开，属于一类技巧。首先，我们需要这样一种中心布局。简单的 HTML 结构如下：<div class="g-container"> <div class="g-box"></div&g

CSS 中，transition 属性用于指定为一个或多个 CSS 属性添加过渡效果。最为常见的用法，也就是给元素添加一个 transition，让其某个属性从状态 A 变化到状态 B 时，不再是非常直接突兀，而是带有一个补间动画。举个例子：<div></div>复制代码div { width: 140px; height: 64px; transition: .8s transform linear;}div:hover {

本文属于 CSS 绘图技巧其中一篇，系列文章：在 CSS 中使用三角函数绘制曲线图形及展示动画 CSS奇思妙想 -- 使用 CSS 创造艺术将介绍一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到 CSS background 中更为强大的一些用法，并且学会利用 background 相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧，更深层次的

经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。简单的一个截图例子：其实，这里是运用了 CSS 中的 MASK 属性实现的。mask 简单用法介绍之前在多篇文章都提到了 mask，比较详细的一篇是 -- 奇妙的 CSS MASK，本文不对 mask 的基本概念做过多讲解，向下阅读时，如果对一些 mask 的用法感到疑惑，可以再去看看。这里只简单介绍下 mask

本文其实应该叫，Web 用户体验设计提升指南。一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于：急速的打开速度 眼前一亮的 UI 设计 酷炫的动画效果 丰富的个性化设置 便捷的操作 贴心的细节 关注残障人士，良好的可访问性 ...所谓的用户体验设计，其实是一个比较虚的概念，是秉承着以用户为中心的思想的一种设计手段，以用户需求为目标而进行的设计。设计过程注重以用户为中心，用户体验的概念从开发的最早期就开始进入整个流程，并贯穿始终。

1. LightHouseLightHouse 是一个开源的自动化工具，用于改进网络应用的质量。可以将其作为一个 Chrome 扩展程序运行，或从命令行运行。当为 Lighthouse 提供一个要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告。让开发人员根据生成的页面性能的报告，来进行网站优化和完善，提高用户体验。可以参考失败的测试，看看可以采取哪些措施来改进应用。在里面你可以看到它给你各个方面的建议，比如图片、css、js 这些文件的处理，还有 ht

这段时间写了一堆源码解析，这篇文章想换换口味，跟大家分享一个我工作中遇到的案例。毕竟作为一个打工人，上班除了摸鱼看源码外，砖还是要搬的。本文会分享一个使用恰当的数据结构来进行性能优化，从而大幅提高响应速度的故事，提高有几百倍那么多。事情是这样的，我现在供职一家外企，我们有一个给外国人用的线下卖货的APP，卖的商品有衣服，鞋子，可乐什么的。某天，产品经理找到我，提了一个需求：需要支持三层的产品选项。听到这个需求，我第一反应是我好像没有见到过三层的产品选项，毕竟我也是一个十来年的资深剁手党，一般的产品选项好

You-need-to-know-css该项目是 CSS 的各种效果实现，尤其是动画效果。笔者把自己的收获和工作中常用的一些 CSS 小样式总结成这份文档。目前文档一共包含 43 个 CSS 的小样式（持续更新…），所以还是很不错的学习 CSS 的项目来的。比如： 打字效果<style> main { width: 100%; height: 229px; display: flex; justify-content: center;

正文VueVue2.0：Vue2.0 文档 Vue3.0：Vue3.0 文档 Vue-Router：Vue.js 官方的路由管理器。 Vuex：Vue.js 应用程序开发的状态管理模式。 Element-UI：饿了么UI组件库 View UI：一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。 Vuetify：用于构建功能丰富、快速的应用程序。 Buefy-UI： 简单且轻量的UI库。 Quasar: 编写代码一次并同时将其部署为网站、移动应用和/或E

前言想必大多数人在开发 vue 等 SPA 项目都时候都会直接用 vue-cli 等脚手架开发，一是方便省去了好多配置上的功夫，二是 vue-cli 毕竟是久经考验较为成熟的东西，遇到问题也能在网上找到相应解决方案。但是，如果我们要更好地理解脚手架的配置及其构建打包的机制，我们就有必要从零开始，依葫芦画瓢自己配置一个类似于 vue-cli 这样的项目了。在此，我做了以下简单配置，请各位大佬批评指正，并诚心希望能得到大佬的指点，解决文章最后关于 Tree Shaking 导致打包缺失 css 的问题。

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。Plugin 是一个扩展器，它丰富了 webpack 本身，针对是 loader 结束后，webpack 打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听 webpack 打包过程中的某些节点，执行广泛的任务。Plugin 的特点是一个独立的模块 模块对外暴露一个 js 函数 函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply方法

简介这是基于 vue-cli4 实现的移动端框架，其中包含项目常用的配置，组件封装及webpack优化方法，可供快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios + less + postcss-px2rem源码 github.com/Michael-lzg…// 安装依赖npm install// 本地启动npm run dev// 生产打包npm run build复制代码在一两年前，vue-cli3已经声驾到3.0+版本，

vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞！本文主要讲述一些vue开发中的几个高级应用，希望能对大家有所帮助。Vue.use我们使用的第三方 Vue.js 插件。如果插件是一个对象，必须提供install方法。如果插件是一个函数，它会被作为install方法。install方法调用时，会将Vue作为参数传入。该方法需要在...

vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞！本文主要讲述一些vue开发中的实用技巧。监听组件的生命周期比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，常规的写法可能如下： // Parent.vue<Child @mounted="doSome...

vue 作为目前前端三大框架之一，对于前端开发者可以说是必备技能。那么怎么系统地学习和掌握 vue 呢？为此，我做了简单的知识体系体系总结，不足之处请各位大佬多多包涵和指正，如果喜欢的可以点个小赞！Vue 的优缺点是什么优点：低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。 可重用性。你可以把一些视图...

html 篇常用的meta属性设置meta对于移动端的一些特殊属性，可根据需要自行设置<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转<meta name="full-screen" content="yes"> //全屏显示<meta name="browsermode" content="application"> //UC应用模

在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行Vue.use()调用。批量注册指令，新建directives/index.js文件import copy from ...

大家看到这个标题可能会以为小智是不是又写错别字了 ????，响应式高度设计？你认真的吗？ 因为“响应式Web设计”通常是在多个宽度和设备尺寸上检查浏览器。 我们一般通过减小宽度调整水平方向的响应能力，但是我很少看到通过减小浏览器高度来进行垂直响应的考虑。 此时，智米么内心可能有一丝的波动，并带有许些疑问：我们需要降低浏览器的高度吗？ 是的，我们一直探讨一下。当我们在设计网站的时候，不依赖实际数据进行假设是不好的，水平和垂直测试的责任也是非常重要。为什么要测试高度？对于一个设计师来说，一个不合理的

在开发中，了解 JavaScript 和 Promise 基础，有助于提高我们的编码技能，今天，我们一起来看看下面的 10 片段，相信看完这 10 个片段有助于我们对 Promise 的理解。片段1：const prom = new Promise((res, rej) => { console.log('first'); res(); console.log('second');});prom.then(() => { console.log('third');

1. 转字符串const input = 123;console.log(input + ''); // '123'console.log(String(input)); // '123'console.log(input.toString()); // '123'2. 转数字const input = '123';console.log(+input); // 123console.log(Number(input)); // 123console.log(parseIn

1.imagehover地址：https://github.com/ciar4n/imagehover.cssimagehover.css-纯CSS3鼠标滑过图片效果动画库，44种鼠标滑过效果2. ImageTiltEffect地址：https://github.com/codrops/ImageTiltEffectTiltEffect是一款让图像跟随鼠标产生微妙立体倾斜效果的插件，使其有层次感和深度感。3.Magnifier.js地址：https://github.c.

1.三元运算符新手let hungry = true;let eat; if (hungry == true) { eat = 'yes'; } else { eat = 'no';}老手let hungry = true;let eat = hungry == true ? 'yes' : 'no';2.数字转字符串/字符串转数字新手let num = 15; let s = num.toString(); // number to

本教程主要讲解了怎么使用 Jenkins 和 Github Actions 部署前端项目。第一部分是使用 Gitea 配置局域网 git 服务器，再使用 Jenkins 将 Gitea 下的项目部署到局域网服务器。 第二部分是使用 Github Actions 将 Github 项目部署到 Github Page 和阿里云。阅读本教程并不需要你提前了解 Jenkins 和 Github Actions 的知识，只要按照本教程的指引，就能够实现自动化部署项目。PS：本人所用电脑操作系统为 wind