组件 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}`);
 });

whereType的作用

Thu, 21 May 2026 21:04:00 +0800

whereType<Marker>() 是 Dart 中 Iterable 的一个方法，用于过滤集合中指定类型的元素。

它的作用

从集合中筛选出所有类型为 <Marker> 的元素，并返回一个新的 Iterable，忽略其他类型的元素。

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 组件

鸿蒙开发app资源库

Sun, 03 Aug 2025 08:30:18 +0800

鸿蒙图标库

鸿蒙第三方插件库

鸿蒙图标库

关于CupertinoNavigationBar图标对齐问题

Thu, 24 Jul 2025 20:27:03 +0800

开发一个自定义顶部栏，发现右侧图标与标题不在同一水平线上：

可能的原因

CupertinoNavigationBar默认布局：CupertinoNavigationBar的标题(middle)和尾部(trailing)控件默认可能有轻微的高度差异
CupertinoButton的默认内边距：您使用的CupertinoButton可能有默认的内边距影响对齐
图标本身的设计：CupertinoIcons中的图标可能有内置的视觉平衡空间

uniappx开发app，获取验证码倒计时功能

Tue, 08 Jul 2025 22:07:07 +0800

使用uniappx+uts+firstui开发app，实现一个获取手机验证码功能，记录一下代码：

uniappx开发app修改密码验证功能

Tue, 08 Jul 2025 22:07:07 +0800

实时验证：
- 新密码输入时立即验证格式
- 确认密码输入时验证格式和一致性
- 所有输入变化时更新按钮状态
错误提示：
- 添加了错误信息区域，实时显示验证结果
- 提供明确的格式错误和密码不一致提示
按钮状态逻辑优化：
- 要求所有字段非空
- 新密码必须符合格式
- 确认密码必须与新密码匹配
密码规则增强：
- 使用更严格的正则确保包含两类及以上字符
- 明确排除空格等无效字符

Flutter中使用adaptive_dialog的方法

Thu, 26 Jun 2025 22:02:15 +0800

adaptive_dialog是一个强大的Flutter插件，它能够根据运行平台(iOS或Android)自动适配对话框样式，提供一致的用户体验。本教程将详细介绍如何使用这个插件。

React 父子组件传值

Tue, 15 Apr 2025 16:41:16 +0800

在 React 中，父子组件传值方式：

1. 父组件向子组件传值（Props）

这是最基础的传值方式，通过 props 将数据从父组件传递给子组件。

微信小程序云开发获取openid

Tue, 04 Mar 2025 21:57:45 +0800

在微信小程序云开发提供了便捷的数据库和云函数功能，可以轻松存储和获取用户信息。以下是代码示例：

react 封装一个类函数使用方法

Tue, 21 Jan 2025 14:25:11 +0800

1.编写ProductCount函数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


class ProductCount {
 public static getProductCount(count: number): string {
 if (count < 10) {
 return `当前数量: 0${count}`;
 }
 return `当前数量: ${count}`;
 }
}

export default ProductCount;

2.在代码文件中导入 `ProductCount` 类。

1

import ProductCount from './ProductCount'; // 根据实际路径调整

3. 在 React 组件中使用**

在 React 项目中的组件中调用它并显示结果。

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: 数值越小子项越靠前

Flutter 3.0.5 使用BottomNavigationBar数量超过3个时底部导航显示为白色

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

查询了源码之后，得出当数量小于等于3时会默认fixed模式下使用主题色，大于3时则会默认shifting模式下使用白色，所以，type: BottomNavigationBarType.fixed, 即可.

flutter- ListTile leading加载本地图标

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

1
2
3
4
5
6


ListTile(
 leading: Images.assets('images/1.png'),
 title: Text('jquery 根据分类id分割数组'),
 subtitle: Text(
 '写项目的时候遇到一个问题'),
 )

现在改成这样就可以了：

flutter-firebase-login登陆失败

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

用flutter+firebase做推送功能的时候，根据firebase文档提示做，安装好 cli之后，怎么用科学上网都登陆不上去，然后，在sf找到一些办法，试过之后，生效了。记录一下

flutter不设置appbar内容被状态栏遮住

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


//1,引入dart:ui

import "dart:ui";

//2,获取头部状态栏高度

MediaQueryData.fromWindow(window).padding.top



//具体用法：

Padding(

padding:

EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top)

)

flutter父子传值StatefulWidget和StatelessWidget的区别

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

父组件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


ElevatedButton(
 onPressed: () {
 Navigator.of(context).push(MaterialPageRoute(
 builder: (context) => FormPage(title: 'form page!')));
 },
 style: ButtonStyle(
 padding: MaterialStateProperty.all(
 const EdgeInsets.fromLTRB(20, 10, 20, 10))),
 child: const Text('传值按钮'),
 )

子组件的StatelessWidget模式：

miot-plugin-sdk 使用echart图表插件

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

1.安装 echart

1

npm install native-echarts --save

2.引用

1

import Echarts from 'native-echarts';

3.把option封装成函数

 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


 echart(val,title){
 option = {
 tooltip: {
 formatter: '{a} <br/>{b} : {c}%'
 },
 series: [
 {
 name: 'Pressure',
 type: 'gauge',
 detail: {
 formatter: '{value}'
 },
 data: [
 {
 value: val,
 name: title
 }
 ]
 }
 ]
 };

 return option
 }
 

4.组件里调用

1

 <Echarts option={this.echart(this.start.title,this.state.val)} height={420} />

5.总结

在miot-plugin-sdk里面，如果不封装成函数，传不进去值，别的办法没去想，就这么用吧。组件里的高度和大小可以自己根据文档调试。

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)
 }
})()

在实例中应用

1
2
3
4


import { debounce } from "../utils/debounce";
debounce(() => {
//业务逻辑代码
},500)

记录一下。

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里的内容。

组件 on 特严赤傲

app端渐变背景

uniappx 开发app端 页面背景渐变颜色

Web 上用于获取用户设备当前位置的核心方法

whereType的作用

它的作用

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

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

鸿蒙开发app资源库

鸿蒙图标库

关于CupertinoNavigationBar图标对齐问题

可能的原因

uniappx开发app，获取验证码倒计时功能

uniappx开发app修改密码验证功能

Flutter中使用adaptive_dialog的方法

React 父子组件传值

1. 父组件向子组件传值（Props）

微信小程序云开发获取openid

react 封装一个类函数使用方法

1.编写ProductCount函数

2.在代码文件中导入 ProductCount 类。

3. 在 React 组件中使用**

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

flex布局里的属性

Flutter 3.0.5 使用BottomNavigationBar数量超过3个时底部导航显示为白色

flutter- ListTile leading加载本地图标

flutter-firebase-login登陆失败

flutter不设置appbar内容被状态栏遮住

flutter父子传值StatefulWidget和StatelessWidget的区别

miot-plugin-sdk 使用echart图表插件

1.安装 echart

2.引用

3.把option封装成函数

4.组件里调用

5.总结

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

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

vue3防抖

vue3兄弟之间传值之插件mitt

vue3中defineProps传值失去响应

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

uniappx 开发app端页面背景渐变颜色

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

2.在代码文件中导入 `ProductCount` 类。