WEB开发分享

GPT-image-2,AI图片生成利器

zongyan86 — Wed, 13 May 2026 02:23:37 +0000

试用了下GPT-image2，还是不错的。

生成日签：

图片风格为日签，芒种节气，日期为2026年6月5日，农历为四月二十，星期五，显示“ 梅雨季，亦是美好季。”

图片风格为日签，夏至节气，日期为2026年6月21日，农历为五月初七，星期日，显示“夏至，万物欣荣，静养清心。”，背景为蝉鸣

图片风格为日签，儿童节，日期为2026年6月1日，农历为四月十六，星期一，显示“不必急着长大，因为世界很大，但童年很短。”，背景为儿童操场奔跑

图片风格为日签，端午节，日期为2026年6月19日，农历为五月初五，星期四，显示“龙舟竞渡，百舸争流。”，背景为龙舟赛

生成美女：

图片风格为赛璐璐，女孩，20岁左右，高清晰度，弥散风，阳光，正在玩轮滑

图片风格为赛璐璐，女孩，20岁左右，高清晰度，弥散风，阳光，正在玩滑板

图片风格为赛璐璐，女孩，18岁左右，高清晰度，弥散风，暖色调，浴室剪影

图片风格为赛璐璐，带项链的金发女孩，高清晰度，侧脸，弥散风，带项链

生成海报：

极简文艺风，浅米色背景，中央大字中文“今日推荐”，下方小字“生活灵感 · 每日更新”，左下角水墨梅花枝，留白，干净，国风，平静，高质感

竖版手机海报，顶部中文标题“一句话打动你”，中部大面积留白可插入主体，底部箭头加中文“扫码立即参与”，现代简约，温和配色

极简知识卡片风格，淡奶油色纸张纹理，上方中文标题“高效成长的一页”，中间预留文字区域，下方留白，干净排版，柔和光线，温暖，ins风

生成侠客：

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

{
"subject": {
"type": "character",
"identity": "young Chinese swordsman",
"gender": "female",
"age": "20-25",
"appearance": {
"face": "handsome, sharp features, natural smile",
"expression": "calm, confident, slightly heroic",
"hair": "long black hair, messy, wind-blown, dynamic strands"
},
"clothing": {
"type": "ancient Chinese robe",
"color": "white",
"condition": "slightly worn, textured fabric"
},
"pose": "half-body portrait, holding a sword diagonally",
"focus_priority": "face"
},

"style": {
"genre": ["wuxia", "fantasy", "cinematic poster"],
"rendering": "photorealistic",
"fusion_style": "ink wash overlay (low intensity)",
"detail_level": "ultra high",
"consistency_lock": true
},

"composition": {
"type": "double exposure",
"primary": "character portrait",
"secondary": "mountain landscape inside silhouette",
"depth_layers": ["foreground character", "mid mountains", "background clouds"],
"visual_flow": "bottom-left to top-right",
"aspect_ratio": "2:3"
},

"environment": {
"scene": "epic Chinese mountains, misty peaks",
"elements": ["clouds", "fog", "distant lone swordsman"],
"weather": "foggy, windy",
"lighting": {
"type": "cinematic volumetric lighting",
"direction": "side lighting",
"intensity": "high contrast",
"rim_light": true
}
},

"weapon": {
"type": "ancient Chinese sword",
"material": "steel",
"effect": "subtle golden glow",
"detail": "engraved patterns"
},

"color_grading": {
"base": "cool gray, ink wash tones",
"accent": "gold highlights",
"contrast": "high",
"saturation": "medium-low"
},

"camera": {
"angle": "slightly low angle",
"lens": "85mm portrait",
"focus": "sharp on face",
"depth_of_field": "shallow"
},

"post_processing": {
"effects": [
"film grain subtle",
"light bloom",
"mist overlay",
"sharpness enhancement"
]
},

"output": {
"resolution": "8k",
"quality": "ultra",
"format": "cinematic poster"
}
}

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《GPT-image-2,AI图片生成利器》

antdui a-table滚动加载

zongyan86 — Wed, 24 Sep 2025 09:03:42 +0000

mounted

1
2
3
4
5
6
7
8

//滚动监听事件
this.$nextTick(() => {
const tableComponent = this.$refs.myTable;
if (tableComponent) {
const tableContainer = tableComponent.$el.querySelector('.ant-table-body');
tableContainer.addEventListener('scroll', this.handleScroll);
}
})

beforeUnmount

1
2
3
4
5
6
7

this.$nextTick(() => {
const tableComponent = this.$refs.myTable;
if (tableComponent) {
const tableContainer = tableComponent.$el.querySelector('.ant-table-body');
tableContainer.removeEventListener('scroll', this.handleScroll);
}
})

method

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

handleScroll(){
const tableComponent = this.$refs.myTable;
const tableContainer = tableComponent.$el.querySelector('.ant-table-body');
const scrollPosition = tableContainer.scrollTop;
const isAtTop = scrollPosition === 0;
if (isAtTop) {
//已滚动到顶部，执行相应操作
}
const isAtBottom = Math.abs(tableContainer.scrollHeight - scrollPosition - tableContainer.clientHeight)<1;
if (isAtBottom) {
// 已滚动到底部，执行相应操作
this.fetchData({
...this.searchFormValues,
page: ++this.currentPage
});
}
}

fetchData

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

fetchData(params) {
// 模拟异步获取数据，实际应用中应替换为API调用
this.loading = true;
params.size=20;
params.bimId =this.modelId;
params.bimVersion=this.versionId;
if(this.currentPage > this.totalPage) {
// this.$message.warn('已经到底了...')
this.tips="已经到底了..."
this.isShowTips=true;
let that=this;
setTimeout(function(){
that.isShowTips=false;
},500)
this.loading = false;
return;
}
API.bimBillQuotaItemPage(params).then(data => {
if (data.code === 0) {
this.totalPage = data.data.totalPage;
let newData = data.data.rows;
this.data = [...this.data, ...newData];
this.loading = false;
} else {
this.$message.error(data.msg);
this.loading = false;
}
});
// setTimeout(() => {
// const newData = Array.from({ length: this.pageSize }, (_, index) => ({
// key: this.data.length + index, // 生成唯一key值
// name: `Item ${this.data.length + index + 1}`, // 示例数据生成逻辑
// code: Math.floor(Math.random() * 100), // 示例数据生成逻辑
// }));
// this.data = [...this.data, ...newData]; // 追加新数据到数组中
// }, 1000); // 模拟延迟，实际应用中应为网络请求时间
},

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《antdui a-table滚动加载》

vue项目打包慢怎么解决

zongyan86 — Tue, 14 Jan 2025 06:51:25 +0000

让我们来看一下为什么Vue项目会打包慢。Vue项目打包慢可能有以下几个原因：

1. 项目结构复杂：如果您的项目结构过于复杂，包含了大量的组件和依赖，那么打包的过程会变得很慢。

2. 依赖包过多：如果您的项目使用了大量的第三方依赖包，那么打包的过程会变得很慢。这是因为每个依赖包都需要被打包成最终的输出文件。

3. 代码未优化：如果您的代码存在冗余、重复或低效的部分，那么打包的过程会变得很慢。

现在，让我们来看一些解决Vue项目打包慢的方法：

1. 优化项目结构：尽量简化项目结构，减少不必要的组件和依赖。将项目拆分为更小的模块，只加载需要的部分。

2. 减少依赖包：检查项目中使用的第三方依赖包，删除不必要的或重复的依赖。使用CDN引入一些常用的库，减少打包体积。

3. 代码优化：优化代码结构和逻辑，减少冗余和重复的代码。使用Vue的异步组件和按需加载功能，只在需要时才加载组件。

4. 使用Webpack优化：使用Webpack的优化配置，如代码分割、压缩、缓存等。合理配置Webpack的Loader和Plugin，减少打包时间。

5. 使用多线程编译：使用工具如HappyPack或thread-loader将打包过程中的一些耗时操作转交给多个线程来处理，提高打包速度。

6. 使用CDN加速：将一些公共的静态资源如Vue、React等库文件使用CDN引入，减少打包时间。

总结一下，要解决Vue项目打包慢的问题，您可以优化项目结构，减少依赖包，优化代码，使用Webpack优化配置，使用多线程编译，以及使用CDN加速等方法。通过这些方法，您可以显著提高Vue项目的打包速度，提升开发效率。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《vue项目打包慢怎么解决》

路径分享，记得带上encodeURIComponent

zongyan86 — Fri, 29 Nov 2024 07:53:57 +0000

路径分享

1
2
3

let record={}
let strRecord=encodeURIComponent(JSON.stringify(record));
this.linkValue=location.origin + location.pathname + `#/modelShareView?shareCode=${code}&pid=${Vue.ls.get('pid')}&record=${strRecord}`;

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《路径分享，记得带上encodeURIComponent》

vue vue-clipboard2(vue复制功能)

zongyan86 — Thu, 28 Nov 2024 02:56:13 +0000

1、安装

1	npm install --save vue-clipboard2

2、main.js引入

1 2	import VueClipboard from 'vue-clipboard2'; Vue.use(VueClipboard);

3、用法：

1
2
3
4
5
6

1
2
3
4
5
6
7
8

onCopy(){
let that=this;
that.$copyText(this.linkValue).then(function (e) {
that.$message.success('链接复制成功');
}, function (e) {
that.$message.error('链接复制失败');
})
},

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《vue vue-clipboard2(vue复制功能)》

antdui vue中a-dropdown的脚本报错

zongyan86 — Mon, 18 Nov 2024 01:02:48 +0000

一个老项目，忽然各种脚本报错，看了半天也没发现啥问题。
后面才发现，原来是小朋友代码写得不够规范。
antdui vue 用的1.0版本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

下面这玩意儿一定不能少！！！
会导致各种更新渲染节点脚本异常。
功能虽然能用，就是控制台一堆红

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《antdui vue中a-dropdown的脚本报错》

tarojs/cli 安装卸载升级

zongyan86 — Mon, 18 Nov 2024 00:47:22 +0000

跑一个3年前的taro项目，忽然跑不起来了。
后面发现原来是tarojs/cli的版本和package.json的版本不一致。
导致的各种报错，简直太糟糕了！

卸载：
# npm uninstall -g @tarojs/cli

安装：
# npm install -g @tarojs/cli@安装最新版
保持和package.json一致，要不容易出现各种报错。

升级
# taro update self
升级taro版本

# taro update projectName
更改package.json的文件

查看当前版本
npm info @tarojs/cli

有时候可能npm 下载网络慢，可以清理下缓存
npm cache clean --force

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《tarojs/cli 安装卸载升级》

团队建设经典故事

zongyan86 — Thu, 18 Jul 2024 06:50:55 +0000

和尚争功，香火不盛的故事——

三个和尚在一所破寺院里相遇。“这所寺院为什么荒废了?”不知是谁提出的问题。

“必是和尚不虔，所以菩萨不灵。”甲和尚说。

“必是和尚不勤，所以庙产不修。”乙和尚说。

“必是和尚不敬，所以香客不多。”丙和尚说。

三人争执不休，最后决定留下来各尽其能，看看谁能最后获得成功。

于是，甲和尚礼佛念经，乙和尚整理庙务，丙和尚化缘讲经。果然香火渐盛，原来的寺院恢复了往日的壮观。

“都因为我礼佛念经，所以菩萨显灵。”甲和尚说。

“都因为我勤加管理，所以寺务周全。”乙和尚说。

“都因为我劝世奔走，所以香客众多。”丙和尚说。

三人争执不休、不事正务，渐渐地，寺院里的盛况又逐渐消失了。

议一议：

问题组织表现在哪里呢?试图回答下面问题，归纳问题组织的种种表现。

1.三个和尚组成的团队目标在那里?

2.他们的团队执行力和生命力来自何方?

3.他们的团队为什么由盛转衰最终失败?

4.他们的团队关键的问题出在什么地方?

一劳永逸构建理想的团队

从前，有两个饥饿的人得到了一位长者的恩赐：一根渔竿和一篓鲜活硕大的鱼。
其中，一个人要了一篓鱼，另一个人要了一根渔竿，于是他们分道扬镳了。
得到鱼的人原地就用干柴搭起篝火煮起了鱼，
他狼吞虎咽，还没有品出鲜鱼的肉香，转瞬间，连鱼带汤就被他吃了个精光，
不久，他便饿死在空空的鱼篓旁。另一个人则提着渔竿继续忍饥挨饿，
一步步艰难地向海边走去，可当他看到不远处那片蔚蓝色的海洋时，
他浑身的最后一点力气也使完了，他也只能眼巴巴地带着遗憾撒手人间。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《团队建设经典故事》

uniAPP开发总结

zongyan86 — Wed, 22 May 2024 08:20:26 +0000

1、android app 套页面需要webView，通讯用@posttMessage。
2、android app 上传文件可用iframe方式。
3、级联组件可选任一级别，可用nodeclick配合closeChanged和clearChanged事件。注意closeChanged为异步方法。
4、下拉多选组件，需要自己开发组件。
5、必填注意表单提交的name配合rules。
6、动态表单，记得初始化数组。
7、可用逍遥模拟器模拟APP。
8、自定义导航:page.json //"navigationStyle": "custom" // 使用自定义导航栏，系统会关闭默认的原生导航栏
9、性能问题：uniApp在某些方面的性能可能不如原生应用。解决方法是优化代码，减少页面渲染的复杂度，使用性能更高的组件，以及对于复杂的列表使用虚拟列表等技术。
10、路由机制问题：uniApp的路由机制与Vue.js的路由不完全相同。解决方法是遵循uniApp的路由规范，并使用其提供的路由API。
11、关于webview⽅⾯，app的webview布局采⽤flex布局，千万不要⽤浮动。
12、 uni.getSystemInfoSync()最好在onReady中获取，不然某些⼿机会获取出问题。
13、如果给uni.showToast不加title的话，会显⽰成⼀个⼩⿊点。
14、样式覆盖用::v-deep
15、报表显示，可直接用table布局
16、100vh page铺满
17、input和键盘的距离通过cursor-spacing属性
18、intanceOf 判断Array ，APP端会返回false。老实点，Array.isArray来判断
19、v-for key最好规范写，要不APP端容易出幺蛾子
20、uni-file-picker v-model绑定的值和实际的值不一致。创建一个新数组，在页面初始化的时候，将请求回来的数据赋值给新数组，在上传文件的方法uploadselect里面对新数据进行push()新数据。然后再delete方法里面对数据进行splice().最后使用新数组的数据作为参数返回给后端。原来的image数组的数据就只用来展示。新数组的数据用来回显，这样就避免了，picker修改v-model绑定的数据了。

希望官网早日修复这些个bug，也希望这个文章能对遇到这个bug的码农们能够有所帮助。

其他资料

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《uniAPP开发总结》

为何自适应的网页放入iframe不自适应了？

zongyan86 — Mon, 22 Apr 2024 01:29:41 +0000

来看答案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
转载请注明转自《为何自适应的网页放入iframe不自适应了？》