Vue3 on 特严赤傲

app端渐变背景

Thu, 03 Sep 2026 21:48:35 +0800

uniappx 开发app端页面背景渐变颜色链接到标题

1
2


 /* 对应从左到右的水平渐变 (90deg) */
 background-image: linear-gradient(to right, #E6F9E6, #E0F0FF);

Web 上用于获取用户设备当前位置的核心方法链接到标题

1
2
3
4
5
6


// 获取用户设备当前位置
 navigator.geolocation.getCurrentPosition((position) => {
 const latitude = position.coords.latitude;
 const longitude = position.coords.longitude;
 console.log(`纬度: ${latitude}, 经度: ${longitude}`);
 });

vben admin pro 框架的 ApiComponent Api组件包装器select使用示例

Mon, 02 Feb 2026 22:27:31 +0800

最近开发的项目中，有一个功能是 form 表单里 select 组件下拉选项是通过接口返回的数据，我使用了ApiComponent 组件，实现这个功能有两种方法，第一种是通过 slots 插入组件的方式实现（参考：vben admin pro 框架的BasicTable之使用slots 插入组件），第二种就是下面这个。废话不说，直接上代码。

vben admin pro 框架的BasicTable之使用slots 插入组件

Mon, 02 Feb 2026 22:27:31 +0800

需求：在BasicTable 列表中，插入一行Switch组件改变状态的列 1，首先在主组件的 script 标签中引入 switch 组件

DataTable开发导出Excel文档带背景颜色

Sun, 20 Oct 2024 11:42:58 +0800

dataTable 导出Excel功能，要求在Excel文件里一行一行有背景颜色，整理了以下三种情况：

flex布局里的属性

Sun, 20 Oct 2024 11:42:58 +0800

父级属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34


flex-direction : 设置主轴的方向（row,row-reverse,column,column-reverse）
	row：X轴从左至右（默认）【1,2,3 】
	row-reverse：X轴从右至左【 3,2,1】
	column：Y轴从上之下
	column-reverse：Y轴从下至上

justify-content : 设置主轴上的子元素排列方式
	flex-start :默认从头部开始，从左至右，X轴为主轴【1,2,3 】
	flex-end : 从尾部开始排列【 1,2,3】
	center： 在主轴居中对齐（主轴为X，则水平居中）【 1,2,3 】
	space-around: 平分剩余空间【 1, 2, 3 】
	space-between: 先两边贴边，再平分剩余空间【1, 2, 3, 4, 5】

flex-wrap : 设置元素是否换行
	nowrap：默认不换行【1,2,3,4,5,6】
	wrap：换行		 【1,2,3】
					 【4,5,6】

align-content : 设置侧轴上的子元素的排列放方式（多行）
	flex-start:默认值在侧轴的头部开始排列
	flex-end:在侧轴的尾部开始排列
	center:在侧轴中间显示
	space-around:子项在侧轴平分剩余空间
	space-between:子项在侧轴先分布在两头，再平分剩余空间
	stretch:设置子元素高度平分父元素高度

align-items : 设置侧轴上的子元素排列方式（单行）
	center：垂直居中
	flex-start：垂直居上
	flex-end：垂直居下
	stretch：拉伸

flex-flow : 复合属性，相当于同时设置了flex-direaction 和 flex-wrap
	flex-flow: row wrap;

子级属性

1
2
3
4
5
6


flex:1 子项所占的比例
align-self: 控制子项自身在侧轴上的排列方式
	flex-start:垂直居上
	flex-end: 垂直居下
	center: 居中
order: 数值越小子项越靠前

node 安装多版本

Sun, 20 Oct 2024 11:42:58 +0800

首先安装n模块

1

 sudo npm install -g n

1、列出所有node版本

1

n ls

2、查看远程所有node

1

 n ls-remote

3、查看当前node版本

1

node -v

4、安装指定node版本

1

sudo n 14.17.0

5、删除某个版本的node

1

sudo n rm 14.17.0

6、安装最新稳定版

1

sudo n stable

7、安装最新版本

1

sudo n lastest

8、切换node版本(输入命令后上下键盘选择确认)

1
2


$ n
//若无法正常切换，则可以试试： sudo n

vite配置

Sun, 20 Oct 2024 11:42:58 +0800

vite配置项，有些需要记录一下

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


import { defineConfig, Terser } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
 base:'./', //打包公共路径
 plugins: [vue()],
 build:{
 //打包环境移除console.log，debugger
 minify:'terser',
 terserOptions:{
 compress:{
 drop_console:true,
 drop_debugger:true
 }
 },
 //打包文件按照类型分文件夹显示
 rollupOptions:{
 output:{
 chunkFileNames:'js/[name]-[hash].js',
 entryFileNames:'js/[name]-[hash].js',
 assetFileNames:'[ext]/[name]-[hash].[ext]'
 }
 }
 },
 server:{
 proxy:{
 'api':{
 target:'csdn.net',
 changeOrigin:true,
 rewrite:(path)=> path.replace('/^\/api/','')
 },
 }
 }
})

记录一下第一部分。

vite中无法使用require和@无法使用的问题

Sun, 20 Oct 2024 11:42:58 +0800

1，安装插件

1
2
3
4


//yarn 安装
yarn add -D vite-plugin-require-transform
//npm 安装
npm i vite-plugin-require-transform --S

2.在vite中配置一下即可

vue3+TS+Element-plus el-pagination分页组件显示中文

Sun, 20 Oct 2024 11:42:58 +0800

1，首先考虑改造一下main.ts

1
2
3
4
5
6


// ! element-plus vue3.0
import element from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
import locale from 'element-plus/lib/locale/lang/zh-cn' //中文
//在app中引用
app.use(ElementPlus,{locale})

如果得不到解决，那就单独在pagination的组件中解决一下

vue3+ts用ref获取元素节点里的值

Sun, 20 Oct 2024 11:42:58 +0800

在vue2中获取元素节点的值：

1
2


<div ref="myRef"></div>
this.$refs.myRef

在vue3+ts中获取元素节点的值

vue3防抖

Sun, 20 Oct 2024 11:42:58 +0800

1
2
3
4
5
6
7
8
9


//utils/debounce.js
//防抖函数
export const debounce = (() => {
 let timer = 0
 return (callback, wait) => {
 clearTimeout(timer)
 timer = setTimeout(callback,wait)
 }
})()

在实例中应用

vue3兄弟之间传值之插件mitt

Sun, 20 Oct 2024 11:42:58 +0800

1.首先安装

1
2
3
4


//npm
npm install mitt -S
//yarn
yarn add mitt -S

2.src下新建一个目录plugin,其中新建Bus.ts

vue3中defineProps传值失去响应

Sun, 20 Oct 2024 11:42:58 +0800

写小项目的时候，遇到了一个问题，异步请求出的数据，无法及时传值给子组件，一时竟想不明白为什么，经过查阅资料，发现，子组件在用defineProps接受到值以后，必须用toRefs来解构一下，才可以。

vue3自定义tab组件切换简易效果

Sun, 20 Oct 2024 11:42:58 +0800

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48


<template>
 <div class="content">
 <div class="tab">
 <div @click="swichItem(item)" class="tabs-item" v-for="item in data" :key="item.name">{{item.name}}</div>
 </div>
 <component :is="current.comName"></component>
 </div>
</template>
 
<script setup lang='ts'>
import {reactive,markRaw} from 'vue'
import A from './components/A.vue'
import B from './components/B.vue'
import C from './components/C.vue'

 type Tabs = {
 name:string,
 comName: any
 }
 type Com = Pick<Tabs,'comName'>

 const data = reactive<Tabs[]>([
 {
 name:'我是a组件',
 comName: markRaw(A)
 },
 {
 name:'我是b组件',
 comName: markRaw(B)
 },
 {
 name:'我是C组件',
 comName: markRaw(C)
 }
 ])

 let current = reactive<Com>({
 comName:data[0].comName
 })

 const swichItem=(item:Tabs)=>{
 current.comName = item.comName
 }
</script>
 
<style scoped>
 .tabs-item{display: inline-block; width: 100px;border: 1px solid #ddd;text-align: center;}
</style>

其中ABC三个组件味各自tab里的内容。

Vue3 on 特严赤傲

app端渐变背景

uniappx 开发app端 页面背景渐变颜色 链接到标题

Web 上用于获取用户设备当前位置的核心方法 链接到标题

vben admin pro 框架的 ApiComponent Api组件包装器select使用示例

vben admin pro 框架的BasicTable之 使用slots 插入组件

DataTable开发导出Excel文档带背景颜色

flex布局里的属性

node 安装多版本

vite配置

vite中无法使用require和@无法使用的问题

vue3+TS+Element-plus el-pagination分页组件显示中文

vue3+ts用ref获取元素节点里的值

vue3防抖

vue3兄弟之间传值之插件mitt

vue3中defineProps传值失去响应

vue3自定义tab组件切换简易效果

uniappx 开发app端页面背景渐变颜色链接到标题

Web 上用于获取用户设备当前位置的核心方法链接到标题

vben admin pro 框架的BasicTable之使用slots 插入组件