tag vue.js

標籤
貢獻371
385
05:55 PM · Oct 25 ,2025

@vue.js / 博客 RSS 訂閱

兔子先森 - uniapp自動滾動到底,上滑取消置底-錨點滾動

主要通過scroll-view組件來實現,比手動js獲取高度、判斷啥的更方便,而且官方支持 滾動到底 實現思路,通過錨點滾動實現,官方支持 view id="chat-main" scroll-view class="chat-main-inner" :lower-threshold="15" :scroll-into-view="targetId" scroll-y="t

react , vue.js , HTML , 前端 , Javascript

收藏 評論

baby7 - 給VitePress的右上角增加Github角標

給VitePress的右上角增加Github角標 介紹 我沒有找到VitePress的Github角標的插件,所以做了後面的嵌入流程,方案是在主題佈局中直接引入。如果不知道這兩個項目的同學可以看看介紹部分 github-corner 可以在頁面的四角顯示Github角標,可以自定義大小、背景顏色。當鼠標移動到這個角標時還能看到Github搖尾巴的動畫 官網地址: https://tholman.c

vue.js , github

收藏 評論

兔子先森 - uniapp微信小程序流式錄音-PCM

uniapp在微信小程序中使用Record.js 先安裝核心依賴 npm install recorder-core 然後插件市場下載插件 頁面結構,我們需要一個canvas元素來承載波形的繪製,canvas需要設置大小,下面的代碼可以直接複製使用 template view class="recorder-box" canvas type

react , vue.js , HTML , 前端 , Javascript

收藏 評論

baby7 - 博客的加載速度和大小的優化、優化再優化

0. 前言 最近對博客的加載速度和各種文件體積進行了優化,特此記錄一下 可以點擊七仔的博客測試我的博客速度 1. 基礎 1.1 圖片加載優化 對於非文章類的大圖片先進行一遍壓縮,使用各種壓縮網站就可以 然後對於各種圖片最好都轉換為為webp格式,相對於傳統格式能降低大小大概四成左右 1.2 gzip壓縮 gzip是針對文本類型進行壓縮的,例如html、js、css、txt等格式,可以在ng

vue.js , gzip , 雲存儲 , Nginx , 前端

收藏 評論

兔子先森 - VueZone-H5開發模板的一些常用功能

官網:https://vue-zone.github.io/docs/ github:https://github.com/vue-zone/vue3-vant-mobile 這是一個開源的vue3+vite的H5模板,多端設備兼容方式為 px - vw 和 rem 已接入過項目,親測好用,沒有過多配置,拉代碼啓動就能用了。 你可以把它當成一個已經搭好的架子,你只需要往裏面

react , vue.js , HTML , 前端 , Javascript

收藏 評論

baby7 - Vue視差標題背景

一、説明 這個我是為了放在博客的標題部分作為背景圖,上下滾動的時候比較好看。 原理就是通過幾張透明的png進行疊加,然後在上下滾動時,外層png移動的快,內層png移動得慢來實現視差效果。 先放一張示意圖: 這裏實際的距離X和Y在觀察者看來是一樣的,原因是距離觀察者的距離Z不一樣導致的。 再放一張視差標題背景的3d示意圖: 二、Vue代碼 這裏為了代碼高亮分三部分展示 html部分

vue.js , 視差滾動 , 視差動畫 , 博客

收藏 評論

兔子先森 - uni.connectSocket與@microsoft/signalr連接

之前做web頁面的時候,前後端用的@microsoft/signalr庫做長連接,現在微信小程序不支持signalr庫的直接使用,uniapp微信小程序的websocket長連接只能用uni.connectSocket,所以我們要用uni.connectSocket實現與signalr庫的長連接。 頁面結構 view button @click="onLink"啓動連接/bu

react , vue.js , HTML , 前端 , Javascript

收藏 評論

兔子先森 - uni.connectSocket真機調試報錯open fail:_code:20,_msg:Invalid HTTP

在微信開發者工具上uni.connectSocket的連接是正常的,一旦到真機預覽就連接報錯了,不管是真機預覽還是體驗版真機都會報錯。 真機報錯如下:open fail:_code:20,_msg:Invalid HTTP 最後在查找各種資料發現websocket的url不能包含特殊字符,必須轉碼才可以 比如我下面在url上拼接了一個token,這個token可能包含特殊字符(

react , vue.js , HTML , 前端 , Javascript

收藏 評論

兔子先森 - 前端封裝一個流式音頻自動播放的類

這個類會根據websocket返回的base64音頻數據自動緩存播放,你可以修改緩衝音頻時長,可以播放和暫停 import { base64ToArrayBuffer } from '@/utils/AudioTools'; class AudioPlay { // AudioContext audioContext: AudioContext | any = null; // Au

react , vue.js , HTML , 前端 , Javascript

收藏 評論

兔子先森 - 封裝uniapp微信小程序流式語音播放類

uniapp微信小程序端的websocket返回的base64音頻數據自動緩存播放,你可以修改緩衝隊列數,可以播放和暫停 class AudioPlay { constructor() { // createInnerAudioContext this.audioContext = uni.createInnerAudioContext();

react , vue.js , HTML , 前端 , Javascript

收藏 評論

Java陳序員 - 完全開源!一款基於 SpringBoot + Vue 構建的社區平台!

大家好,我是 Java陳序員。 在如今互聯網時代,擁有一個個人專屬的社區平台,用於技術交流或者興趣分享圈子,是一件很酷的事~ 今天,給大家介紹一款基於 SpringBoot + Vue 構建的社區平台,幫助你快速構建個人社區平台! 關注微信公眾號:【Java陳序員】,獲取開源項目分享、AI副業分享、超200本經典計算機電子書籍等。 項目介紹 OpenIsle —— 一個使用 SpringBo

vue.js , github , MySQL , springboot

收藏 評論

xiaohe0601 - 🚀 擁抱 create-uni,一行命令輕鬆集成 Uni ECharts!

Uni ECharts 正式集成到 create-uni 啦!現在,你只需要一行命令,就能快速創建一個內置 Uni ECharts 的 uni-app 初始項目。告別複雜配置,數據可視化從未如此輕鬆高效,讓開發者專注於創意與體驗! 🤓 為什麼選擇 Uni ECharts ? Uni ECharts 是適用於 uni-app 的 Apache ECharts 組件,無需繁瑣的步驟即可輕鬆在 uni

vue.js , uni-app , echarts , typescript , 前端

收藏 評論

後山人 - 告別重複勞動:鋭智後台(RaiseAdmin)如何用“懶人”代碼生成器重塑開發體驗

告別重複勞動:鋭智後台(RaiseAdmin)如何用“懶人”代碼生成器重塑開發體驗 在企業級應用開發中,後台管理系統是不可或缺的一環。然而,重複的CRUD(創建、讀取、更新、刪除)工作常常佔據了開發者大量寶貴時間。今天,我們聚焦一個優秀的開源項目——鋭智後台(RaiseAdmin)快速開發平台,它正以其現代化技術棧和創新的“懶人”代碼生成器,為開發者帶來一場效率革命。 一、現代化技術棧:性能與體驗

vue.js , MySQL , php , Javascript

收藏 評論

兔子先森 - axios多個baseURL封裝+vite跨域代理多個baseURL連接

公共封裝 import axios from 'axios'; import { MessagePlugin } from 'tdesign-vue-next'; import { getStorageToken } from '@/utils/index'; const api1 = axios.create({ baseURL: '/api1' }); const api2 = axio

react , vue.js , HTML , 前端 , Javascript

收藏 評論

兔子先森 - 微信小程序用户隱私保護指引設置

協議完善 我們在小程序開發過程中或多或少會使用帶用户隱私API,比如獲取用户頭像、暱稱,用户手機號等等,這些API必須完善用户隱私指引才能正常調用,否者正式版本使用會報錯或者無法過審。 僅有在指引中聲明所處理的用户信息,才可以調用平台提供的對應接口或組件。若未聲明,對應接口或組件將直接禁用 完善的入口如下: 根據實際情況,勾選對應的選項,勾選完後進入界面完

react , vue.js , HTML , 前端 , Javascript

收藏 評論

米女巫 - JavaScript中undefined的特點

1、undefined既是JavaScript中的原始數據類型之一,也是一個原始值數據 對於有編程經驗的朋友來説,undefined是JavaScript的原始數據類型之一這一點毋庸置疑,沒有什麼可以贅述的,因為ECMAScript規範中就將undefined定義為原始數據類型之一。 undefined也是一個原始值數據,我的理解是,當一個聲明瞭但是未初始化的變量會默

vue.js , 數據類型 , 作用域 , 賦值 , 前端開發

收藏 評論

兔子先森 - 微信AI小程序認證基本流程:認證、完善類目、微信認證

認證類型 認證層面的: 1、申請小程序賬號 2、完善小程序基本信息 名稱 簡介 頭像 介紹 3、完善類目 4、微信認證,認證需要公司主體信息、300塊錢認證費 可能你在開發中還無需微信認證這一步,但上架是需要的,到這裏基本的認證就結束了,然後是開發層面的。 開發層面的: 1、服務器域名配置,如果沒有配置則體驗版本接口無法調用,線上版同理

react , vue.js , HTML , 前端 , Javascript

收藏 評論

OpenTiny社區 - 不止按鈕和表格!TinyVue 偷偷上線 Space 組件,直接搞定「彈性+間距」佈局

本文由TinySpace組件貢獻者夏雯斐同學原創。 前言 近期,TinyVue正式發佈 v3.27.0版本,這次版本更新也增加了很多新特性,space組件就是其中比較重要的一個特性。 Space組件 是 OpenTiny Vue組件庫中的一個佈局容器組件,用於在子元素之間提供靈活的間距控制。 它支持水平與垂直方向排列、自動換行、對齊與分佈控制、以及順序調整等功能,能幫助開發者輕鬆實現響

vue.js , 組件庫 , 前端

收藏 評論

冴羽 - 從 useState 到 URLState:為什麼大佬們都在刪狀態管理代碼?

1. 前言 當你打開這個網址時: https://prismjs.com/download.html#themes=prismlanguages=markup+css+clike+javascriptplugins=line-numbers 你會發現,所有你需要的主題、語言、插件已經被自動勾選: 當你在頁面修改配置時,URL 也會隨之改變。 你看,這個 URL 不僅僅是一個鏈接,更是一個完整的狀

react , vue.js , node.js , 前端 , Javascript

收藏 評論

灰常酷的領帶 - Hadoop在中國AI時代的轉型

隨着人工智能(AI)技術的迅猛發展和國家“數字中國”戰略的深入推進,中國大數據產業正經歷從規模擴張向智能驅動的深刻轉型。作為大數據基礎設施的核心組成部分,Hadoop平台自2008年引入中國以來,已在金融、電信、製造、醫療等多個行業廣泛應用。然而,在AI時代對實時性、智能化和多模態數據處理能力提出更高要求的背景下,傳統Hadoop架構面臨嚴峻挑戰。本文結合當前技術演進趨勢與行業實踐,系統分析Had

vue.js , 前端 , Javascript

收藏 評論

兔子先森 - uniapp微信小程序pinia持久化緩存

HBuilder X自帶pinia,無需我們手動安裝。 我們通過pinia-plugin-persistedstate插件來實現pinia的持久化緩存 npm i pinia-plugin-persistedstate 本身 pinia-plugin-persistedstate 是不支持 uniapp 的,但是 pinia-plugin-persistedstate 提供了修改 s

react , vue.js , HTML , 前端 , Javascript

收藏 評論

兔子先森 - 移動端emoji輸入組件

主要流程 前端emoji組件一般用在聊天輸入界面,點擊表情,整個輸入框被彈起,顯示emoji界面,點擊其它位置,emoji界面自動關閉,這其中有一些注意點: 1、點擊emoji,emoji界面從底部彈起,輸入框也要同步顯示 2、二次點擊emoji圖標,emoji界面關閉(你也可以切換鍵盤輸入) 3、點擊輸入框,鍵盤彈起,emoji界面關閉 4、點擊emoji界面的其它位置(

react , vue.js , HTML , 前端 , Javascript

收藏 評論

兔子先森 - vue3前端pdf直接預覽

安裝依賴 npm i vue-pdf-embed 頁面結構 vue-pdf-embed :source="state.source" :style="scaleFun" :page="state.pageNum" @rendered="pdfRendered" @rendering-failed="pdfRendered" / 使用 script setup lang="t

react , vue.js , typescript , 前端 , Javascript

收藏 評論

laxnogithub - 前端-圖片壓縮,基於vue/webpack的tinypng插件

介紹/info auto compress img by tinypng when used webpack or vue This plugin can record the compression and will not recompress the file if it is not updated 適用於vue和webpack的tinypng插件,支持調整圖片尺寸 能夠根據記

vue.js , plugin , webpack , npm , Javascript

收藏 評論