原创 vue組件系列-列表左右箭頭滾動(vue3+ts)

<template> <div class="list-wrapper" ref="allListRef"> <div v-if="showArrow && listSource.length > minArrowItems

原创 【萬能CSS】 N 宮格自適應佈局、0.5像素的線等

宮格佈局第一種:.template-list { width: 100%; border-radius: 4px; height: 202px;

原创 vue 動態對象數據 分組

import { groupBy } from 'lodash'computed: {    groupRecords() {       const records = this.dataRecords       .map(     

原创 【推薦】navigator.sendBeacon() 異步發送數據

navigator.sendBeacon()方法可用於通過HTTP將少量數據異步傳輸到Web服務器。 使用sendBeacon() 方法會使用戶代理在有機會時異步地向服務器發送數據,同時不會延遲頁面的卸載或影響下一導航的載入性能。這就解決了

原创 【Safari/IOS 兼容性】 從js visibilitychange Safari下無效說開去

一、Safari下問題說明 在 Safari 瀏覽器下,無論是桌面端 Safari,還是 iOS Safari,visibilitychange 事件不總是觸發的。 對於窗口最小化,Tab 隱藏等行爲 visibilitychange 事件

原创 4 個強大 JavaScript 運算符

1. ?? 非空運算符 在 JS 中,?? 運算符被稱爲非空運算符。如果第一個參數不是 null/undefined(譯者注:這裏只有兩個假值,但是 JS 中假值包含:未定義 undefined、空對象 null、數值 0、空數字 NaN、

原创 vue組件系列-數字滾動組件

<template> <div class="count-to-wrapper"> <slot name="left"/> <p class="content-outer"><span :class="['count-

原创 vue 動態菜單以及動態路由加載、刷新採的坑

需求: 從接口動態獲取子菜單數據 動態加載 要求只有展開才加載子菜單數據 支持刷新,頁面顯示正常       思路: 一開始比較亂,思路很多。想了很多 首先路由和菜單共用一個全局route, 數據的傳遞也是通過store的route,

原创 樹形結構數據處理

$(function () { const models = [ {id: 1, title: 'hello', parent: 0}, {id: 3, title: '

原创 element-ui 抽屜組件(el-drawer ) 二次封裝 增加resize拖曳改變寬度大小

<template> <div :id="`drawer_container_${id}`"> <el-drawer :id="id+'_drawer'" :wrapperClosable="false" @close="on

原创 開源建站系統

vue官網風格 文檔教程類型 https://vuepress.vuejs.org/zh/

原创 前端 大流量的下兜底容災方案

var url = interfaceURL; var backUrl = interfaceBackURL; var hardBackUrl = hardDataURL; var cacheTime = 10day; Ajax({

原创 動畫 收藏

animate.css 最有名的動畫效果庫 magic.css css 動畫效果庫 類似 animate.css popmotion 一個函數式聲明前端動畫庫 NES.css 任天堂主題風格 css 庫 particles.js

原创 項目中用到的跑馬燈等滾動特效積累

1.普通滾動 <div class="info"> <transition name="slide" mode="out-in"> <div clas

原创 css 樣式代碼收藏

1.文字漸變color:#DBA465; background-image: linear-gradient(to bottom, #fffefc 20%, #fdd050);