前端&跨端 — 木小良

油猴脚本开发

## 油猴脚本开发查找所有视频元素 ```js const videos = document.querySelectorAll('video'); //查找所有视频元素 // 遍历视频 videos.forEach(video => { // 这里写视频逻辑 }); ``` 查找单个视频元素 `const video = document.querySelector("video");` 假设找到视频元素后并赋值给了vid

vue3 鼠标右键菜单

## vue3 鼠标右键菜单 ```html <template> <div> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium tex

vue3 消息闪现

## vue3 消息闪现 ### 始终只显示一个 Notification.vue： ```html <template> <div v-if="show" aria-live="assertive" class="pointer-events-none fixed inset-0 flex px-4 py-6 items-start sm:p-6 z-10"> <div class="flex w-full fle

CSS基础

## CSS基础在<head>标签中使用`<link rel="stylesheet" href="style.css">`插入外联样式 ```css /* 标签选择器 */ h1 { color: red; } /* 类选择器 */ .myclass{ color: blue; } /* id选择器 !important指定最高优先级*/ #myid{ color: red !important; }

vue3多语言国际化i18n

## vue3多语言国际化i18n 安装 `npm install vue-i18n@next` 如果需要路由控制`npm install vue-router@4` 先在src目录下创建locales目录存放翻译文件可以使用子对象，用来区分不同vue组件或某个栏目的内容，例如我写了三条翻译，分别在App.vue,Index.vue,Ceshi.vue中使用。 crc/locales/en.json: ```json {

vue3动态组件加载

## vue3动态组件加载分三个不同的页面，按照productType的类型来显示哪个页面 ```html <template> <RechargeType v-if="productType === 'km'" /> <GiftCardType v-else-if="productType === 'cz'" /> <PurchaseType v-else="productType === 'dg'" /> </templ

qr-code-styling.js 前端生成自定义样式二维码

## qr-code-styling.js 前端生成自定义样式二维码 `npm install qr-code-styling` 安装 ```html <script type="text/javascript" src="/qr-code-styling.js"></script> <div id="qrcode"></div> <script type="text/javascript"> const qrCode = ne

Wails开发桌面GUI

## Wails开发桌面GUI **开发wails的时候尽可能把它想象成开发vue的场景** `go install github.com/wailsapp/wails/v2/cmd/wails@latest` 安装 `wails init -n myapp -t vue` 创建一个vue的项目 `cd myapp` 进入这个myapp .项目初始结构 ``` ├── build //项目构建目录 │ ├── app

tauri 开发

## tauri 开发假设已经安装好rust和node.js环境 `npm create tauri-app@latest` 或者 `pnpm create tauri-app` `pnpm install` ## vscode插件 Tauri ## ubuntu前置条件 ``` sudo apt update sudo apt install libwebkit2gtk-4.1-dev \ build-essential \

uvui使用

## uvui使用 ### 下拉菜单 ```vue <template> <view>  <uv-drop-down sign="dropDown_1" :defaultValue="[0, '0', 'all']"> <uv-drop-down-item name="order" t

uni-app基础用法

## uni-app基础用法 ## 模板 ```html  <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover"> <button type="default">跳转到新页面</button> </navigator> <navigator url="redirect/redirec

uni-app 实现功能例子

## uni-app 实现功能例子 ## 浏览外部网页创建一个专用来浏览外部的组件页面：pages/webview/index.vue ```vue <template> <view> <web-view :src="url"></web-view> </view> </template> <script setup> import { ref } from 'vue'; import { onLoad } from '@

分类 / 前端&跨端 — 木小良