3月
21
网页简易实现 3d glb 等模型预览。常见的插件有 threejs 和 babylonjs。
https://endoc.cnbabylon.com/extensions/the_babylon_viewer
https://www.npmjs.com/package/babylonjs-viewer
https://sandbox.babylonjs.com/
开始
# 安装
pnpm add babylonjs-viewer
# 使用
<template>
<div id="babylon-view-con"></div>
</template>
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import * as BabylonViewer from 'babylonjs-viewer';
function playByBabylon(url: string | null) {
nextTick(() => {
if (!url) {
url = 'https://playground.babylonjs.com/scenes/Rabbit.babylon'
}
let domElement: HTMLElement | null = document.getElementById('babylon-view-con');
if (domElement) {
new BabylonViewer.DefaultViewer(domElement, {
scene: {
debug: false
},
camera: {
behaviors: {
autoRotate: 0
}
},
model: {
url: url
}
})
}
})
}
</script>
继续阅读
3月
13
LogicFlow 默认有一些节点。但有时候，默认的节点完成不了项目需求。这个就需要自定义节点，刚好LogicFlow 支持自定义节点。
https://07.logic-flow.cn/guide/advance/customNode.html
如上图，现在需要一个输入口，n 个输出口，这个 n 是大于 0 的整数。一般也就最多 10 以下的整数吧。默认的节点就不支持，这里就需要自定义了。
要解决以下问题。
- 节点支持 resize （继承 RectResize，就可以实现）
- 根据输出口的数字动态生成锚点（1 个默认输入锚点， n 个输出锚点）
- 在锚点旁边加入数字进行标识（大于 1 个的时候，需要和数据一一对应，所以需要标识）
继续阅读
3月
06
daisyui 的 Dropdown 组件，点击展开对象时，怎么自动关闭展开对象呢？daisyui 默认没提供这个功能。只需要在点击对象时，触发 blur 方法即可。
if (document.activeElement instanceof HTMLElement) {
document.activeElement.blur()
}
3月
05
11月
28
tauri dev 项目的时候，axios 是没有问题。当 build 后，安装使用，axios 就会出现问题。这个时候，需要给 axios 增加一个 adapter 就好。 当然 tauri 的 allowlist 的配置也是要好的。
https://github.com/persiliao/axios-tauri-api-adapter
操作
pnpm add axios-tauri-api-adapter
# 在封装 axios 的地方加入下边的配置
import axiosTauriApiAdapter from 'axios-tauri-api-adapter';
const defaultConfig: AxiosRequestConfig = {
baseURL: VITE_APP_BASE_API,
timeout: 20000,
withCredentials: false,
adapter: axiosTauriApiAdapter
}
然后修改 tauri.conf.json 文件。
"tauri": {
"allowlist": {
"all": true,
"http": {
"all": true,
"request": true,
"scope": ["http://**", "https://**"]
}
}
}
好了，再去打包就没问题了。
pnpm tauri build
11月
25
将 web 项目打包成桌面应用程序是一种常见的方式。用到的工具有 electron 和 tauri 等。这里使用 tauri。
准备工作
- 安装配置 tarui 环境。 https://tauri.app/zh-cn/v1/guides/getting-started/prerequisites
- 准备一个 web 项目。
tauri 是可以从零开始创建项目，然后去完善项目的。但是，有的时候，项目已经完成了，这个时候，就需要在项目中加入 tauri。然后再构建打包了。
继续阅读
11月
24
用了 ts 的 vue3 项目，会经常遇到类型问题。组件问题也是类型问题的一种。这里简单总结一下写法。
组件类型声明
无论是第三方库，还是自定义组件，都可以通过这种方式来搞定。
这里分别以 element plus 中的组件和自定义组件为例。
# element plus 的 ElTable 组件
<template>
<el-table ref = "userTableRef">
<el-table-column property="nickname" label="昵称" />
</el-table>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { ElTable } from "element-plus";
const userTableRef = ref<InstanceType<typeof ElTable>>()
</script>
下边是自定义组件。
<template>
<MediaPlayer ref="mediaPlayer" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import MediaPlayer from '@/components/MediaPlayer/MediaPlayer.vue'
const mediaPlayer = ref<InstanceType<typeof MediaPlayer>>()
</script>
最后
定义好了类型后，代码提示就很友好了。
