分析v-clickoutside源码
如何调试源码先创建一个vue2的项目，对于直接修改使用npm下载的依赖包中的源码代码进行调试是不行的，因为项目中使用的是编译后的element组件代码，也就是lib文件夹下的代码。 所以正确的调试步骤如下： 进入项目文件夹中拉取element-ui源码，git clone https://github.com/ElemeFE/element.git 到源码的文件夹中，使用npm i完成依赖下载
实现点击非目标指令
需求满足以下一个条件即可：在鼠标抬起和按下时的元素为非指令元素自身或子元素时就触发事件 效果 打开控制台查看 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253<script>import clickoutside from "
对话框组件（FDialog）
介绍要使用对话框时还要引入其他库，太麻烦了，就自己手撕了一个，凑合着用 使用 1234567891011121314151617181920212223242526272829303132333435<script>import FDialog from "@/pages-auto/FDialog.vue";export default { com
环形进度条组件（FProgress）
介绍使用svg分段实现，直接上使用 使用 vue2演示： 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970<script>import FProgress from &qu
封装一个加密存储函数
介绍基于对数据过期的判断封装和加密功能，主要以key-value形式存储数据，支持定义过期时间以及浏览器刷新后还是否存在（是否存储在localStorage），此工具加密基于crypto-js，没有请先安装 1npm i crypto-js crypto-js官方文档：https://cryptojs.gitbook.io/docs/ 使用 123456789101112131415161
吃豆人加载动画
效果 纯HTML12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910
封装虚拟光标闪烁效果
直接上使用 12345678910111213141516171819202122232425262728293031323334353637383940414243444546<script>import { useFlicker } from './useFlicker'export default { data () &#
用于滚动数字的指令（超级详细）
指令需求 能自动识别并滚动目标元素上的所有能滚动的数字 支持自定义滚动数字的样式，如颜色，加粗 支持自定滚动的时间 滚动过程中不会导致整段文字宽度发生变化，如 1 - 1000000000不会导致整段跟着慢慢变宽 先看使用 使用代码展示： 1234import Vue from 'vue'import scrollNum from "./scroll-num&qu
优雅的封装rAF
封装需求 支持控制每秒刷新帧数（FPS），节省性能消耗 支持控制持续时间 支持获取实时进度 支持暂停和继续 使用 1234567891011121314151617import rAFWithFPS from "./rAFWithFPS"const { pause, next } = rAFWithFPS(progress => {
点击涟漪效果指令（超级详细）
使用先引入涟漪样式，建议在App.vue中全局引入： 12345678910111213141516171819202122232425.ripple { position: absolute; left: 0; top: 0; display: none; transform: translate3d(-50%, -50%, 0) scale(0);
打字机效果指令（超级详细）
基础使用 注册（vue2为例） 1234import Vue from 'vue'import write from "./write"Vue.directive('write', write) 使用 1234567891011121314151617<script>export default { da
轮播列表组件（FCarousel）
需求 支持水平垂直滚动 支持动态添加数据项 可自定义的左右切换箭头 三种模式可选（无限滚动，循环滚动，按需滚动） 使用以Vue2为例 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697