前端
蔡徐鲲
这个作者很懒,什么都没留下…
展开
-
array tree filter
array tree filter原创 2023-02-16 11:46:24 · 263 阅读 · 0 评论 -
Vite 与 Web Worker 小记
Vite + Web worker 笔记原创 2022-06-30 17:38:14 · 2117 阅读 · 0 评论 -
TypeScript 类型体操
ts 类型体操 练习原创 2022-06-28 22:02:25 · 978 阅读 · 1 评论 -
JavaScript 数字转千分位(魔幻)
javascript 原生千分位格式化函数Number.prototype.toLocaleString([locales [, options]])const a = 123456789a.toLocaleString() // => "123,456,789"a.toLocaleString('zh',{style:'decimal'}) // => "123,456,789"a.toLocaleString('zh',{style:'percent'}) // =>原创 2021-06-24 20:11:58 · 163 阅读 · 2 评论 -
Vue history使用nginx代理
nginx.confserver { charset utf-8; listen 80; server_name m.demo.com; gzip on; gzip_disable "msie6"; gzip_vary on; gzip_proxied any; gzip_comp_level 6; gzip_min_length 1100; gz原创 2021-05-31 19:17:27 · 309 阅读 · 1 评论 -
获取页面中最大的z-index
[…document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0)在element-ui中,可以统一使用PopupManager管理import { PopupManager } from ‘element-ui/lib/utils/popup’PopupManager.nextZIndex()原创 2021-04-07 16:13:25 · 971 阅读 · 0 评论 -
vue级联选择器只传最后一级
elementUI的级联选择器的v-modle接受的参数是一个数组,数组中的值是对应树形数组的节点值,但是在真实开发中后端可能只给返回了某一处单一节点,对el-cascader进行2次封装实现三级联动import arrayTreeFilter from 'array-tree-filter'/** 双层递归逆向查找某一节点的所有父级* */const findPatentValue = (array, value, valueName = 'value', childrenName = 'ch原创 2021-01-26 09:34:32 · 4390 阅读 · 0 评论 -
JavaScript 给树形(层级)数组添加层级标识
const arrayTreeAddLevel = (array, levelName = 'level', childrenName = 'children') => { if (!Array.isArray(array)) return [] const recursive = (array, level = 0) => { level++ return array.map(v => { v[levelName]原创 2021-01-25 15:55:22 · 3507 阅读 · 0 评论 -
JavaScript 树状数组根据子节点查找所有父节点
function findParent(array, value, valueName = 'value', childrenName = 'children') { if (!value || !Array.isArray(array)) return [] const result = [] const seek = (array, value) => { let parentValue = '' const up = (array, val原创 2021-01-19 14:50:58 · 2512 阅读 · 1 评论 -
Vue md编辑器的使用及md的渲染
<template> <div> <mavonEditor v-model="markdown" :codeStyle="codeStyle"></mavonEditor> <div v-html="compiledMarkdown"></div> </div></template><script>// 编辑import { mavonEditor } from '.原创 2021-01-07 17:49:43 · 1222 阅读 · 0 评论 -
JavaScript 判断数组内是否有重复的元素
function arrayItemsWhetherRepeat(array) { if (!Array.isArray(array)) return false array = array.sort((a, b) => a - b) let isRepeat = false array.reduce((prev, curr) => { if (prev === curr) isRepeat = true retur原创 2020-12-11 11:14:31 · 387 阅读 · 0 评论 -
Js文字转语音
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <textare原创 2020-12-04 13:50:53 · 515 阅读 · 2 评论 -
Vue 超级丝滑的路由动画
1. 父子路由间的卡片式动画<transition name="direction"> <router-view class="direction-view"></router-view></transition>.direction-enter,.direction-leave-to { transform: translate3d(100%, 0, 0);}.direction-view { position: absolute.原创 2020-11-20 16:01:00 · 1076 阅读 · 1 评论 -
Vue 点击其他地方关闭弹窗
Vue 点击其他地方关闭弹窗<!doctype html><html lang="en"><head> <title>Document</title> <script src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <style> #box { position: fi原创 2020-11-18 13:58:35 · 2182 阅读 · 0 评论 -
浏览器的渲染机制 | 重绘与回流
浏览器的渲染机制浏览器的渲染机制一般分为以下几个步骤:处理 HTML 并构建 DOM 树。处理 CSS 构建 CSSOM 树。将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局,计算每个节点的位置。调用 GPU 绘制,合成图层,显示在屏幕上。重绘与回流重绘(repaint):当元素样式的改变不影响布局时,浏览器将使用重绘对元素进行更新,此时由于只需要UI层面的重新像素绘制,因此 损耗较少回流(reflow):当元素的尺寸、结构或触发某些属性时,浏览器会重原创 2020-08-21 14:13:22 · 318 阅读 · 0 评论 -
vue组件间的切换和组件切换过渡动画
Vue组件间的切换和组件切换过渡动画组件切换使用component标签的:is="'组件名'"来控制组件的切换组件:<div id="app"> <button @click="changeComponent('component_one')">组件1</button> <button @click="changeCo...原创 2020-04-16 17:07:42 · 2089 阅读 · 1 评论 -
轻松掌握vue动画
vue动画1. vue把一个完整的动画分为两部分,入场动画和离场动画;2. 在入场动画中包含两个时间点,分别是入场前(v-enter)和入场后(v-enter-to);3. v-enter表示入场前的状态,例如透明度为0,偏移量为0px;4. v-enter-to表示动画入场完成后的终止状态,例如透明度为1,偏移量为100px;5. v-enter-active表示入场动画的时间段,在这...原创 2020-04-06 17:42:41 · 244 阅读 · 0 评论 -
IE8及以下 支持CSS3 background-size 方法
IE8及一下 支持CSS3 background-size 方法html demo<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box { heigh...原创 2019-11-20 12:38:54 · 282 阅读 · 0 评论